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

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

{%block header_extra %}
  <script src="{% static "codemirror/keymap/vim.js" %}"></script>
{% endblock %}

{% block title %}
  {% if title %}
    [SB] {{ title }}
  {% else %}
    Page Sandbox
  {% endif %}
  -
  CourseFlow
{% endblock %}

{% block root_container %}
  <div class="sandbox-page-editor">
    <div class="row">
      <div class="alert alert-warning" style="float:right" id="save-warning">
        <i class="fa fa-warning"></i>
        What you type into this page is not saved once you navigate away.
        Please make sure to retain a copy.
      </div>

      <h1>Page Sandbox</h1>

      {% if page_errors %}
        <div class="alert alert-danger">
          {{ page_errors | safe }}
        </div>
      {% endif %}

      <div class="well">
        {% crispy edit_form %}
      </div>
    </div>
  </div>
  <div class="sandbox-page-preview">
    <div class="row">
      {% if have_valid_page %}
        {{ body|safe }}

        {% if page_form_html %}
          <div class="well">
            {{ page_form_html|safe }}
          </div>
        {% endif %}

        {% if feedback or correct_answer %}
          <div class="alert
            {% if feedback.correctness == 1 %}
              alert-success
            {% elif feedback.correctness == 0 %}
              alert-danger
            {% else%}
              alert-info
            {% endif %}
            ">
            {% if feedback %}
              <p>{{ feedback.feedback|safe }}</p>
              {% if feedback.bulk_feedback %}
                <p>{{ feedback.bulk_feedback|safe }}</p>
              {% endif %}
            {% endif %}
            {% if correct_answer %}
              <p>{{ correct_answer|safe }}</p>
            {% endif %}
          </div>
        {% endif %}
      {% else %}
        <span class="text-muted" style="margin-top:30px">(Page preview appears here)</span>
      {% endif %}
    </div>
  </div>

  {# {{{ codemirror resizing #}

  <script type="text/javascript">
    window.setTimeout(
        function() { $("#save-warning").fadeOut() },
        5000);
  </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 %}