{% extends "base.html" %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-white">Dashboard</h1>
    <p class="text-gray-400 mt-2">Manage scopes, rules and monitor agent activity.</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
    <!-- Scopes section -->
    <div class="bg-gray-800 rounded-lg shadow border border-gray-700 p-6">
        <h2 class="text-xl font-semibold text-nyora mb-4">Rule Scopes</h2>
        <ul class="divide-y divide-gray-700">
            {% for scope in rules.keys() %}
            <li class="py-4 flex items-center justify-between">
                <div class="flex items-center">
                    <span class="text-white font-medium text-lg uppercase">{{ scope }}</span>
                </div>
                <a href="/editor/{{ scope }}" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-md transition">Edit Rules</a>
            </li>
            {% endfor %}
            {% if not rules %}
            <li class="py-4 text-gray-500 italic">No scopes available.</li>
            {% endif %}
        </ul>
    </div>

    <!-- Quick Stats or Audit snippet -->
    <div class="bg-gray-800 rounded-lg shadow border border-gray-700 p-6">
        <h2 class="text-xl font-semibold text-nyora mb-4">Recent Activity</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-700">
                <thead>
                    <tr>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Agent</th>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Scope</th>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Time</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-700">
                    {% for log in logs[:10] %}
                    <tr>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-300">{{ log.agent_name }}</td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-700 text-gray-300">
                                {{ log.scope }}
                            </span>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">{{ log.timestamp }}</td>
                    </tr>
                    {% endfor %}
                    {% if not logs %}
                    <tr><td colspan="3" class="px-3 py-4 text-gray-500 text-center text-sm italic">No recent activity</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        <div class="mt-4 text-right">
            <a href="/audit" class="text-nyora hover:text-yellow-400 text-sm font-medium">View all logs &rarr;</a>
        </div>
    </div>
</div>
{% endblock %}