{% load i18n %}
<div class="sequence proctored-exam completed" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
      You have submitted this practice proctored exam
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
      Make sure you return to the proctoring software and select <strong>Quit</strong> to end the proctoring session.
    {% endblocktrans %}
  </p>
  <h4>
    {% blocktrans %}
      Your practice proctoring session: <b> Completed </b>
    {% endblocktrans %}
  </h4>

  <p>
    {% blocktrans %}
      Practice exams do not affect your grade or your credit eligibility.
      You have completed this practice exam and can continue with your course.
    {% 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 "You can also retry this practice exam" %}
    </a>
  </button>
</div>
<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>