{% extends "layout.html" %}
{% block content %}

<section class="ui-shell">
<div class="space-y-5">

  <div class="flex items-start justify-between gap-4">
    <div>
      <p class="ui-eyebrow">Admin</p>
      <h1 class="ui-page-title mt-0">Audit Log</h1>
      <p class="ui-page-subtitle">Review security and activity events across the system.</p>
    </div>
  </div>

  {# Filter bar #}
  <form method="get" action="/admin/audit-log" class="flex flex-wrap items-end gap-3">
    <div>
      <label for="event_type" class="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1">Event Type</label>
      <select id="event_type" name="event_type"
              class="text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-500">
        <option value="">All types</option>
        {% for et in event_types %}
        <option value="{{ et }}" {% if et == selected_event_type %}selected{% endif %}>{{ et }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="user_id" class="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1">User</label>
      <select id="user_id" name="user_id"
              class="text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-500">
        <option value="">All users</option>
        {% for u in all_users %}
        <option value="{{ u.id }}" {% if u.id == selected_user_id %}selected{% endif %}>{{ u.display_name }} ({{ u.email }})</option>
        {% endfor %}
      </select>
    </div>
    <button type="submit" class="ui-btn-primary text-sm px-4 py-2">Filter</button>
    {% if selected_event_type or selected_user_id %}
    <a href="/admin/audit-log" class="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors py-2">Clear filters</a>
    {% endif %}
  </form>

  {# Events table #}
  {% if events and events | length > 0 %}
  <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-slate-200 dark:border-slate-800 text-left text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider">
          <th class="py-2.5 px-4">Date</th>
          <th class="py-2.5 px-4">User</th>
          <th class="py-2.5 px-4">Event Type</th>
          <th class="py-2.5 px-4">Outcome</th>
          <th class="py-2.5 px-4">Target</th>
          <th class="py-2.5 px-4">Details</th>
        </tr>
      </thead>
      <tbody class="text-slate-700 dark:text-slate-300">
        {% for event in events %}
        <tr class="{% if not loop.last %}border-b border-slate-100 dark:border-slate-800/50{% endif %} hover:bg-white dark:hover:bg-slate-950/40 transition-colors">
          <td class="py-3 px-4 text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
            {{ event.event_at.strftime('%d %b %Y %H:%M') if event.event_at else '---' }}
          </td>
          <td class="py-3 px-4 whitespace-nowrap">
            {% if event.user %}
              <span class="font-medium">{{ event.user.display_name }}</span>
            {% else %}
              <span class="text-slate-400 dark:text-slate-500">System</span>
            {% endif %}
          </td>
          <td class="py-3 px-4">
            <span class="ui-pill ui-pill-neutral">{{ event.event_type }}</span>
          </td>
          <td class="py-3 px-4">
            {% if event.outcome == 'success' %}
              <span class="ui-pill ui-pill-success">Success</span>
            {% elif event.outcome == 'failure' %}
              <span class="ui-pill ui-pill-danger">Failure</span>
            {% else %}
              <span class="ui-pill ui-pill-neutral">{{ event.outcome }}</span>
            {% endif %}
          </td>
          <td class="py-3 px-4 text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
            {% if event.target_entity_type %}
              {{ event.target_entity_type }}{% if event.target_entity_id %}: {{ event.target_entity_id[:8] }}...{% endif %}
            {% else %}
              ---
            {% endif %}
          </td>
          <td class="py-3 px-4 text-xs text-slate-500 dark:text-slate-400 max-w-xs truncate" title="{{ event.details | string if event.details else '' }}">
            {% if event.details %}
              {{ event.details | string | truncate(80) }}
            {% else %}
              ---
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    {# Pagination #}
    {% set base_url = "/admin/audit-log?event_type=" ~ selected_event_type ~ "&user_id=" ~ selected_user_id %}
    {% include "components/pagination.html" %}
  </div>

  {% else %}
  <div class="ui-pane p-6 text-center">
    <p class="text-sm text-slate-500 dark:text-slate-400">No audit events found.</p>
  </div>
  {% endif %}

</div>
</section>
{% endblock %}