{% load i18n %}
<div class="sequence proctored-exam success-top-bar instructions" data-exam-id="{{exam_id}}" data-exam-started-poll-url="{{exam_started_poll_url}}">
  <h3>
    {% blocktrans %}
      Your Proctoring Installation and Set Up is Complete
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
      Do not close the proctoring session window until you have completed and submitted your exam.
    {% endblocktrans %}
  </p>
  <div class="proctored-exam-message">
    <h3>
    {% blocktrans %}
      You Can Begin Your Exam Now
    {% endblocktrans %}
    </h3>
    <p>
      {% blocktrans %}
        When you start your exam you will have {{total_time}} to complete it. You cannot stop the timer once you start.
      {% endblocktrans %}
      {% blocktrans %}
        If the allotted time expires before you mark your exam as ended, the answers you have completed up to that point are submitted for grading, and your proctoring session is uploaded for review.
      {% endblocktrans %}
    </p>
    <div>
      <button type="button" class="proctored-enter-exam" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
        {% blocktrans %}
          Start my exam
        {% endblocktrans %}
      </button>
    </div>
  </div>
</div>
{% include 'proctoring/seq_proctored_exam_footer.html' %}

<script type="text/javascript">

  $('.proctored-enter-exam').click(
    function(e) {
      e.preventDefault();
      e.stopPropagation();

      var action_url = $(this).data('change-state-url');
      var exam_id = $(this).data('exam-id');
      var action = $(this).data('action');

      // Update the state of the attempt
      $.ajax({
        url: action_url,
        type: 'PUT',
        data: {
          action: action
        },
        success: function() {
          // Reloading page will reflect the new state of the attempt
          location.reload();
        }
      });
    }
  );
</script>