{% load i18n %}
<div class="failure sequence proctored-exam" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
      There was a problem with your practice proctoring session
    {% endblocktrans %}
  </h3>

  <h4>
    {% blocktrans %}
      Your practice proctoring results: <b class="failure"> Unsatisfactory </b>
    {% endblocktrans %}
  </h4>

  <p>
    {% blocktrans %}
      Your proctoring session ended before you completed this practice exam.
      You can retry this practice exam if you had problems setting up the online proctoring software.
    {% endblocktrans %}
  </p>
  <hr>
  <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 "Try this practice exam again" %}
    </a>
  </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>