{% comment %}
Live event feed — the most recent honeypot hits, newest on top.

Connection: the HTMX WebSocket extension (hx-ext="ws") owns the socket to
/ws/events/ — connect, keepalive and auto-reconnect for free. The events
consumer (apps/events/consumers.py) sends JSON, not HTML, because the live map
shares this same socket and needs structured lat/lon. So instead of letting htmx
swap raw HTML, event_table.js listens for htmx's `htmx:wsAfterMessage`, parses
the JSON row, clones the <template> below, fills it, and prepends it — capping
the table at data-max-rows so the DOM never grows without bound.

Row markup lives here (in the template) so re-skinning never touches JS; the
island only reads values into the data-cell="..." slots.
{% endcomment %}
<section
  class="flex h-80 shrink-0 flex-col overflow-hidden rounded-lg border border-slate-800 bg-slate-900"
  hx-ext="ws"
  ws-connect="/ws/events/"
  data-rows-target="#event-rows"
  data-max-rows="50"
>
  <header class="flex shrink-0 items-center gap-2 border-b border-slate-800 px-4 py-2">
    <span class="inline-block h-2 w-2 animate-pulse rounded-full bg-emerald-500"></span>
    <h2 class="text-xs font-semibold uppercase tracking-wider text-slate-300">Live events</h2>
  </header>

  {% comment %}
  min-h-0 + flex-1 lets this region take the leftover height of the fixed-height
  section and scroll internally — without min-h-0 a flex child refuses to shrink
  below its content, so the scrollbar never appears and rows spill out of view.
  {% endcomment %}
  <div class="min-h-0 flex-1 overflow-y-auto">
    <table class="w-full text-left text-xs">
      <thead class="sticky top-0 bg-slate-900 text-[10px] uppercase tracking-wider text-slate-500">
        <tr class="border-b border-slate-800">
          <th class="px-4 py-2 font-medium">Time</th>
          <th class="px-4 py-2 font-medium">IP</th>
          <th class="px-4 py-2 font-medium">Country</th>
          <th class="px-4 py-2 font-medium">Decoy</th>
          <th class="px-4 py-2 font-medium">Threat</th>
          <th class="px-4 py-2 font-medium">Tags</th>
        </tr>
      </thead>
      {% comment %}
      Seeded server-side from DashboardView.recent_events (newest first) so a
      refresh isn't blank; event_table.js prepends live WS rows above these and
      trims the tail back to data-max-rows. Row markup here mirrors the
      <template> below — keep the two in sync if columns change.
      {% endcomment %}
      <tbody id="event-rows">
        {% for ev in recent_events %}
        <tr class="border-b border-slate-800/60 text-slate-200 transition-colors hover:bg-slate-800/40">
          <td class="whitespace-nowrap px-4 py-2 tabular-nums text-slate-400" data-cell="time" data-ts="{{ ev.timestamp|date:'c' }}">{{ ev.timestamp|date:"M j, H:i:s" }}</td>
          <td class="whitespace-nowrap px-4 py-2 font-mono text-slate-100">{{ ev.ip }}</td>
          <td class="whitespace-nowrap px-4 py-2">{{ ev.attacker.country|default:"—" }}</td>
          <td class="whitespace-nowrap px-4 py-2 text-slate-300">{{ ev.decoy_type }}</td>
          <td class="whitespace-nowrap px-4 py-2 font-semibold tabular-nums {% if ev.attacker.threat_score >= 70 %}text-red-400{% elif ev.attacker.threat_score >= 40 %}text-amber-400{% else %}text-slate-400{% endif %}">{{ ev.attacker.threat_score }}</td>
          <td class="px-4 py-2">
            {% for tag in ev.attacker.tags %}
            <span class="mr-1 inline-block rounded bg-slate-800 px-1.5 py-0.5 text-[10px] text-slate-300">{{ tag }}</span>
            {% empty %}<span class="text-slate-600">—</span>{% endfor %}
          </td>
        </tr>
        {% empty %}
        <tr id="event-empty">
          <td colspan="6" class="px-4 py-6 text-center text-slate-600">
            Waiting for live events&hellip;
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% comment %}
  Row blueprint cloned per incoming event. Every dynamic cell carries a
  data-cell="<field>" hook the island fills; static styling stays here.
  {% endcomment %}
  <template id="event-row-template">
    <tr class="border-b border-slate-800/60 text-slate-200 transition-colors hover:bg-slate-800/40">
      <td class="whitespace-nowrap px-4 py-2 tabular-nums text-slate-400" data-cell="time"></td>
      <td class="whitespace-nowrap px-4 py-2 font-mono text-slate-100" data-cell="ip"></td>
      <td class="whitespace-nowrap px-4 py-2" data-cell="country"></td>
      <td class="whitespace-nowrap px-4 py-2 text-slate-300" data-cell="decoy_type"></td>
      <td class="whitespace-nowrap px-4 py-2 font-semibold tabular-nums" data-cell="threat_score"></td>
      <td class="px-4 py-2" data-cell="tags"></td>
    </tr>
  </template>
</section>