{% extends "base.html" %}
{% block title %}Audit Trail // Synapse-Cortex{% endblock %}
{% block header %}Admin // Audit Trail{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <div class="text-xs text-cortex-muted uppercase tracking-wider">{{ total }} events</div>
  <form method="get" action="/admin/audit" class="flex items-center gap-2">
    <select name="action" onchange="this.form.submit()" class="bg-cortex-panel2 border border-cortex-border rounded px-2 py-1 text-xs">
      <option value="">All actions</option>
      {% for a in all_actions %}
      <option value="{{ a }}" {% if action_filter == a %}selected{% endif %}>{{ a }}</option>
      {% endfor %}
    </select>
  </form>
</div>

<div class="border border-cortex-border bg-cortex-panel rounded-md">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left text-[10px] text-cortex-muted uppercase tracking-wider border-b border-cortex-border">
        <th class="px-4 py-2">Time</th>
        <th class="px-4 py-2">Action</th>
        <th class="px-4 py-2">Actor</th>
        <th class="px-4 py-2">Detail</th>
      </tr>
    </thead>
    <tbody>
      {% for row in logs %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2">
        <td class="px-4 py-2 text-xs text-chrome-dim whitespace-nowrap">{{ row.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
        <td class="px-4 py-2">
          <span class="text-[10px] px-2 py-0.5 rounded uppercase
            {% if 'delete' in row.action or 'failed' in row.action %}bg-accent-red/15 text-accent-red border border-accent-red/30
            {% elif 'create' in row.action or 'success' in row.action or 'generated' in row.action %}bg-accent-green/15 text-accent-green border border-accent-green/30
            {% elif 'update' in row.action %}bg-accent-orange/15 text-accent-orange border border-accent-orange/30
            {% else %}bg-accent-blue/15 text-accent-blue border border-accent-blue/30{% endif %}">
            {{ row.action }}
          </span>
        </td>
        <td class="px-4 py-2 text-xs text-chrome">{{ row.user.full_name if row.user else 'system' }}</td>
        <td class="px-4 py-2 text-[10px] font-mono text-chrome-dim">{{ row.detail | tojson if row.detail else '—' }}</td>
      </tr>
      {% else %}
      <tr><td colspan="4" class="px-4 py-6 text-center text-cortex-muted text-xs">No activity recorded yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  {% if pages > 1 %}
  <div class="flex items-center justify-between px-4 py-3 border-t border-cortex-border text-xs">
    <a href="/admin/audit?page={{ page - 1 }}{% if action_filter %}&action={{ action_filter }}{% endif %}"
       class="{% if page <= 1 %}text-cortex-muted pointer-events-none{% else %}text-accent-blue hover:underline{% endif %}">&larr; Prev</a>
    <span class="text-cortex-muted">Page {{ page }} of {{ pages }}</span>
    <a href="/admin/audit?page={{ page + 1 }}{% if action_filter %}&action={{ action_filter }}{% endif %}"
       class="{% if page >= pages %}text-cortex-muted pointer-events-none{% else %}text-accent-blue hover:underline{% endif %}">Next &rarr;</a>
  </div>
  {% endif %}
</div>
{% endblock %}