{% extends "hobo/applications/versions.html" %}
{% load i18n %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{% url 'application-version-compare' app_slug=app.slug %}">{% trans "Compare versions" %}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2>{% trans 'Compare versions' %} ({% if mode == 'manifest' %}{% trans "Manifest" %}{% else %}{% trans "Elements definitions" %}{% endif %})</h2>
  <span class="actions">
    <a href="?version1={{ version1.pk }}&version2={{ version2.pk }}&mode=elements">{% trans "Compare elements definitions" %}</a>
    <a href="?version1={{ version1.pk }}&version2={{ version2.pk }}&mode=manifest">{% trans "Compare manifest" %}</a>
  </span>
{% endblock %}

{% block content %}
  <p class="version-description">{{ fromdesc|safe }} ➔ {{ todesc|safe }}</p>
  <div class="diff">
    {% if mode == 'manifest' %}
      {{ diff_serialization|safe }}
    {% else %}
      <ul class="objects-list single-links application-content">
        {% for element in elements %}
          <li>
            <a>
              {% if not element.real_element %}<span class="tag tag-error">{% trans "Element not found" %}</span> {% endif %}{{ element.name }} <span class="extra-info">- {{ element.type_label }}</span>
              {% if element.real_element.get_redirect_url %}
                <a class="link-action-icon link" href="{{ element.real_element.get_redirect_url }}?application={{ app.slug }}&version1={{ version1.number }}&version2={{ version2.number }}&compare">
                  <span class="sr-only">{% trans "see" %}</span>
                </a>
              {% endif %}
            </a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
{% endblock %}