{% extends "base.html" %}

{% block title %}Audit Log — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-white">Audit Log</h1>
    <p class="mt-1 text-sm text-slate-400">Who changed what, when. Covers config changes and auth events.</p>
</div>

<div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
    <div class="overflow-x-auto scrollbar-thin">
        <table class="min-w-full divide-y divide-slate-800">
            <thead class="bg-slate-800/50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Time</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">User</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Action</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">Target</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">From</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-300 uppercase">To</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800 text-sm">
                {% for entry in entries %}
                <tr class="hover:bg-slate-800/30">
                    <td class="px-4 py-3 text-slate-400 font-mono text-xs whitespace-nowrap">
                        {{ entry.timestamp.strftime('%m-%d %H:%M:%S') if entry.timestamp else '—' }}
                    </td>
                    <td class="px-4 py-3 text-white font-medium">{{ entry.username }}</td>
                    <td class="px-4 py-3">
                        {% set action_color = {
                            'config.set': 'bg-indigo-900/50 text-indigo-300 border-indigo-800',
                            'config.reset': 'bg-amber-900/50 text-amber-300 border-amber-800',
                            'config.delete': 'bg-rose-900/50 text-rose-300 border-rose-800',
                        } %}
                        <span class="inline-flex px-2 py-0.5 text-xs rounded-full border {{ action_color.get(entry.action, 'bg-slate-800 text-slate-300 border-slate-700') }}">
                            {{ entry.action }}
                        </span>
                    </td>
                    <td class="px-4 py-3 font-mono text-xs text-slate-300">{{ entry.target or '—' }}</td>
                    <td class="px-4 py-3 font-mono text-xs text-slate-500">{{ entry.old_value|tojson if entry.old_value is not none else '—' }}</td>
                    <td class="px-4 py-3 font-mono text-xs text-slate-300">{{ entry.new_value|tojson if entry.new_value is not none else '—' }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-12 text-center text-slate-500">No audit entries yet.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}