{% extends "base.html" %}
{% block title %}Audit Log — ComplyForm Dashboard{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-6">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-xl font-semibold" style="color: var(--text-primary);">Audit Log</h1>
    <a href="/dashboard/audit-log/export-csv?{{ 'event=' + event_filter if event_filter else '' }}&{{ 'actor=' + actor_filter if actor_filter else '' }}&{{ 'start_date=' + start_date if start_date else '' }}&{{ 'end_date=' + end_date if end_date else '' }}"
       class="text-sm px-3 py-1.5 rounded"
       style="background: var(--bg-surface-hover); color: var(--text-secondary); border: 1px solid var(--border-default);">
      Download CSV
    </a>
  </div>

  <section class="mb-6 p-4 rounded-lg flex flex-wrap gap-3 items-end"
           style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <div>
      <label class="block text-xs mb-1" style="color: var(--text-secondary);">Event Type</label>
      <select name="event" hx-get="/dashboard/partials/audit-log"
              hx-target="#audit-events" hx-swap="outerHTML"
              hx-include="[name='actor'],[name='start_date'],[name='end_date']"
              class="px-3 py-1.5 rounded text-sm"
              style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
        <option value="">All Events</option>
        {% for et in event_types %}
        <option value="{{ et }}" {% if event_filter == et %}selected{% endif %}>{{ et }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="block text-xs mb-1" style="color: var(--text-secondary);">Actor</label>
      <select name="actor" hx-get="/dashboard/partials/audit-log"
              hx-target="#audit-events" hx-swap="outerHTML"
              hx-include="[name='event'],[name='start_date'],[name='end_date']"
              class="px-3 py-1.5 rounded text-sm"
              style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
        <option value="">All Actors</option>
        {% for a in actors %}
        <option value="{{ a }}" {% if actor_filter == a %}selected{% endif %}>{{ a }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="block text-xs mb-1" style="color: var(--text-secondary);">Start Date</label>
      <input type="date" name="start_date" value="{{ start_date or '' }}"
             hx-get="/dashboard/partials/audit-log"
             hx-target="#audit-events" hx-swap="outerHTML"
             hx-include="[name='event'],[name='actor'],[name='end_date']"
             class="px-3 py-1.5 rounded text-sm"
             style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color: var(--text-secondary);">End Date</label>
      <input type="date" name="end_date" value="{{ end_date or '' }}"
             hx-get="/dashboard/partials/audit-log"
             hx-target="#audit-events" hx-swap="outerHTML"
             hx-include="[name='event'],[name='actor'],[name='start_date']"
             class="px-3 py-1.5 rounded text-sm"
             style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
    </div>
  </section>

  <div id="audit-events">
    <section class="p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
      <table class="w-full text-sm">
        <thead>
          <tr style="color: var(--text-secondary); border-bottom: 1px solid var(--border-default);">
            <th class="text-left py-2">Timestamp</th>
            <th class="text-left py-2">Actor</th>
            <th class="text-left py-2">Event</th>
            <th class="text-left py-2">Details</th>
          </tr>
        </thead>
        <tbody>
          {% for e in page.events %}
          <tr style="border-bottom: 1px solid var(--border-default);">
            <td class="py-2" style="color: var(--text-secondary);">{{ e.timestamp[:19] }}</td>
            <td class="py-2" style="color: var(--text-primary);">{{ e.actor_email }}</td>
            <td class="py-2">
              <span class="px-2 py-0.5 rounded text-xs font-medium"
                    style="background: var(--bg-surface-hover); color: var(--text-secondary);">
                {{ e.event }}
              </span>
            </td>
            <td class="py-2 text-xs" style="color: var(--text-secondary);">
              {% for k, v in e.metadata.items() %}{{ k }}={{ v }}{% if not loop.last %}, {% endif %}{% endfor %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% if page.next_cursor %}
      <div class="mt-4 text-center">
        <button hx-get="/dashboard/partials/audit-log?cursor={{ page.next_cursor }}&event={{ event_filter or '' }}&actor={{ actor_filter or '' }}&start_date={{ start_date or '' }}&end_date={{ end_date or '' }}"
                hx-target="#audit-events" hx-swap="outerHTML"
                class="text-sm px-4 py-1.5 rounded"
                style="color: var(--accent); border: 1px solid var(--border-default);">
          Load More
        </button>
      </div>
      {% endif %}
    </section>
  </div>
</div>
{% endblock %}