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


{% block wiki_pagetitle %}{% trans "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 %}
  {% addtoblock "css" %}
    <style type="text/css">
      td.linenumber {
        width: 20px;
      }
      tr.insert td {
        background-color: #DFC;
      }
      tr.delete td {
        background-color: #FDC;
      }
      tr.equal td {
        background-color: #F2F2F2;
      }

      .diff-container td {
        white-space: pre; font-family: monospace;
      }
      .diff-container td,
      .diff-container th {
        padding: 2px 7px;
        border-right: 1px solid #DDD;
      }
      .diff-container td:last-child,
      .diff-container th:last-child {
        border-right: none;
      }
      .diff-container table {
        border-top: 1px solid #DDD;
      }
    </style>
  {% endaddtoblock %}

  <p class="lead">
    {% trans "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 %}