{% 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 %}
      As a verified learner in this course, you have the option of taking this exam with online proctoring.
      To be eligible to earn credit for this course, you must take and pass the proctoring review for this exam.
    {% endblocktrans %}
  </p>
  <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
    <span><i class="fa fa-lock"></i></span>
    <a>
      {% trans "Yes, I want to take this exam with online proctoring (and be eligible for credit)" %}
    </a>
    <p>
      {% blocktrans %}
        You will be guided through steps to set up online proctoring software and to perform various checks.</br>
          &#8226; Have your photo ID ready so that you can verify your identity. </br>
          &#8226; Be ready to start your exam after you complete the proctoring setup. </br>

      {% 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=true data-start-immediately=false></i>
  </button>
  <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=false data-start-immediately=true>
    <span><i class="fa fa-unlock"></i></span>
    <a>
      {% trans "No, I want to take this exam without proctoring (and not be eligible for credit)" %}
    </a>
    <p>
      {% blocktrans %}
        If you take this exam without proctoring, you will not be eligible to use this course for academic credit,
        even if you achieve a passing grade.
      {% 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>
  </button>
</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 (!attempt_proctored) {
        var msg = gettext(
          "Are you sure you want to take this exam without proctoring? " +
          "You will no longer be eligible to use this course for academic credit."
        );
        if (!confirm(msg)) {
          return;
        }
      }

      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>