{% load i18n %}
<div class="sequence proctored-exam instructions message-top-bar" data-exam-id="{{exam_id}}" data-exam-started-poll-url="{{exam_started_poll_url}}">
  <h3>
    {% blocktrans %}
      You Have Chosen To Take a Proctored Exam
    {% endblocktrans %}
  </h3>
  <p>
    {% blocktrans %}
    You must set up and start the proctoring software before you begin your exam
    {% endblocktrans %}
  </p>
  <div class="proctored-exam-message">
    <h3>
    {% blocktrans %}
      Install and Set Up Proctoring Software
    {% endblocktrans %}
    </h3>
    <p>
      {% blocktrans %}
        1. Open the proctoring software installation window and follow the instructions to <a href="{{software_download_url}}" target="_blank">install and set up the proctoring software</a>.
      {% endblocktrans %}
    </p>
    <p>
      {% blocktrans %}
        2. Copy this unique exam code and paste it in the proctoring software window when you are asked for it.
      {% endblocktrans %}
    </p>
    <p>
      <span class="proctored-exam-code" role="application">{{exam_code}}</span>&nbsp;<button class='proctored-exam-select-code'>Select exam code</button>
    </p>
    <p>
      {% blocktrans %}
        Do not share this code. It is linked to your {{platform_name}} account and can be used only once.
      {% endblocktrans %}
    </p>
    <p>
      {% blocktrans %}
        3. Keep the proctoring session window open while you are taking the exam. If you close it, the proctoring recording is stopped and you will not successfully complete the proctored exam.
      {% endblocktrans %}
    </p>
    <p>
      {% blocktrans %}
        4. Return to the {{platform_name}} courseware to start your exam.
      {% endblocktrans %}
    </p>
  </div>
</div>
<div class="footer-sequence border-b-0 padding-b-0">
  {% if not is_sample_attempt %}
  <p class="proctored-exam-instruction">
      {% trans "Don't want to take this exam with online proctoring?" %}<a class="proctored-decline-exam" href='#' data-action="decline" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
        {% trans "Take this exam as an open exam instead." %}
      </a>
  </p>
  {% endif %}
</div>
{% include 'proctoring/seq_proctored_exam_footer.html' %}

<script type="text/javascript">

  var _waiting_for_proctored_interval = null;

  $('.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? " +
        "You will no longer be eligible to use this course for academic credit."
      );
      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();
        }
      });
    }
  );

  $('.proctored-exam-select-code').click(function() {
    selectText($('.proctored-exam-code'));
    $(event.currentTarget).blur();
  });

  function selectText(textToBeSelected) {
    // this selects all the text in an element
    // http://stackoverflow.com/questions/12243898/how-to-select-all-text-in-contenteditable-div
    var doc = document,
      range, selection,
      element = textToBeSelected[0];

    if (doc.body.createTextRange) {
      range = doc.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = doc.createRange();
      range.selectNodeContents(element);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }

  $(document).ready(function(){
    _waiting_for_proctored_interval = setInterval(
      poll_exam_started,
      5000
    );
  });

  function poll_exam_started() {
    var url = $('.instructions').data('exam-started-poll-url');
    $.ajax(url).success(function(data){
      if (data.status === 'ready_to_start') {
        if (_waiting_for_proctored_interval != null) {
          clearInterval(_waiting_for_proctored_interval)
        }
        // we've state transitioned, so refresh the page
        // to reflect the new state (which will expose the test)
        location.reload();
      }
    });
  }

</script>