{% load i18n enterprise %}

<div id="course-details-modal-{{ index }}" class="modal fade" role="dialog" aria-modal="true" aria-labelledby="modal-header-text-{{ index }}" aria-hidden="true" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="{{ close_modal_button_text }}">{% fa_icon 'times' %}</button>
      </div>
      <div class="modal-body">
        <header class="modal-header-wrapper">
          <div class="image">
            <img src="{{ course_image_uri }}" alt="{{ course_title }}"/>
          </div>
          <div class="details">
            <h1 id="modal-header-text-{{ index }}" class="modal-header-text">{{ course_title }}</h1>
            <p class="short-description">{{ course_short_description }}</p>
            {% if organization_logo and organization_name %}
              <div class="organization">
                <img src="{{ organization_logo }}" alt="{{ organization_name }}" />
              </div>
            {% endif %}
          </div>
        </header>
        <div class="details">
          <ul class="details-list">
            {% if premium_modes|length > 0 %}
              {% with course_mode=premium_modes.0 %}
                {% if course_mode.original_price %}
                  <li>
                    <div class="detail-container">
                      <div class="detail-title-container">
                        <span class="icon fa fa-tag" aria-hidden="true"></span>
                        <span class="title">{{ price_text }}</span>
                      </div>
                      <div class="detail-value-container">
                        <span class="text">
                          {% if course_mode.final_price and course_mode.original_price != course_mode.final_price %}
                            <strike>{{ course_mode.original_price }}</strike>
                            <span class="discount">{{ course_mode.final_price }}</span>
                          {% else %}
                            {{ course_mode.original_price }}
                          {% endif %}
                        </span>
                      </div>
                    </div>
                  </li>
                {% endif %}
              {% endwith %}
            {% endif %}
            {% if course_level_type %}
              <li>
                <div class="detail-container">
                  <div class="detail-title-container">
                    <span class="icon fa fa-certificate" aria-hidden="true"></span>
                    <span class="title">{{ level_text }}</span>
                  </div>
                  <div class="detail-value-container">
                    <span class="text">{{ course_level_type }}</span>
                  </div>
                </div>
              </li>
            {% endif %}
            {% if course_effort %}
              <li>
                <div class="detail-container">
                  <div class="detail-title-container">
                    <span class="icon fa fa-tachometer" aria-hidden="true"></span>
                    <span class="title">{{ effort_text }}</span>
                  </div>
                  <div class="detail-value-container">
                    <span class="text">{{ course_effort }}</span>
                  </div>
                </div>
              </li>
            {% endif %}
            {% if course_duration %}
              <li>
                <div class="detail-container">
                  <div class="detail-title-container">
                    <span class="icon fa fa-clock-o" aria-hidden="true"></span>
                    <span class="title">{{ duration_text }}</span>
                  </div>
                  <div class="detail-value-container">
                    <span class="text">{{ course_duration }}</span>
                  </div>
                </div>
              </li>
            {% endif %}
          </ul>
        </div>
        <div class="overview">
          {% if course_full_description %}
            <h2 class="h3">{{ course_full_description_text }}</h2>
            <div>{% autoescape off %}{{ course_full_description }}{% endautoescape %}</div>
          {% endif %}
          {% if expected_learning_items %}
            <h2 class="h3">{{ expected_learning_items_text }}</h2>
            <ul>
            {% for item in expected_learning_items %}
              <li>{{ item }}</li>
            {% endfor %}
            </ul>
          {% endif %}
          {% if staff %}
            <h2 class="h3">{{ staff_text }}</h2>
            <div class="staff-container">
              {% for person in staff %}
                <div class="row no-gutters">
                  {% if person.profile_image_url %}
                    <img src="{{ person.profile_image_url }}" alt="{{ person.given_name }} {{ person.family_name }}" />
                  {% endif %}
                  <div class="col-7">
                    <h3 class="h4">{{ person.given_name }} {{ person.family_name }}</h3>
                    {% if person.position %}
                      <p>{{ person.position.title }} at {{ person.position.organization_name }}</p>
                    {% endif %}
                    <p>{{ person.bio }}</p>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
