{% extends "base.html" %}

{% macro event_icon(name) -%}
<svg viewBox="0 0 16 16" aria-hidden="true">
  {% if name == 'key' %}
  <circle cx="5.4" cy="5.5" r="2.4" fill="none" stroke="currentColor" stroke-width="1.2"/>
  <path d="m7.2 7.3 5.3 5.3M10 10.1l1.2-1.2M11.4 11.5l1.1-1.1" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
  {% elif name == 'alert' %}
  <path d="M8 2.2 14 13H2L8 2.2Z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
  <path d="M8 6v3.2M8 11.3v.2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
  {% elif name == 'shield' %}
  <path d="M8 1.9 13 3.7v3.8c0 3.2-2 5.7-5 6.7-3-1-5-3.5-5-6.7V3.7L8 1.9Z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
  {% elif name == 'arrow' %}
  <path d="M6.2 3.5H3.4v9h2.8M7.4 10.5 10 8 7.4 5.5M9.9 8H5.3" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
  {% elif name == 'spark' %}
  <path d="M8 1.8 9.5 6l4.3 1.5-4.3 1.5L8 13.3 6.5 9 2.2 7.5 6.5 6 8 1.8Z" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
  {% elif name == 'file' %}
  <path d="M4 1.8h5l3 3v9.4H4V1.8Z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
  <path d="M9 2v3.2h3M6 8h4M6 10.3h4" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
  {% elif name == 'grid' %}
  <rect x="2.3" y="2.3" width="4.7" height="4.7" rx="1" fill="none" stroke="currentColor" stroke-width="1.1"/>
  <rect x="9" y="2.3" width="4.7" height="4.7" rx="1" fill="none" stroke="currentColor" stroke-width="1.1"/>
  <rect x="2.3" y="9" width="4.7" height="4.7" rx="1" fill="none" stroke="currentColor" stroke-width="1.1"/>
  <rect x="9" y="9" width="4.7" height="4.7" rx="1" fill="none" stroke="currentColor" stroke-width="1.1"/>
  {% elif name == 'mesh' %}
  <circle cx="8" cy="3" r="1.7" fill="none" stroke="currentColor" stroke-width="1.1"/>
  <circle cx="3" cy="12" r="1.7" fill="none" stroke="currentColor" stroke-width="1.1"/>
  <circle cx="13" cy="12" r="1.7" fill="none" stroke="currentColor" stroke-width="1.1"/>
  <path d="m7.2 4.5-3.4 6M8.8 4.5l3.4 6M4.7 12h6.6" fill="none" stroke="currentColor" stroke-width="1.1"/>
  {% else %}
  <circle cx="8" cy="8" r="2.2" fill="currentColor"/>
  {% endif %}
</svg>
{%- endmacro %}

{% block content %}
<section class="page-heading">
  <div>
    <p class="eyebrow">Activity</p>
    <h1>The quiet log.</h1>
    <p class="subhead">Every claim, sign-in, configuration change, and mesh action, newest first. Nothing leaves this server.</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-secondary" id="activity-refresh" type="button">
      <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.4 8.3A6.6 6.6 0 0 0 4.1 6.1L2.6 7.6M3.6 11.7a6.6 6.6 0 0 0 12.3 2.2l1.5-1.5M2.6 3.8v3.8h3.8M17.4 16.2v-3.8h-3.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span>Refresh</span>
    </button>
  </div>
</section>

<div class="page-grid">
  <section class="card" aria-labelledby="activity-title">
    <div class="card-head">
      <h2 id="activity-title">Event stream</h2>
      <div class="card-head-tools">
        <label class="visually-hidden" for="activity-filter">Filter events</label>
        <input class="input filter-input" id="activity-filter" type="search" placeholder="Filter events…" autocomplete="off">
        <span class="aside">{{ count }} shown</span>
      </div>
    </div>
    <div class="activity-list" id="activity-list">
      {% for item in events %}
      <div class="activity-row" data-event-row>
        <span class="activity-mark {{ item.tone }}" aria-hidden="true">{{ event_icon(item.icon) }}</span>
        <div class="activity-main">
          <div class="activity-title">
            <strong>{{ item.label }}</strong>
            {% if item.event.detail %}<span class="muted"> · {{ item.event.detail }}</span>{% endif %}
          </div>
          <div class="activity-meta">
            {% if item.event.username %}{{ item.event.username }}{% else %}system{% endif %}
            {% if item.event.ip %} · {{ item.event.ip }}{% endif %}
            {% if item.event.user_agent %} · {{ item.event.user_agent|client }}{% endif %}
          </div>
        </div>
        <time class="activity-time" data-ts="{{ item.event.created_at }}" title="{{ item.event.created_at|absolute_time }}">{{ item.event.created_at|relative_time }}</time>
      </div>
      {% else %}
      <div class="empty-list">Nothing has happened yet. That's either very good or very new.</div>
      {% endfor %}
    </div>
    <div class="empty-list" id="activity-empty" hidden>No events match that filter.</div>
  </section>

  <aside class="stack">
    <div class="side-note">
      <h3>What gets recorded</h3>
      <p>Sign-in attempts, passkey changes, session revocations, configuration saves, service edits, and WireGuard actions.</p>
      <p>IP addresses and browser user agents are stored with each event so you can tell your own devices apart.</p>
    </div>
    <div class="side-note">
      <h3>Retention</h3>
      <p>The newest 150 events are shown here. Older rows remain in the SQLite database until you prune them yourself.</p>
      <p>Warden never sends telemetry. This log is the whole story.</p>
    </div>
  </aside>
</div>
{% endblock %}