{% 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 %}

        <h2 class="course-confirmation-title">{{ confirmation_text }}</h2>
        <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>
        <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>
        <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>
      </div>
    </div>
  </div>
  {% with index=0 %}
    {% course_modal %}
  {% endwith %}
{% endblock %}
