{% extends 'enterprise/base.html' %}

{% load staticfiles enterprise %}

{% block extrahead %}
  <script type="text/javascript" src="{% static 'enterprise/js/course_modal.js' %}"></script>
{% endblock %}

{% block contents %}
  <div class="enterprise-container">
    <div class="row">
      <div class="col-3">
        <img class="enterprise-logo" src="{{ enterprise_customer.branding_configuration.logo.url }}" alt="{{ enterprise_customer.name }}"/>
        <p class="partnered-text">{{ welcome_text }}</p>
        <p class="partnered-text">
          {% autoescape off %}{{ enterprise_welcome_text }}{% endautoescape %}
        </p>
      </div>
      <div class="col-7 border-left">

        {# Display success, error, warning or info messages #}
        {% alert_messages messages %}

        {% if course_enrollable %}
          <h2 class="course-confirmation-title">{{ confirmation_text }}</h2>
        {% endif %}

        <div class="media">
          <div class="thumbnail">
            <img class="course-image" src="{{ course_image_uri }}" alt="{{ course_title }}"/>
          </div>
          <div class="media-content">
            <div class="course-title">{{ course_title }}</div>
          </div>
        </div>
        {% if course_modes|length == 0 %}
          <div class="course-detail">
            <div class="course-org">
              {{ organization_name }}
            </div>
          </div>
        {% else %}
          <div class="course-detail">
            <div class="course-org">
              {{ organization_name }}
            </div>
            <div class="course-info">
              <i class="fa fa-clock-o" aria-hidden="true"></i>
              <span>{{ starts_at_text }} {{ course_start_date }} &nbsp;| &nbsp; {{ course_pacing }}</span>
            </div>
            {{ course_short_description }}
            {{ view_course_details_text|link_to_modal:0 }}
          </div>
          {% if course_enrollable %}
            <form method="POST">
              <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
              {% if course_modes|length > 1 %}<div class="caption">{{ select_mode_text }}</div>{% endif %}
              {% for course_mode in course_modes %}
              <div class="radio-block">
                <div class="{% if course_modes|length > 1 %}radio{% endif %}">
                  {% if course_modes|length > 1 %}
                    <input type="radio" name="course_mode" id="radio{{ forloop.counter0 }}"{% if forloop.first %} checked="checked"{% endif %} value="{{ course_mode.mode }}" />
                  {% else %}
                    <input type="hidden" name="course_mode" id="radio{{ forloop.counter0 }}" value="{{ course_mode.mode }}" />
                  {% endif %}
                </div>

                <label for="radio{{ forloop.counter0 }}">
                  <strong class="title">{{ course_mode.title }}</strong>
                  <span class="price">
                    {{ price_text }}:
                    {% if course_mode.final_price and course_mode.original_price != course_mode.final_price %}
                      <strike>{{ course_mode.original_price }}</strike> {{ course_mode.final_price }}
                      <div>{{discount_text|safe }}</div>
                    {% else %}
                      {{ course_mode.original_price }}
                    {% endif %}
                  </span>
                  <span class="description">{{ course_mode.description }}</span>
                </label>
              </div>
              {% endfor %}
              <button class="btn-confirm">{{ continue_link_text }}</button>
            </form>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </div>
  {% with index=0 %}
    {% course_modal %}
  {% endwith %}
{% endblock %}
