{% extends "app_home/tw4/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/tw4/_sidebar.html' %}
{% endblock %}


{% block title %}
<h2>{% translate "Data Revisions" %}</h2>
<!-- Bootstrap: text-muted → text-gray-500 -->
<small class="text-gray-500">{{ count }} {% translate "entries" %}</small>
<hr>
{% endblock %}


{% block content %}

{% if revisions %}
<div class="mt-2 mb-3">
  <!-- Bootstrap: btn btn-primary → Tailwind; FA4: fa-chevron-right → fa-solid -->
  <a href="?page={{ page|add:1 }}&size={{ size }}"
     class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
    <span class="inline-flex items-center gap-1">{% translate "Next" %} <span class="material-symbols-outlined text-base leading-none">keyboard_double_arrow_right</span></span>
  </a>
</div>
<hr>

<!-- Bootstrap: table table-striped table-hover small → Tailwind table -->
<table class="w-full text-sm border-collapse">
<thead class="bg-gray-800 text-white">
<tr>
  <th class="px-2 py-1 text-left">{% translate "ID" %}</th>
  <th class="px-2 py-1 text-left">{% translate "Date" %}</th>
  <th class="px-2 py-1 text-left">{% translate "Schema" %}</th>
  <th class="px-2 py-1 text-left">{% translate "Instance" %}</th>
  <th class="px-2 py-1 text-left">{% translate "Display Name" %}</th>
  <th class="px-2 py-1 text-left">{% translate "Action" %}</th>
  <th class="px-2 py-1 text-left">{% translate "User" %}</th>
</tr>
</thead>
<tbody>
{% for revision in revisions %}
<tr class="border-b even:bg-gray-50 hover:bg-gray-100">
  <td class="py-1 px-2">{{ revision.id }}</td>
  <td class="py-1 px-1">{{ revision.date|date:'Y-m-d H:i:s (D)' }}</td>
  <td class="py-1 px-2">{{ revision.classname }}</td>
  <td class="py-1 px-2">{{ revision.keyname }}</td>
  <td class="py-1 px-2">{{ revision.displayname|default:"" }}</td>
  <td class="py-1 px-2">{{ revision.action }}</td>
  <td class="py-1 px-2">{{ revision.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>

{% else %}
<!-- Bootstrap: alert alert-info → Tailwind info box -->
<div class="p-4 rounded bg-cyan-50 border border-cyan-200 text-cyan-800">
  <p>{% translate "No more revision entries found." %}</p>
</div>
{% endif %}

{% endblock %}
