{% extends "base.html" %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
    <div>
        <h1 class="text-3xl font-bold text-white">Audit Logs</h1>
        <p class="dark:text-gray-400 text-gray-500 mt-2">History of API and MCP accesses by agents.</p>
    </div>
    <a href="/dashboard" class="dark:text-gray-400 text-gray-500 hover:text-white">&larr; Back to Dashboard</a>
</div>

<div class="dark:bg-gray-800 bg-gray-100 rounded-lg shadow border dark:border-gray-700 border-gray-200 p-6">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-700">
            <thead>
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">Time</th>
                    <th class="px-4 py-3 text-left text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">Agent</th>
                    <th class="px-4 py-3 text-left text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">Scope / Action</th>
                    <th class="px-4 py-3 text-left text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">IP Address</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700">
                {% for log in logs %}
                <tr class="hover:bg-gray-750 transition">
                    <td class="px-4 py-4 whitespace-nowrap text-sm dark:text-gray-400 text-gray-500">{{ log.timestamp }}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-200">{{ log.agent_name }}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm">
                        {% if 'FORBIDDEN' in log.scope %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-200 border border-red-700">
                            {{ log.scope }}
                        </span>
                        {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-700 text-gray-300">
                            {{ log.scope }}
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-mono">{{ log.ip_address }}</td>
                </tr>
                {% endfor %}
                {% if not logs %}
                <tr><td colspan="4" class="px-4 py-6 text-gray-500 text-center text-sm italic">No logs available</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}