<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aiosyslogd Log Viewer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .search-bar {
            box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
            border-radius: 24px;
        }
        .search-bar:hover {
            box-shadow: 0 2px 8px rgba(32, 33, 36, 0.35);
        }
    </style>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-800">

<div class="container mx-auto p-4 md:p-8">
    <header class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-700">aiosyslogd Log Viewer</h1>
        <p class="text-gray-500">SQLite Log Search Interface</p>
    </header>

    <!-- Search and Filter Form -->
    <form action="{{ url_for('index') }}" method="get" class="bg-white p-6 rounded-lg shadow-md mb-8">
        <!-- Database Selector -->
        <div class="mb-4">
            <label for="db_file" class="block text-sm font-medium text-gray-700 mb-1">Database File</label>
            <select name="db_file" id="db_file" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" onchange="this.form.submit()">
                {% for db in available_dbs %}
                    <option value="{{ db }}" {% if db == selected_db %}selected{% endif %}>{{ db }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Main Search Bar -->
        <div class="flex items-center space-x-2 mb-4">
            <div class="relative w-full">
                <input type="text" name="q" value="{{ search_query }}" placeholder="Enter FTS5 query for Message (e.g., 'error* OR failure')" class="w-full py-3 pl-4 pr-12 text-lg border-gray-300 search-bar focus:ring-indigo-500 focus:border-indigo-500">
                <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </button>
                </div>
            </div>
            <a href="{{ url_for('index', db_file=selected_db) }}" class="flex-shrink-0 inline-flex items-center justify-center h-[52px] w-[52px] border border-gray-300 rounded-full text-gray-500 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" title="Reset Search and Filters">
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </a>
        </div>

        <!-- Advanced Filters -->
        <div class="flex justify-between items-center mb-2">
             <h3 class="text-lg font-medium text-gray-800">Advanced Filters</h3>
             {% set toggle_sql_args = request.args.to_dict() %}
             {% if show_sql %}
                {% do toggle_sql_args.update({'show_sql': '0'}) %}
                <a href="{{ url_for('index', **toggle_sql_args) }}" class="text-sm text-indigo-600 hover:text-indigo-800">Hide Executed SQL</a>
             {% else %}
                {% do toggle_sql_args.update({'show_sql': '1'}) %}
                <a href="{{ url_for('index', **toggle_sql_args) }}" class="text-sm text-indigo-600 hover:text-indigo-800">Show Executed SQL</a>
             {% endif %}
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 border-t pt-4">
            <input type="hidden" name="last_id" value=""> <!-- Clear last_id when filters change -->
            <div>
                <label for="from_host" class="block text-sm font-medium text-gray-700">FromHost</label>
                <input type="text" name="from_host" id="from_host" value="{{ filters.from_host or '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
            </div>
            <div>
                <label for="received_at_min" class="block text-sm font-medium text-gray-700">Received At (Start)</label>
                <input type="datetime-local" name="received_at_min" id="received_at_min" value="{{ filters.received_at_min or '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
            </div>
            <div>
                <label for="received_at_max" class="block text-sm font-medium text-gray-700">Received At (End)</label>
                <input type="datetime-local" name="received_at_max" id="received_at_max" value="{{ filters.received_at_max or '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
            </div>
        </div>
    </form>

    <!-- Debug SQL Query -->
    {% if show_sql and debug_query %}
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-md mb-8">
        <h3 class="font-bold mb-2 text-gray-400 uppercase tracking-wider text-xs">Executed SQL Query</h3>
        <pre class="font-mono text-sm whitespace-pre-wrap"><code>{{ debug_query }}</code></pre>
    </div>
    {% endif %}

    <!-- Results Count -->
    {% if total_logs is not none %}
    <div class="mb-4 text-gray-600">
        Found <span class="font-bold">{{ "{:,}".format(total_logs) }}</span> matching logs
        {% if query_time is not none %}
         in <span class="font-bold">{{ "%.3f"|format(query_time) }}s</span>.
        {% endif %}
    </div>
    {% endif %}

    <!-- Results -->
    {% if error %}
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative" role="alert">
            <strong class="font-bold">Query Error:</strong>
            <span class="block sm:inline">{{ error }}</span>
        </div>
    {% elif logs %}
        <div class="bg-white shadow-md rounded-lg overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Received At</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From Host</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Message</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for log in logs %}
                    <tr>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.ID }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.ReceivedAt.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{{ log.FromHost }}</td>
                        <td class="px-4 py-4 text-sm text-gray-900 break-all">{{ log.Message }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="text-center py-12 bg-white rounded-lg shadow-md">
            <p class="text-gray-500">No logs found. Try adjusting your search.</p>
        </div>
    {% endif %}

    <!-- Pagination -->
    <div class="flex justify-between items-center mt-6">
        <div>
           {% if logs and page_info.prev_last_id %}
             {% set prev_args = request.args.to_dict() %}
             {% do prev_args.update({'last_id': page_info.prev_last_id, 'direction': 'prev'}) %}
             <a href="{{ url_for('index', **prev_args) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Previous
            </a>
            {% endif %}
        </div>
        <div>
            {% if page_info.has_next_page %}
            {% set next_args = request.args.to_dict() %}
            {% do next_args.update({'last_id': page_info.next_last_id}) %}
            <a href="{{ url_for('index', **next_args) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </div>
    </div>
</div>

</body>
</html>
