{% extends "course/course-base.html" %}

{% load crispy_forms_tags %}
{% load static %}

{% block title %}
  [{{ page_data.next_ordinal }}/{{ flow_session.page_count }}]
  {{title}} - {{ flow_desc.title}} - CourseFlow
{% endblock %}

{% block content %}
  <form
    action="{% url "course.flow.view_flow_page" course.identifier flow_session.id page_data.ordinal %}"
    class="navigation-form"
    method="POST">

    {% csrf_token %}

    <div class="well flow-well">
      <div class="flow-nav">
        {% if page_data.ordinal > 0 %}
          <a class="btn btn-default cf-nav-button"
            href="{% url "course.flow.view_flow_page" course.identifier flow_session.id page_data.previous_ordinal %}"
            role="button">&laquo; Previous</a>
        {% else %}
          <a class="btn btn-default cf-nav-button disabled"
            href="#"
            role="button">&laquo; Previous</a>
        {% endif %}
        {% if page_data.next_ordinal < flow_session.page_count %}
          <a class="btn btn-default cf-nav-button"
            href="{% url "course.flow.view_flow_page" course.identifier flow_session.id page_data.next_ordinal %}"
            role="button">Next &raquo;</a>
        {% else %}
          <a class="btn btn-default cf-nav-button disabled"
            href="#" role="button">Next &raquo;</a>
        {% endif %}
      </div>
      <div style="float:right">
        <button type="submit" name="finish" class="btn btn-default cf-nav-button">End session</button>
      </div>
      {% if flow_session.in_progress and expiration_mode_choice_count > 1 %}
        <div class="flow-session-expiration-panel">
          <span id="expiration_mode_change_progress">
          </span>
          <label for="id_expiration_mode">
            At deadline:
          </label>
          <select class="select form-control" id="id_expiration_mode"
              name="expiration_mode">
            {% for key, val in expiration_mode_choices %}
              <option value="{{ key }}"
                  {% if key == expiration_mode %}
                    selected
                  {% endif %}
              >{{ val }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}
      <div class="cf-flow-page-index">
        {% for page_nr, shown_page_nr in page_numbers %}
          {% if page_nr == page_data.ordinal %}
            <span class="cf-flow-page-number cf-current btn btn-default btn-xs disabled">{{ shown_page_nr }}</span>
          {% else %}
            <a href="{% url "course.flow.view_flow_page" course.identifier flow_session.id page_nr %}">
            <span class="cf-flow-page-number btn btn-default btn-xs
              {% if page_nr < page_data.ordinal %}
                cf-prior
              {% else %}
                cf-subsequent
              {% endif %}
              ">{{ shown_page_nr }}
            </span></a>
          {% endif %}
        {% endfor %}
      </div>
      <div style="clear:both; height:0px"></div>
    </div>
  </form>

  {% if max_points %}
    <div style="float:right" class="well">
      {{ max_points }} point{{ max_points|pluralize }}
    </div>
  {% endif %}

  {{ body|safe }}

  {% if form_html %}
    <div class="well">
      {{ form_html|safe }}

      {% if may_change_graded_answer and will_receive_feedback %}
        <div class="text-muted col-lg-offset-2 ">
          (You may still change your answer after you submit it.)
        </div>
      {% endif %}
    </div>
  {% endif %}

  {% if show_correctness and feedback %}
    <div class="alert
      {% if feedback.correctness == 1 %}
        alert-success
      {% elif feedback.correctness == 0 %}
        alert-danger
      {% else%}
        alert-info
      {% endif %}
      ">
        <p>{{ feedback.feedback|safe }}</p>
        {% if feedback.bulk_feedback %}
          <p>{{ feedback.bulk_feedback|safe }}</p>
        {% endif %}
      {% if show_answer and correct_answer %}
        <p>{{ correct_answer|safe }}</p>
      {% endif %}
    </div>
  {% elif show_answer and correct_answer %}
    {# show only correct answer, without indication of correctness #}
    <div class="well">
      <p>{{ correct_answer|safe }}</p>
    </div>
  {% endif %}

  {# {{{ change listening, navigation confirmation #}

  <script type="text/javascript">

    function activate_change_listening()
    {
      var input_changed = false;

      // {{{ listen for codemirror changes

      function on_cm_change(cm, change_obj)
      {
        input_changed = true;
      }

      $("div.CodeMirror").each(
          function ()
          {
            var cm = this.CodeMirror;
            cm.on("change", on_cm_change);
          });

      // }}}

      // {{{ listen for other input changes

      function on_input_change(evt)
      {
        input_changed = true;
      }

      $(":checkbox").on("change", on_input_change);
      $(":radio").on("change", on_input_change);
      $(":text").on("change", on_input_change);
      $("textarea").on("change", on_input_change);

      // }}}

      $(window).on('beforeunload',
          function()
          {
            if (input_changed)
              return "You have unsaved changes on this page.";
          });

      function before_save(evt)
      {
        input_changed = false;
      }

      $(".cf-save-button").on("click", before_save);
    }

    $(document).ready(activate_change_listening);
  </script>

  {# }}} #}

  {# {{{ expiration mode handling #}

  <script type="text/javascript">

    // using jQuery
    function get_cookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function expiration_mode_changed()
    {
      $("#expiration_mode_change_progress")
        .html(
          '<img src="{% static "images/busy.gif" %}" alt="Busy indicator">')
        .show();

      var jqxhr = $.ajax(
          "{% url "course.flow.update_expiration_mode" course.identifier flow_session.id %}",
          {
            type: "POST",
            data: {
              expiration_mode: $("#id_expiration_mode").val()
            },
            beforeSend: function(xhr, settings) {
              var csrftoken = get_cookie('csrftoken');
              xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
          })
        .done(function() {
          $("#expiration_mode_change_progress")
            .html('Saved.');
          window.setTimeout(
              function() { $("#expiration_mode_change_progress").fadeOut() },
              3000);
        })
        .fail(function() {
          $("#expiration_mode_change_progress")
            .html('Error--not saved.');
          window.setTimeout(
              function() { $("#expiration_mode_change_progress").fadeOut() },
              3000);
        });
    }

    $("#id_expiration_mode").on("change", expiration_mode_changed);
  </script>

  {# }}} #}

  {# {{{ codemirror resizing #}

  <script type="text/javascript">
    $("div.CodeMirror")
    .resizable({
          resize: function (event, ui)
          {
            $("div.CodeMirror").each(
              function ()
              {
                var cm = this.CodeMirror;
                cm.refresh();
              });
          }
      });
  </script>

  {# }}} #}

{% endblock %}

{# vim: set foldmethod=marker: #}