{% extends "base.html" %}
{% block title %}{{ title }} · neuralgentics-web{% endblock %}
{% block content %}
<section class="space-y-6">
  <div class="flex items-start justify-between">
    <div>
      <h1 class="text-2xl font-bold">{{ title }}</h1>
      <p class="text-sm text-slate-600 mt-1">
        Live view of HTTP requests through the egress gateway ·
        <span id="event-count">{{ events|length }}</span> event{{ '' if events|length == 1 else 's' }}
      </p>
    </div>
    <a href="/api/v1/gateway-audit/recent" class="text-xs text-blue-600 underline">/api/v1/gateway-audit/recent</a>
  </div>

  <nav class="text-sm flex gap-3">
    <a href="/modules/gateway-audit" class="text-slate-900 font-semibold">Table</a>
    <span class="text-slate-300">·</span>
    <a href="/modules/gateway-audit/charts" class="text-blue-600 underline">Charts</a>
  </nav>

  <!-- htmx-sse extension for live updates -->
  <div hx-ext="sse" sse-connect="/modules/gateway-audit/sse">
    <!-- Filter form -->
    <form method="get" action="/modules/gateway-audit" class="bg-white border border-slate-200 rounded-lg p-4 grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
      <div>
        <label class="block text-xs text-slate-600 mb-1">Domain</label>
        <input type="text" name="domain" value="{{ filters.domain }}"
               class="w-full border border-slate-300 rounded px-2 py-1"
               placeholder="api.github.com">
      </div>
      <div>
        <label class="block text-xs text-slate-600 mb-1">Status</label>
        <input type="number" name="status" value="{{ filters.status }}"
               class="w-full border border-slate-300 rounded px-2 py-1"
               placeholder="200">
      </div>
      <div>
        <label class="block text-xs text-slate-600 mb-1">Since (UTC)</label>
        <input type="text" name="since" value="{{ filters.since }}"
               class="w-full border border-slate-300 rounded px-2 py-1"
               placeholder="2026-07-19T00:00:00Z">
      </div>
      <div>
        <label class="block text-xs text-slate-600 mb-1">Until (UTC)</label>
        <input type="text" name="until" value="{{ filters.until }}"
               class="w-full border border-slate-300 rounded px-2 py-1"
               placeholder="2026-07-19T23:59:59Z">
      </div>
      <div class="flex items-end">
        <button type="submit"
                class="bg-blue-600 text-white text-sm px-4 py-1 rounded hover:bg-blue-700">Filter</button>
      </div>
    </form>

    <!-- Audit table. Polling fallback every 5s if SSE drops. -->
    <div class="bg-white border border-slate-200 rounded-lg overflow-hidden mt-4"
         hx-get="/modules/gateway-audit?domain={{ filters.domain }}&status={{ filters.status }}&since={{ filters.since }}&until={{ filters.until }}"
         hx-trigger="every 5s"
         hx-target="#audit-tbody"
         hx-swap="innerHTML">
      <table class="w-full text-sm">
        <thead class="bg-slate-100 text-slate-700 text-xs uppercase">
          <tr>
            <th class="text-left px-3 py-2">Time</th>
            <th class="text-left px-3 py-2">Method</th>
            <th class="text-left px-3 py-2">Host</th>
            <th class="text-left px-3 py-2">URI</th>
            <th class="text-left px-3 py-2">Decision</th>
            <th class="text-left px-3 py-2">Reason</th>
            <th class="text-left px-3 py-2">Client IP</th>
          </tr>
        </thead>
        <tbody id="audit-tbody"
               sse-swap="audit"
               hx-swap="beforeend">
          {% for e in events %}
          <tr class="border-t border-slate-100">
            <td class="px-3 py-2 font-mono text-xs">{{ e.timestamp.astimezone().strftime("%Y-%m-%d %H:%M:%S") }}</td>
            <td class="px-3 py-2 font-mono">{{ e.method }}</td>
            <td class="px-3 py-2 font-mono">{{ e.host }}</td>
            <td class="px-3 py-2 font-mono text-xs truncate max-w-xs" title="{{ e.uri }}">{{ e.uri }}</td>
            <td class="px-3 py-2">
              {% if e.decision == "allowed" %}
              <span class="text-xs px-2 py-0.5 rounded bg-green-100 text-green-800">{{ e.decision }}</span>
              {% else %}
              <span class="text-xs px-2 py-0.5 rounded bg-red-100 text-red-800">{{ e.decision }}</span>
              {% endif %}
            </td>
            <td class="px-3 py-2 text-xs text-slate-600">{{ e.reason }}</td>
            <td class="px-3 py-2 font-mono text-xs">{{ e.client_ip }}</td>
          </tr>
          {% else %}
          <tr><td colspan="7" class="px-3 py-8 text-center text-slate-400">No audit events yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <p class="text-xs text-slate-500 mt-2">
      SSE stream at <code class="font-mono">/modules/gateway-audit/sse</code> ·
      polling fallback every 5s if the stream drops.
    </p>
  </div>
</section>
{% endblock %}