{% extends "base.html" %}
{% block title %}Audit log{% endblock %}
{% block content %}
  <div class="flex items-end justify-between">
    <div>
      <h1 class="text-2xl font-semibold">Audit log</h1>
      <p class="mt-1 text-sm text-slate-600">Every memory operation, filterable + exportable.</p>
    </div>
    <div class="flex gap-2 text-xs">
      <a class="rounded border border-slate-300 bg-white px-2 py-1 hover:bg-slate-100"
         href="/audit/export?format=json">Export JSON</a>
      <a class="rounded border border-slate-300 bg-white px-2 py-1 hover:bg-slate-100"
         href="/audit/export?format=csv">Export CSV</a>
    </div>
  </div>

  <form class="mt-4 grid grid-cols-1 gap-2 md:grid-cols-5"
        hx-get="/audit" hx-target="#audit-table" hx-trigger="change, keyup changed delay:400ms from:input">
    <input class="rounded border border-slate-300 px-2 py-1 text-sm" name="operation"
           placeholder="operation" value="{{ filters.operation or '' }}" />
    <input class="rounded border border-slate-300 px-2 py-1 text-sm" name="agent_id"
           placeholder="agent_id" value="{{ filters.agent_id or '' }}" />
    <input class="rounded border border-slate-300 px-2 py-1 text-sm" name="user_id"
           placeholder="user_id" value="{{ filters.user_id or '' }}" />
    <input class="rounded border border-slate-300 px-2 py-1 text-sm" name="since_ms"
           placeholder="since (ms)" value="{{ filters.since_ms or '' }}" />
    <input class="rounded border border-slate-300 px-2 py-1 text-sm" name="until_ms"
           placeholder="until (ms)" value="{{ filters.until_ms or '' }}" />
  </form>

  <div class="mt-4">
    {% include "_partials/audit_table.html" %}
  </div>
{% endblock %}