{% load i18n %}
<div class="sequence proctored-exam entrance" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
      Would you like to take "{{ display_name }}" as a practice proctored exam?
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
      You can try this practice exam as many times as you want.
    {% 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 practice exam with online proctoring" %}
    </a>
    <p>
      {% blocktrans %}
        You will be guided through steps to set up online proctoring software and to perform various checks.
        When you start the exam, the timer on the right shows the time remaining in the exam.
      {% 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>
</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>