{% load i18n %}
<div class="sequence timed-exam entrance" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
    {{ display_name }} is a Timed Exam ({{total_time}})
    {% endblocktrans %}
  </h3>
  <p>
    {% trans "This exam has a time limit associated with it." %}
    <strong>
      {% trans "In order to successfully pass this exam you will have to answer the following questions and problems in the time allotted." %}
    </strong>
    {% trans "Once you proceed, you'll start both the exam and the "%} {{total_time|lower}} {% trans " given to you." %}
  </p>
  <div class="gated-sequence">
    <a class='start-timed-exam' data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}">
      {% blocktrans %}
        I'm ready! Start this timed exam.
      {% endblocktrans %}
        <i class="fa fa-arrow-circle-right"></i>
      </a>
  </div>
</div>
{% include 'proctoring/seq_timed_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');

      $.post(
        action_url,
        {
          "exam_id": exam_id,
          "start_clock": true
        },
        function(data) {
          // reload the page, because we've unlocked it
          location.reload();
        }
      );
    }
  );
</script>