{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/audit.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Audit Log</h2>
    <span class="admin-count">{{ pagination.total }} events</span>
</div>

<form method="get" action="/admin/audit-log" class="audit-filter-bar" role="search" aria-label="Filter audit log">
    <div class="audit-filter-field">
        <label for="audit-q">Search</label>
        <input type="text" id="audit-q" name="q" value="{{ filters.get('q', '') }}" placeholder="summary, key, target">
    </div>
    <div class="audit-filter-field">
        <label for="audit-category">Category</label>
        <select id="audit-category" name="category">
            <option value="">All</option>
            {% for value in options.get('category', []) %}
            <option value="{{ value }}" {% if filters.get('category') == value %}selected{% endif %}>{{ value }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="audit-filter-field">
        <label for="audit-event">Event</label>
        <select id="audit-event" name="event_key">
            <option value="">All</option>
            {% for value in options.get('event_key', []) %}
            <option value="{{ value }}" {% if filters.get('event_key') == value %}selected{% endif %}>{{ value }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="audit-filter-field">
        <label for="audit-role">Role</label>
        <select id="audit-role" name="actor_role">
            <option value="">All</option>
            {% for value in options.get('actor_role', []) %}
            <option value="{{ value }}" {% if filters.get('actor_role') == value %}selected{% endif %}>{{ value }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="audit-filter-field">
        <label for="audit-origin">Origin</label>
        <select id="audit-origin" name="origin">
            <option value="">All</option>
            {% for value in options.get('origin', []) %}
            <option value="{{ value }}" {% if filters.get('origin') == value %}selected{% endif %}>{{ value }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="audit-filter-field">
        <label for="audit-result">Result</label>
        <select id="audit-result" name="result">
            <option value="">All</option>
            {% for value in options.get('result', []) %}
            <option value="{{ value }}" {% if filters.get('result') == value %}selected{% endif %}>{{ value }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="audit-filter-field">
        <label for="audit-from">From</label>
        <input type="date" id="audit-from" name="date_from" value="{{ filters.get('date_from', '') }}">
    </div>
    <div class="audit-filter-field">
        <label for="audit-to">To</label>
        <input type="date" id="audit-to" name="date_to" value="{{ filters.get('date_to', '') }}">
    </div>
    <div class="audit-filter-actions">
        <button type="submit" class="admin-btn admin-btn-sm"><span class="icon">&#x1F50D;</span> Filter</button>
        <a href="/admin/audit-log" class="admin-btn admin-btn-sm">Clear</a>
    </div>
</form>

<div class="admin-table-wrap">
    <table class="admin-table">
        <caption class="sr-only">Audit log events matching the current filters</caption>
        <thead>
            <tr>
                <th scope="col">Time</th>
                <th scope="col">Event</th>
                <th scope="col">Actor</th>
                <th scope="col">Role</th>
                <th scope="col">Origin</th>
                <th scope="col">Target</th>
                <th scope="col">Result</th>
                <th scope="col"><span class="sr-only">Details</span></th>
            </tr>
        </thead>
        <tbody>
            {% for e in entries %}
            <tr>
                <td title="{{ format_date(e['created_at'], include_time=True) }}">{{ dt_ago(e.created_at) if e.created_at else e.get('time_ago', '') }}</td>
                <td><span class="audit-badge">{{ e['event_key'] }}</span></td>
                <td>
                    {% if e.get('actor_user') %}
                        {% set _user = e['actor_user'] %}{% include "_user_link.html" %}
                    {% elif e.get('actor_ip') %}
                        <span class="audit-actor-ip">{{ e['actor_ip'] }}</span>
                    {% else %}
                        <span class="admin-text-muted">{{ e.get('actor_kind', 'system') }}</span>
                    {% endif %}
                </td>
                <td><span class="audit-badge">{{ e.get('actor_role', '') }}</span></td>
                <td>
                    <span class="audit-badge audit-badge-origin">{{ e.get('origin', '') }}</span>
                    {% if e.get('via_agent') %}<span class="audit-badge audit-badge-devii">devii</span>{% endif %}
                </td>
                <td>{{ e.get('target_label') or e.get('target_uid') or '' }}</td>
                <td><span class="audit-result audit-result-{{ e.get('result', 'success') }}">{{ e.get('result', 'success') }}</span></td>
                <td><a href="/admin/audit-log/{{ e['uid'] }}" class="admin-btn admin-btn-sm" aria-label="View details for {{ e['event_key'] }}">View</a></td>
            </tr>
            {% else %}
            <tr><td colspan="8" class="admin-text-muted">No audit events match the current filters.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% include "_pagination.html" %}
{% endblock %}
