{% load i18n icons permissions translations %}

<table id="changes-table"
       class="table table-autowidth {% if bootstrap_5 %}container-fluid{% endif %}">
  <tbody id="changes-list">
    {% for item in changes_with_context %}
      <tr id="changes-item"
          class="history-row{% if bootstrap_5 %} row{% endif %}"
          {% if in_email %}style="clear:both"{% endif %}>
        <td class="history-event{% if bootstrap_5 %} col-3{% endif %}">
          {% if not in_email %}
            <div class="btn-float {% if bootstrap_5 %}float-end{% else %}pull-right flip{% endif %}">
              {% if item.permissions.can_revert %}
                <a class="btn btn-link"
                   href="{{ item.change.translation.get_translate_url }}?{% if search_url %}{{ search_url }}&amp;offset={{ offset }}&amp;{% endif %}checksum={{ item.change.unit.checksum }}&amp;revert={{ item.change.id }}"
                   title="{% translate "Revert" %}">{% icon "undo.svg" %}</a>
              {% endif %}
              {% if item.permissions.can_block_user %}
                <a class="btn btn-link red"
                   href="{% url 'manage-access' project=item.change.project.slug %}?block_user={{ item.change.user.username }}#block-user"
                   title="{% translate "Block user" %}">{% icon "account-cancel.svg" %}</a>
              {% endif %}
              {% if debug %}
                <a class="btn btn-link"
                   href="{% url 'show_change' pk=item.change.pk %}"
                   title="{% translate "View notification" %}">{% icon "bell.svg" %}</a>
              {% endif %}
              <a class="btn btn-link"
                 href="{{ item.change.get_absolute_url }}"
                 title="{% translate "View details" %}">{% icon "magnify-plus-outline.svg" %}</a>
            </div>
          {% endif %}
          <strong {% if bootstrap_5 %}class="ms-2"{% endif %}>{{ item.change.get_user_display }}</strong>
          <p class="text-muted">{{ item.change.get_action_display }}</p>
          <ul class="breadcrumb">
            {% if item.change.path_object %}
              {% if bootstrap_5 %}
                {% path_object_breadcrumbs5 item.change.path_object flags=False %}
              {% else %}
                {% path_object_breadcrumbs item.change.path_object flags=False %}
              {% endif %}
            {% endif %}
            {% if item.ip_address %}<p>{{ item.ip_address }}</p>{% endif %}
          </ul>
        </td>
        <td class="history-data{% if bootstrap_5 %} col-9{% else %} full-cell{% endif %}">
          <div class="comment-content">
            {% if item.history_data.description %}{{ item.history_data.description }}{% endif %}
            {% for history_field in item.history_data.change_details_fields %}
              <label class="{{ history_field.label_class }}">
                {{ history_field.label }}
                {% for tag in history_field.tags %}
                  <span class="badge{% if bootstrap_5 %} text-bg-secondary{% endif %}">{{ tag }}</span>
                {% endfor %}
              </label>
              {{ history_field.content }}
            {% endfor %}
            <span class="{% if bootstrap_5 %}float-end{% else %}pull-right flip{% endif %} text-muted">{{ item.change.timestamp|naturaltime }}</span>
            <div class="clearfix" {% if in_email %}style="clear:both"{% endif %}></div>
          </div>
          {% if in_email %}
            <a class="button" href="{{ item.change.get_absolute_url }}">{% translate "View" %}</a>
          {% endif %}
        </td>
      </tr>
    {% empty %}
      <tr>
        <td colspan="2">
          <em>{% translate "No matching activity found." %}</em>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>