{% extends "wiki/article.html" %}
{% load sekizai_tags %}
{% load static %}
{% load wiki_tags %}

{% block wiki_pagetitle %}History: {{ article.current_revision.title }}{% endblock %}

{% block wiki_contents_tab %}
  {% include "wiki/includes/modals.html" %}

  {% addtoblock "js" %}
    <script type="text/javascript" src="{% static "wiki/js/diffview.js" %}"></script>
    <script type="text/javascript" src="{% static "wiki/js/diff.js" %}"></script>
  {% endaddtoblock %}

  <p>
    Click each revision to see a list of edited lines. Click the Preview
    button to see how the article looked at this stage. At the bottom of
    this page, you can change to a particular revision or merge an old
    revision with the current one.
  </p>

  {% include "wiki/includes/pagination.html" %}

  <form method="GET" id="historyForm">
    <table class="table is-striped">
      <thead>
        <tr>
          <th>Updated</th>
          <th>Summary</th>
          <th class="has-text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for revision in revisions %}
          <tr {% if revision == article.current_revision %}class="is-selected"{% endif %}>
            <td>
              {% include "wiki/includes/revision_info.html" with current_revision=article.current_revision %}
            </td>
            <td>
              {% if revision.user_message %}
                {{ revision.user_message }}
              {% elif revision.automatic_log %}
                {{ revision.automatic_log }}
              {% else %}
                <em>No summary</em>
              {% endif %}
            </td>
            <td class="has-text-right">
              {% if revision == article.current_revision %}
                <a class="button is-static has-text-grey">
                  <span class="icon">
                    <i class="fas fa-eye"></i>
                  </span>
                  <span>Preview</span>
                </a>
                <a class="button is-static has-text-grey">
                  <span class="icon">
                    <i class="fas fa-sync"></i>
                  </span>
                  <span>Switch</span>
                </a>
              {% else %}
                <button type="submit" class="button" onclick="showPreviewModal('{{ revision.id }}', '{% url 'wiki:preview_revision' article.id %}', '{% url 'wiki:change_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}'); event.preventDefault();">
                  <span class="icon">
                    <i class="fas fa-eye"></i>
                  </span>
                  <span>Preview</span>
                </button>
                <a class="button is-primary" href="{% url 'wiki:change_revision' path=urlpath.path article_id=article.id revision_id=revision.id %}">
                  <span class="icon">
                    <i class="fas fa-sync"></i>
                  </span>
                  <span>Switch</span>
                </a>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    {% include "wiki/includes/pagination.html" %}

    <input type="hidden" name="r" value="" id="r" />

    <div class="modal" id="previewModal">
      <div class="modal-background"></div>
      <div class="modal-card" style="height: 80%; width: 80%;">
        <div class="modal-card-head">
          <p class="modal-card-title">Revision Preview</p>
        </div>
        <div class="modal-card-body" style="padding: 0; overflow: hidden;">
          <iframe name="previewWindow" id="previewWindow" frameborder="0" style="width: 100%; height: 100%;"></iframe>
        </div>
        <div class="modal-card-foot">
          <button class="button is-light" aria-label="close">
            <span class="icon">
              <i class="fas fa-arrow-left"></i>
            </span>
            <span>Back</span>
          </button>

          {% if article|can_write:user %}
            <a href="#" class="button is-primary switch-to-revision">
              <span class="icon">
                <i class="fas fa-sync"></i>
              </span>
              <span>Switch to this version</span>
            </a>
          {% else %}
            <a class="button is-static">
              <span class="icon">
                <i class="fas fa-check"></i>
              </span>
              <span>Switch to this version</span>
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </form>

  <script src="{% static "js/wiki/modal.js" %}" type="text/javascript"></script>
  <script src="{% static "js/wiki/history.js" %}" type="text/javascript"></script>
{% endblock %}