{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Audit Trail{% endblock %}
{% block page_title %}Audit Trail{% endblock %}
{% block page_subtitle %}Immutable, hash-chained event trace (Layer 6){% endblock %}
{% block layer_indicator %}L6 Audit · L7 Temporal{% endblock %}

{% block content %}
{# Hash chain status #}
<div class="mb-6 flex items-start gap-3 p-4 rounded-lg {% if chain_valid %}bg-green-50 border border-green-200{% elif chain_valid == None %}bg-slate-50 border border-slate-200{% else %}bg-red-50 border border-red-200{% endif %}">
  {% if chain_valid %}
  <span class="text-green-600 text-lg">&#10003;</span>
  <div>
    <p class="text-sm font-medium text-green-800">Hash chain verified</p>
    <p class="text-xs text-green-600 mt-0.5">All audit entries are intact. The chain has not been tampered with (Invariant 4).</p>
  </div>
  {% elif chain_valid == None %}
  <span class="text-slate-500 text-lg">&#63;</span>
  <div>
    <p class="text-sm font-medium text-slate-700">Chain verification unavailable</p>
    <p class="text-xs text-slate-500 mt-0.5">Unable to verify the hash chain at this time.</p>
  </div>
  {% else %}
  <span class="text-red-600 text-lg">&#10007;</span>
  <div>
    <p class="text-sm font-medium text-red-800">Hash chain integrity failure</p>
    <p class="text-xs text-red-600 mt-0.5">One or more audit entries have been modified. Investigate immediately.</p>
  </div>
  {% endif %}
</div>

{# Filters #}
<div class="flex items-center gap-3 mb-6">
  <form method="get" class="flex items-center gap-3">
    <select name="action" class="rounded-lg border-slate-300 text-sm focus:border-brand-500 focus:ring-brand-500">
      <option value="">All actions</option>
      {% for at in action_types %}
      <option value="{{ at.action }}" {% if at.action == active_action %}selected{% endif %}>{{ at.action }}</option>
      {% endfor %}
    </select>
    <select name="target_type" class="rounded-lg border-slate-300 text-sm focus:border-brand-500 focus:ring-brand-500">
      <option value="">All targets</option>
      {% for tt in target_types %}
      <option value="{{ tt.target_type }}" {% if tt.target_type == active_target_type %}selected{% endif %}>{{ tt.target_type }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-200 transition-colors">Filter</button>
    {% if active_action or active_target_type %}
    <a href="{% url 'audit_list' %}" class="text-xs text-slate-400 hover:text-slate-600">Clear</a>
    {% endif %}
  </form>
  <span class="text-sm text-slate-500 ml-auto">{{ entries|length }} entr{{ entries|length|pluralize:"y,ies" }}</span>
</div>

{% if entries %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Seq</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Action</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Target</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Actor</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Timestamp</th>
        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for entry in entries %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ entry.sequence|default:"—" }}</td>
        <td class="px-4 py-3">{% include "components/_state_badge.html" with state=entry.action %}</td>
        <td class="px-4 py-3">
          <span class="text-sm text-slate-700">{{ entry.target_type }}</span><span class="text-xs text-slate-400 font-mono">:{{ entry.target_id|truncate_id }}</span>
        </td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ entry.actor_id|truncate_id }}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ entry.timestamp|format_dt }}</td>
        <td class="px-4 py-3 text-right">
          <a href="{% url 'audit_detail' entry.id %}" class="text-xs text-brand-600 hover:text-brand-800 font-medium">Detail</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{% include "components/_empty_state.html" with title="No audit entries" message="All operations are traced. Entries will appear here as actions occur." %}
{% endif %}
{% endblock %}