{% extends "base.html" %}
{% block title %}Audit Log — Roundtable{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
  <h1 class="page-title" style="margin-bottom:0;">Audit Log</h1>
  <form method="get" style="display:flex;gap:0.5rem;align-items:center;">
    <input type="text" name="action" value="{{ action_filter }}"
           placeholder="Filter by action…"
           style="width:200px;font-size:0.85rem;">
    <button type="submit" class="btn btn-ghost btn-sm">Filter</button>
    {% if action_filter %}
    <a href="/audit/" class="btn btn-ghost btn-sm">Clear</a>
    {% endif %}
  </form>
</div>

{% if events %}
<div class="card-flush">
  <table class="table">
    <thead>
      <tr>
        <th style="min-width:160px;">Time (UTC)</th>
        <th>User</th>
        <th>Action</th>
        <th>Entity</th>
        <th>Detail</th>
      </tr>
    </thead>
    <tbody>
      {% for item in events %}
      {% set e = item.event %}
      {% set d = item.detail %}
      <tr>
        <td style="font-family:ui-monospace,monospace;font-size:0.8rem;white-space:nowrap;color:var(--text-muted);">
          {{ e.timestamp.strftime("%Y-%m-%d %H:%M:%S") }}
        </td>
        <td style="font-size:0.85rem;">{{ e.username }}</td>
        <td>
          {% set cat = e.action.split('.')[0] %}
          <span style="
            font-size:0.78rem;font-family:ui-monospace,monospace;
            padding:0.15rem 0.4rem;border-radius:3px;
            background:{% if cat == 'auth' %}var(--bg-elevated){% elif cat == 'plugin' %}var(--gold-dim){% elif cat == 'alert' %}var(--red-dim){% elif cat == 'host' %}var(--green-dim){% elif cat == 'settings' %}var(--bg-elevated){% else %}var(--bg-elevated){% endif %};
            color:{% if cat == 'auth' %}var(--accent){% elif cat == 'plugin' %}var(--gold){% elif cat == 'alert' %}var(--red){% elif cat == 'host' %}var(--green){% elif cat == 'settings' %}var(--text-muted){% else %}var(--text-muted){% endif %};">
            {{ e.action }}
          </span>
        </td>
        <td style="font-size:0.82rem;color:var(--text-muted);">
          {% if e.entity_type %}
          <span style="color:var(--text-dim);">{{ e.entity_type }}/</span>{{ e.entity_id or "" }}
          {% endif %}
        </td>
        <td style="font-size:0.8rem;color:var(--text-muted);max-width:340px;">
          {% if d %}
          {% for k, v in d.items() %}
          <span style="color:var(--text-dim);">{{ k }}:</span>
          <span style="font-family:ui-monospace,monospace;">{{ v }}</span>
          {% if not loop.last %} &nbsp;·&nbsp; {% endif %}
          {% endfor %}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<p style="font-size:0.78rem;color:var(--text-dim);margin-top:0.75rem;">
  Showing last {{ limit }} events.
  {% if events | length == limit %}
  <a href="?limit={{ limit * 2 }}{% if action_filter %}&action={{ action_filter }}{% endif %}">Load more</a>
  {% endif %}
</p>
{% else %}
<div class="card" style="text-align:center;padding:3rem;">
  <p style="color:var(--text-muted);">No audit events recorded yet.</p>
</div>
{% endif %}
{% endblock %}