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

{% load i18n staticfiles enterprise %}

{% block extrahead %}
  <script type="text/javascript">
    var courseId;
    var programId;
    var successUrl = {{ redirect_url|default:"null"|escapejs }};
    var failureUrl = {{ failure_url|default:"null"|escapejs }};
    var deferCreation = {{ defer_creation|yesno:"true,false" }};
    {% if course_specific and course_id %}
      courseId = "{{ course_id }}";
    {% endif %}
    {% if program_specific and program_uuid %}
      programId = "{{ program_uuid }}";
    {% endif %}
  </script>
  <script type="text/javascript" src="{% static  'js/vendor/jquery.cookie.js' %}"></script>
  <script type="text/javascript" src="{% static  'enterprise/js/grant_data_sharing_permissions.js' %}"></script>
{% endblock %}

{% block contents %}
  <div class="enterprise-container">
      <div class="row">
          <div class="col-3">
              {% if enterprise_customer.branding_configuration %}
                 <img class="enterprise-logo" src="{{ enterprise_customer.branding_configuration.logo.url }}" alt="{{ enterprise_customer.name }}"/>
              {% endif %}
              <p class="partnered-text">{{ welcome_text }}</p>
              <p class="partnered-text">
                {{ enterprise_welcome_text|safe }}
              </p>
          </div>
          <div class="col-7 border-left">
              <main>
                <div class="consent-container">
                  <h2 class="consent-title">{{ consent_message_header }}</h2>
                  <div class="consent-message">
                    {% autoescape off %}
                      <p>{{ consent_request_prompt|safe }} {{ policy_link_template }}</p>
                    {% endautoescape %}

                    <p>{{ requested_permissions_header|safe }}
                      <ul class="consent-items">
                        {% for permission in requested_permissions %}
                          <li>{{ permission }}</li>
                        {% endfor %}
                      </ul>
                    </p>
                  </div>

                  <div class="consent-input-container login-register">
                    <form name="data-sharing-consent" method="POST" id="data-sharing">
                      {% csrf_token %}

                      <input class="background-input data-consent-checkbox" type="checkbox" name="data_sharing_consent" id="data-consent-checkbox" value="True"/>
                      <p class="agreement-text">
                        <label for="data-consent-checkbox">{{ agreement_text }}</label>
                      </p>
                      <button type="submit" class="background-input consent-agreement-button" id="consent-button" disabled>{{ continue_text }}</button>
                      <button type="button" class="failure-link background-input" id="failure-link" data-toggle="modal" data-target="#consent-confirmation-modal">
                        {{ abort_text }}
                      </button>

                      <input type="hidden" name="enterprise_customer_uuid" value="{{ enterprise_customer.uuid }}" />

                      {% if course_specific and course_id %}
                        <input type="hidden" name="course_id" value="{{ course_id }}" />
                      {% endif %}

                      {% if program_specific and program_uuid %}
                        <input type="hidden" name="program_uuid" value="{{ program_uuid }}" />
                      {% endif %}

                      {% if redirect_url %}
                        <input type="hidden" name="redirect_url" value="{{ redirect_url }}" />
                      {% endif %}

                      {% if failure_url %}
                        <input type="hidden" name="failure_url" value="{{ failure_url }}" />
                      {% endif %}

                      {% if defer_creation %}
                        <input type="hidden" name="defer_creation" value="true" />
                      {% endif %}
                    </form>
                  </div>

                  <br/>
                  <button type="button" id="consent-policy-dropdown-bar" class="consent-policy-dropdown-bar background-input" aria-controls="consent-policy" aria-expanded="false">
                    <span class="dropdown-text">{{ policy_dropdown_header }}</span>
                    <span class="fa-stack fa-lg dropdown-icon-container" aria-hidden="true">
                      <span id="consent-policy-dropdown-icon-surround" class="fa fa-circle fa-stack-2x" aria-hidden="true"></span>
                      <span id="consent-policy-dropdown-icon" class="fa fa-chevron-right fa-stack-1x" aria-hidden="true"></span>
                    </span>
                  </button>

                  <div class="consent-policy" id="consent-policy" style="display:none;">
                    <p>{{ sharable_items_header }}</p>
                    <ul class="consent-policy-bulletpoints">
                      {% for item in sharable_items %}
                        <li>{{ item }}</li>
                      {% endfor %}
                    </ul>
                    <p>{{ sharable_items_footer }}</p>

                    <p>{{ sharable_items_note_header }}</p>
                    <ul class="consent-policy-bulletpoints">
                      {% for item in sharable_items_notes %}
                        <li>{{ item }}</li>
                      {% endfor %}
                    </ul>

                    <p>
                      <a class="pull-right" href="#">{{ policy_return_link_text }}</a>
                    </p>
                  </div>
                </div>
                <div id="consent-confirmation-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-header-text" aria-hidden="true" tabindex="-1">
                  <div class="modal-dialog modal-md" role="document">
                    <div id="consent-confirmation-modal-content" class="modal-content">
                      <div class="modal-header">
                        <button id="modal-close-button" type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="{% trans "Close" %}">
                          {% fa_icon 'times' %}
                        </button>
                      </div>
                      <div class="modal-body">
                        <header class="modal-header-wrapper">
                          <h2 id="modal-header-text" class="modal-header-text">
                            {{ confirmation_modal_header }}
                          </h2>
                        </header>
                        <p>{{ confirmation_alert_prompt|safe }}</p>
                        <p>{{ confirmation_alert_prompt_warning }}</p>
                        <button class="consent-agreement-button" id="modal-no-consent-button">{{ confirmation_modal_affirm_decline_text }}</button>
                        <button class="failure-link" id="review-policy-link">{{ confirmation_modal_abort_decline_text }}</button>
                      </div>
                    </div>
                  </div>
                </div>
              </main>
          </div>
      </div>
  </div>

{% endblock %}
