{% extends "base.html" %}

{% block content %}

{# ── Page title ───────────────────────────────────────────────────── #}
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
    <div>
        <h1 class="text-xl font-semibold text-slate-900">Audit Log</h1>
        <p class="text-sm text-slate-500 mt-0.5">
            {{ pagination.total }} state change{{ 's' if pagination.total != 1 else '' }} total
            {% if pagination.total_pages > 1 %}· page {{ pagination.page }} of {{ pagination.total_pages }}{% endif %}
        </p>
    </div>
    <div class="flex items-center gap-2 self-start sm:self-auto">
        {# Manual refresh button — no background polling #}
        <button
            hx-get="{{ prefix }}/audit/rows"
            hx-target="#audit-table-body"
            hx-swap="innerHTML"
            hx-indicator="#refresh-spinner"
            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-600
                   bg-white border border-slate-200 rounded-lg hover:bg-slate-50 hover:border-slate-300
                   transition-all active:scale-95 shadow-sm">
            <svg id="refresh-spinner"
                 class="w-3.5 h-3.5 htmx-indicator animate-spin text-indigo-500"
                 fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
            </svg>
            <svg class="w-3.5 h-3.5 htmx-settle-indicator"
                 fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"/>
            </svg>
            Refresh
        </button>
        <a href="{{ prefix }}/"
           class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-500
                  hover:text-slate-800 transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
            </svg>
            Routes
        </a>
    </div>
</div>

{% if entries %}

<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <div class="scroll-x">
        <table class="w-full text-left min-w-[600px] mobile-cards">
            <thead>
                <tr class="border-b border-slate-200 bg-slate-50/60">
                    <th class="px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest">Timestamp</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest">Route</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest">Action</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest hidden sm:table-cell">Actor</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest hidden sm:table-cell">Platform</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest">Status&nbsp;Change</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest hidden md:table-cell">Reason</th>
                </tr>
            </thead>
            <tbody id="audit-table-body" class="divide-y divide-slate-100">
                {% for entry in entries %}
                {% include "partials/audit_row.html" with context %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% include "partials/pagination.html" %}
</div>

{% else %}

{# ── Empty state ──────────────────────────────────────────────────── #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm">
    <div class="flex flex-col items-center justify-center py-16 px-6 text-center">
        <div class="w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
        <h3 class="text-sm font-semibold text-slate-900 mb-1">No audit entries yet</h3>
        <p class="text-sm text-slate-500 max-w-sm">State changes from the dashboard, CLI, or API will appear here.</p>
    </div>
</div>

{% endif %}
{% endblock %}