{% extends "base.html" %}

{% block title %}Activity Logs - Dango Dashboard{% endblock %}

{% block subtitle_attrs %}class="text-xs sm:text-sm text-gray-500 hidden sm:block"{% endblock %}

{% block header_right %}
<div class="flex items-center space-x-2 sm:space-x-4">
    <!-- Connection Status -->
    <div id="connection-status" class="flex items-center space-x-2">
        <div class="h-2 w-2 bg-gray-400 rounded-full animate-pulse" id="status-indicator"></div>
        <span class="text-xs sm:text-sm text-gray-600 hidden sm:inline" id="status-text">Connecting...</span>
    </div>
</div>
{% endblock %}

{% block content %}
    <div class="min-h-screen">

        <!-- Main Content -->
        <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- Filters -->
            <div class="bg-white rounded-lg shadow mb-6 p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Filters</h2>
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    <!-- Category Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                        <select id="filter-category" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                            <option value="core" selected>Core Events</option>
                            <option value="">All Events</option>
                            <option value="auxiliary">Auxiliary</option>
                        </select>
                    </div>

                    <!-- Log Level Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Log Level</label>
                        <select id="filter-level" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                            <option value="">All Levels</option>
                            <option value="info">Info</option>
                            <option value="success">Success</option>
                            <option value="warning">Warning</option>
                            <option value="error">Error</option>
                        </select>
                    </div>

                    <!-- Source Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Origin</label>
                        <select id="filter-source" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                            <option value="">All Origins</option>
                            <!-- Will be populated dynamically -->
                        </select>
                    </div>

                    <!-- Time Range -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Time Range</label>
                        <select id="filter-time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                            <option value="all">All Time</option>
                            <option value="1h">Last Hour</option>
                            <option value="24h">Last 24 Hours</option>
                            <option value="7d">Last 7 Days</option>
                            <option value="30d">Last 30 Days</option>
                        </select>
                    </div>

                    <!-- Search -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                        <input type="text" id="filter-search" placeholder="Search logs..."
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>

                <div class="mt-4 flex items-center justify-between">
                    <button onclick="clearFilters()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
                        Clear Filters
                    </button>
                    <div class="text-sm text-gray-600">
                        <span id="log-count">0</span> entries
                    </div>
                </div>
            </div>

            <!-- Logs Table -->
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                                    onclick="sortLogs('timestamp')">
                                    <div class="flex items-center space-x-1">
                                        <span>Timestamp</span>
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                                        </svg>
                                    </div>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                                    onclick="sortLogs('level')">
                                    <div class="flex items-center space-x-1">
                                        <span>Level</span>
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                                        </svg>
                                    </div>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Origin
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Message
                                </th>
                            </tr>
                        </thead>
                        <tbody id="logs-table-body" class="bg-white divide-y divide-gray-200">
                            <!-- Logs will be inserted here -->
                        </tbody>
                    </table>
                </div>

                <!-- Loading State -->
                <div id="logs-loading" class="hidden py-12 text-center">
                    <div class="inline-block spinner"></div>
                    <p class="mt-2 text-gray-600">Loading logs...</p>
                </div>

                <!-- Empty State -->
                <div id="logs-empty" class="hidden py-12 text-center text-gray-500">
                    <svg class="mx-auto w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <p class="mt-2">No logs found</p>
                    <p class="text-sm">Try adjusting your filters</p>
                </div>
            </div>

            <!-- Pagination -->
            <div class="mt-6 flex items-center justify-between">
                <div class="text-sm text-gray-600">
                    Showing <span id="showing-from">0</span> to <span id="showing-to">0</span> of <span id="total-logs">0</span>
                </div>
                <div class="flex items-center space-x-2">
                    <button onclick="previousPage()" id="prev-btn" disabled
                        class="px-4 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                        Previous
                    </button>
                    <span id="page-info" class="text-sm text-gray-600">Page 1</span>
                    <button onclick="nextPage()" id="next-btn" disabled
                        class="px-4 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                        Next
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- Toast Container -->
    <div id="toast-container" class="fixed bottom-4 right-4 space-y-2 z-50"></div>
{% endblock %}

{% block scripts %}
    <!-- JavaScript -->
    <script src="{{ static_url('js/logs.js') }}"></script>
{% endblock %}