{% extends "combo/page_history.html" %}
{% load gadjo static i18n %}

{% block css %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" media="all" href="{% static "css/gadjo.snapshotdiff.css" %}?{% start_timestamp %}"/>
{% endblock %}

{% block extrascripts %}
  {{ block.super }}
  <script src="{% static "js/gadjo.snapshotdiff.js" %}?{% start_timestamp %}"></script>
{% endblock %}

{% block appbar %}
  <h2>{% trans 'Compare snapshots' %} ({% if mode == 'json' %}{% trans "JSON" %}{% else %}{% trans "Inspect" %}{% endif %})</h2>
  <span class="actions">
    <a href="?version1={{ snapshot1.pk }}&version2={{ snapshot2.pk }}&mode=inspect">{% trans "Compare inspect" %}</a>
    <a href="?version1={{ snapshot1.pk }}&version2={{ snapshot2.pk }}&mode=json">{% trans "Compare JSON" %}</a>
  </span>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{% url 'combo-manager-page-history-compare' pk=page.pk %}">{% trans "Compare snapshots" %}</a>
  </li>
{% endblock %}

{% block content %}
  <p class="snapshot-description">{{ fromdesc|safe }} ➔ {{ todesc|safe }}</p>
  <div class="snapshot-diff">
    {% if mode == 'json' %}
      {{ diff_serialization|safe }}
    {% else %}
      <div class="{{ tab_class_names }}">
        <div class="pk-tabs--tab-list" role="tablist">
          {% for tab in tabs %}{{ tab|safe }}{% endfor %}
          {{ tab_list|safe }}
        </div>
        <div class="pk-tabs--container">
          {% for attrs, panel in panels %}
            <div{% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>
              {{ panel|safe }}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
{% endblock %}