{% load i18n %}
<div class="sequence proctored-exam instructions message-left-bar" data-exam-id="{{exam_id}}" data-exam-started-poll-url="{{exam_started_poll_url}}">

  <div class="">
    <h3>
    {% blocktrans %}
      Follow these steps to set up and start your proctored exam.
    {% endblocktrans %}
    </h3>
    <p>
      {% blocktrans %}
        1. Copy this unique exam code. You will be prompted to paste this code later before you start the exam.
      {% endblocktrans %}
    </p>
    <p>
      <span class="proctored-exam-code">{{exam_code}}</span>
    </p>
    <p>
      {% blocktrans %}
        Select the exam code, then copy it using Command+C (Mac) or Control+C (Windows).
      {% endblocktrans %}
    </p>
    <p>
      {% blocktrans %}
        2. Follow the link below to set up proctoring.
      {% endblocktrans %}
    </p>
    <p>
      <span><a href="#" id="software_download_link" data-action="click_download_software" target="_blank">{% trans "Start System Check" %}</a></span>
    </p>
    <p>
      {% blocktrans %}
        A new window will open. You will run a system check before downloading the proctoring application.
      {% endblocktrans %}
    </p>
    <p>
      {% blocktrans %}
        You will be asked to verify your identity as part of the proctoring exam set up.
        Make sure you are on a computer with a webcam, and that you have valid photo identification
        such as a driver's license or passport, before you continue.
      {% endblocktrans %}
    </p>
    <p>
        {% blocktrans %}
          3. When you have finished setting up proctoring, start the exam.
        {% endblocktrans %}
    </p>
    <div>
        <button type="button" class="exam-action-button btn-pl-primary start-proctored-exam">
            {% trans "Start Proctored Exam" %}
        </button>
    </div>
  </div>
</div>
<div id="accessible-error-modal" class="modal" aria-hidden="true">
  <div class="inner-wrapper" role="dialog" aria-labelledby="accessible-error-title">
    <button class="close-modal">
      <span class="icon fa fa-remove" aria-hidden="true"></span>
      <span class="sr">
          {% trans "Close" %}
      </span>
    </button>

    <header>
        <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
        <span class="sr">,
            {% trans "modal open"}
        </span>
    <hr aria-hidden="true" />
    </header>
    <div role="alertdialog" class="status message" tabindex="-1">
        <p class="message-title" style="text-align: center; font-size: 16px;"></p>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="dismiss ok-button"></button>
    </div>
  </div>
  <a href="#accessible-error-modal" rel="leanModal" id="confirm_open_button" style="display:none">{% trans "open"}</a>
</div>

<div class="footer-sequence border-b-0 padding-b-0">
  {% if not is_sample_attempt and allow_proctoring_opt_out %}
    <p class="proctored-exam-instruction">
      <a href="#" class="proctored-decline-exam" data-action="decline" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
        {% trans "Take this exam without proctoring." %}
      </a>
    </p>
  {% endif %}
</div>
{% include 'proctored_exam/footer.html' %}

<script type="text/javascript">

  var accessible_error = function(message) {

      accessible_modal("#accessible-error-modal #confirm_open_button",
              "#accessible-error-modal .close-modal", "#accessible-error-modal", ".content-wrapper");
      $("#accessible-error-modal #confirm_open_button").click();
      $("#accessible-error-modal .message-title").html(message);
      $("#accessible-error-modal .ok-button").html(gettext("OK"));
  };

  $('.proctored-decline-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');

      var msg = gettext(
        "Are you sure you want to take this exam without proctoring?"
      );
      if (!confirm(msg)) {
        return;
      }

      // 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();
        }
      });
    }
  );


  function check_exam_started() {
    var url = $('.instructions').data('exam-started-poll-url');
    $.ajax(url).success(function(data){
      if (data.status === 'ready_to_start') {
        // we've state transitioned, so refresh the page
        // to reflect the new state (which will expose the test)
        location.reload();
      }
      else {
          // The proctoring setup is not yet complete.
          // Show a modal indicating that the user is not done yet.
          accessible_error(gettext("You must complete the proctoring setup before you can start the exam."));
      }
    });
  }

  $("#accessible-error-modal .cancel-button").click(function(){
      $("#accessible-error-modal .close-modal").click();
  });
  $("#accessible-error-modal .ok-button").click(function(){
      $("#accessible-error-modal .close-modal").click();
  });
  $('.start-proctored-exam').click(check_exam_started);

  $("#software_download_link").click(function (e) {
    $.ajax({
        url: "{{software_download_url}}",
        type: 'POST',
        data: {
            start_clock: true,
            attempt_proctored: true,
            exam_id: $('.instructions').data('exam-id')
        }
    );
  });

</script>
