{% load i18n %}
<div class="sequence proctored-exam entrance" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
      Would you like to take {{ display_name }} as a Proctored Exam?
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
      Since you're enrolled in this course as a verified student, you have the option to take this exam with
      online proctoring. Online proctoring is one requirement towards being eligible for credit.
    {% endblocktrans %}
  </p>
  <div class="gated-sequence">
    <span><i class="fa fa-lock"></i></span>
    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
      {% trans "Yes, take this as a proctored exam (and be eligible for credit)" %}
    </a>
    <p>
      {% blocktrans %}
        You will need to <strong>download and install {{platform_name}} approved software </strong>for the online proctoring of
        your exam. After successful installation, you will be <strong>guided through setting up your
        proctored session and begin the exam immediately </strong>afterwards.</p>
      {% endblocktrans %}
    <i class="fa fa-arrow-circle-right start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false></i>
  </div>
  <div class="gated-sequence">
    <span><i class="fa fa-unlock"></i></span>
    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=false data-start-immediately=true>
      {% trans "No, take this as an open exam (and not be eligible for credit)" %}
    </a>
    <p>
      {% blocktrans %}
        You may proceed and begin the exam at your leisure, but <strong>you will not be able to apply for
        college credit </strong>upon completing the exam or this course in general.
      {% endblocktrans %}
    </p>
      <i class="fa fa-arrow-circle-right start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=false data-start-immediately=true></i>
  </div>
</div>
<div class="footer-sequence">
  <h4> {% trans "Why i am seeing these options?" %} </h4>
    <p>
    {% blocktrans %}
      Text to be added here.
    {% endblocktrans %}
  </p>
</div>
{% include 'proctoring/seq_proctored_exam_footer.html' %}

<script type="text/javascript">
  $('.start-timed-exam').click(
    function(event) {
      var action_url = $(this).data('ajax-url');
      var exam_id = $(this).data('exam-id');
      var attempt_proctored = $(this).data('attempt-proctored');
      var start_immediately = $(this).data('start-immediately');
      if (typeof action_url === "undefined" ) {
        return false;
      }
      $.post(
        action_url,
        {
          "exam_id": exam_id,
          "attempt_proctored": attempt_proctored,
          "start_clock": start_immediately
        },
        function(data) {
          // reload the page, because we've unlocked it
          location.reload();
        }
      );
    }
  );
</script>