{% extends "projects/base.html" %}

{% block page_title %}{{ feature.key }} revisions {{ old.revision }}–{{ new.revision }}{% endblock %}

{% block project_content %}
  <p><a href="{% url 'features:history' org_slug=project.org.slug project_slug=project.slug feature_key=feature.key %}">Back to history</a></p>
  <h1>Changes to <span class="muted">{{ feature.key }}</span> from revision {{ old.revision }} to {{ new.revision }}</h1>

  {% if old.revision == new.revision %}
    <p>Choose two different revisions to compare.</p>
  {% else %}
    {% if field_changes %}
      <table>
        <caption>Details</caption>
        <thead>
          <tr>
            <th scope="col">Field</th>
            <th scope="col">Revision {{ old.revision }}</th>
            <th scope="col">Revision {{ new.revision }}</th>
          </tr>
        </thead>
        <tbody>
          {% for name, before, after in field_changes %}
            <tr>
              <th scope="row">{{ name }}</th>
              <td><del>{{ before }}</del></td>
              <td><ins>{{ after }}</ins></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}

    <h2>Description</h2>
    {% if hunks %}
      <table class="diff">
        <caption class="visually-hidden">Line-by-line changes to the description</caption>
        <thead>
          <tr>
            <th scope="col">Old line</th>
            <th scope="col">New line</th>
            <th scope="col">Text</th>
          </tr>
        </thead>
        {% for hunk in hunks %}
          <tbody>
            {% for line in hunk %}
              <tr class="diff-{{ line.kind }}">
                <td>{{ line.old_number|default_if_none:"" }}</td>
                <td>{{ line.new_number|default_if_none:"" }}</td>
                <td>{% if line.kind == "removed" %}<del><span class="visually-hidden">Removed: </span>- {{ line.text }}</del>{% elif line.kind == "added" %}<ins><span class="visually-hidden">Added: </span>+ {{ line.text }}</ins>{% else %}  {{ line.text }}{% endif %}</td>
              </tr>
            {% endfor %}
          </tbody>
        {% endfor %}
      </table>
    {% else %}
      <p>The description didn't change.</p>
    {% endif %}
  {% endif %}
{% endblock %}