{% load i18n %}
<div class="sequence timed-exam completed" data-exam-id="{{exam_id}}">
  <h3>
    {% blocktrans %}
      Are you sure you want to end your timed exam?
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
      Make sure your responses and work are ready to be submitted. Once they are, you may end the exam below
      and your worked will then be graded.
    {% 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 timed 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 timed 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>