{% extends "base.html" %}
{% block title %}Audit Log{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-serif font-bold text-white flex items-center gap-3">
            <span class="text-gold-400">&#128220;</span> Audit Log
        </h1>
        <form class="flex gap-2">
            <input type="text" name="q" value="{{ q }}" placeholder="Search actions..." class="bg-black/30 border border-white/10 rounded-xl px-4 py-2 text-white text-sm placeholder-slate-600">
            <button type="submit" class="bg-white/10 text-white px-4 py-2 rounded-xl text-sm">Search</button>
        </form>
    </div>

    <div class="glass rounded-2xl overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-black/30">
                <tr>
                    <th class="text-left p-4 text-slate-400 text-xs font-mono uppercase">Action</th>
                    <th class="text-left p-4 text-slate-400 text-xs font-mono uppercase">User</th>
                    <th class="text-left p-4 text-slate-400 text-xs font-mono uppercase">Resource</th>
                    <th class="text-left p-4 text-slate-400 text-xs font-mono uppercase">IP</th>
                    <th class="text-left p-4 text-slate-400 text-xs font-mono uppercase">Time</th>
                </tr>
            </thead>
            <tbody>
                {% for log in pagination.items %}
                <tr class="border-t border-white/5">
                    <td class="p-4 text-white">{{ log.action }}</td>
                    <td class="p-4 text-slate-400">{{ log.user.name if log.user else 'System' }}</td>
                    <td class="p-4 text-slate-500 text-xs">{{ log.resource_type }}{% if log.resource_id %}#{{ log.resource_id }}{% endif %}</td>
                    <td class="p-4 text-slate-500 font-mono text-xs">{{ log.ip_address or '-' }}</td>
                    <td class="p-4 text-slate-500 text-xs">{{ log.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                </tr>
                {% else %}
                <tr><td colspan="5" class="p-8 text-center text-slate-500">No audit logs</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if pagination.pages > 1 %}
    <div class="flex justify-center gap-2 mt-6">
        {% for p in range(1, pagination.pages + 1) %}
        <a href="?page={{ p }}&q={{ q }}" class="px-3 py-1 rounded-lg text-sm {% if p == pagination.page %}bg-gold-500 text-black{% else %}bg-white/5 text-slate-400{% endif %}">{{ p }}</a>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}