{% load i18n %}
<div class="sequence proctored-exam completed" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
      Are you sure you want to end your proctored exam?
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
      After you submit your exam, your responses are graded and your proctoring session is reviewed.
      You might be eligible to earn academic credit for this course if you complete all required exams
      as well as achieve a final grade that meets credit requirements for the course.
    {% endblocktrans %}
  </p>
  <div>
    <button type="button" name="submit-proctored-exam" class="exam-action-button" data-action="submit" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
      {% blocktrans %}
        Yes, end my proctored exam
      {% endblocktrans %}
    </button>
  </div>
  {% if does_time_remain %}
    <div>
      <button type="button" name="goback-proctored-exam" class="exam-action-button" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
        {% blocktrans %}
          No, I'd like to continue working
        {% endblocktrans %}
      </button>
    </div>
  {% endif %}
</div>
<script type="text/javascript">
  $('.exam-action-button').click(
    function(event) {

      // cancel any warning messages to end user about leaving proctored exam
      $(window).unbind('beforeunload');

      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>