{% extends "base.html" %}

{% block title %}Tusk Admin{% endblock %}

{% block styles %}
<style>/* Styles in /static/styles.css */</style>
{% endblock %}

{% block content %}
<!-- Sidebar -->
<aside class="sidebar w-64 flex flex-col">
    <!-- Servers/Connections -->
    <div class="p-3 border-b border-[#30363d]">
        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wide">PostgreSQL Servers</span>
        <div id="servers-list" class="mt-2 space-y-1">
            <div class="text-gray-500 text-sm py-2">Loading...</div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="p-3">
        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Actions</span>
        <div class="mt-2 space-y-2">
            <button onclick="createBackup()" id="backup-btn" disabled
                    class="w-full text-left px-3 py-2 rounded-lg bg-[#21262d] hover:bg-[#30363d] disabled:opacity-50 disabled:cursor-not-allowed text-sm flex items-center gap-2">
                <span>💾</span> Create Backup
            </button>
            <button onclick="showBackups()" id="backups-btn" disabled
                    class="w-full text-left px-3 py-2 rounded-lg bg-[#21262d] hover:bg-[#30363d] disabled:opacity-50 disabled:cursor-not-allowed text-sm flex items-center gap-2">
                <span>📦</span> View Backups
            </button>
        </div>
    </div>
</aside>

<!-- Main Content -->
<main class="flex-1 overflow-auto p-6">
    <div id="no-server" class="flex items-center justify-center h-full text-gray-500">
        <div class="text-center">
            <div class="text-4xl mb-4">🐘</div>
            <div>Select a PostgreSQL server from the sidebar</div>
            <div class="text-sm mt-2">SQLite connections don't have admin features</div>
        </div>
    </div>

    <div id="admin-content" class="hidden">
        <!-- Server Info -->
        <div class="mb-6 flex items-center justify-between">
            <div>
                <h2 id="server-name" class="text-xl font-bold">Server</h2>
                <p id="server-version" class="text-sm text-gray-400 mt-1"></p>
            </div>
            <div class="flex items-center gap-2">
                <label class="text-sm text-gray-400">Auto-refresh:</label>
                <select id="refresh-interval" onchange="setRefreshInterval()" class="bg-[#0d1117] border border-[#30363d] rounded px-3 py-1.5 text-sm">
                    <option value="0">Off</option>
                    <option value="5000" selected>5s</option>
                    <option value="10000">10s</option>
                    <option value="30000">30s</option>
                    <option value="60000">60s</option>
                </select>
                <button onclick="refreshAll()" class="px-3 py-1.5 bg-[#21262d] hover:bg-[#30363d] rounded text-sm flex items-center gap-1.5">
                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                    Refresh Now
                </button>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-4 gap-4 mb-6">
            <div class="stat-card rounded-xl p-4 border border-[#30363d]">
                <div class="text-gray-400 text-sm mb-1">Connections</div>
                <div class="text-2xl font-bold" id="stat-connections">-</div>
                <div class="mt-2 h-1.5 bg-[#30363d] rounded-full overflow-hidden">
                    <div id="conn-bar" class="h-full bg-blue-500 transition-all" style="width: 0%"></div>
                </div>
            </div>
            <div class="stat-card rounded-xl p-4 border border-[#30363d]">
                <div class="text-gray-400 text-sm mb-1">Active Queries</div>
                <div class="text-2xl font-bold" id="stat-active">-</div>
                <div class="mt-2 text-xs text-gray-500">currently running</div>
            </div>
            <div class="stat-card rounded-xl p-4 border border-[#30363d]">
                <div class="text-gray-400 text-sm mb-1">Cache Hit Ratio</div>
                <div class="text-2xl font-bold" id="stat-cache">-</div>
                <div class="mt-2 h-1.5 bg-[#30363d] rounded-full overflow-hidden">
                    <div id="cache-bar" class="h-full bg-green-500 transition-all" style="width: 0%"></div>
                </div>
            </div>
            <div class="stat-card rounded-xl p-4 border border-[#30363d]">
                <div class="text-gray-400 text-sm mb-1">Database Size</div>
                <div class="text-2xl font-bold" id="stat-size">-</div>
                <div class="mt-2 text-xs text-gray-500" id="stat-uptime">-</div>
            </div>
        </div>

        <!-- Active Queries -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium">Active Processes</h3>
                <button onclick="refreshProcesses()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
            </div>
            <div id="processes-list" class="divide-y divide-[#30363d]">
                <div class="p-4 text-gray-500">Loading...</div>
            </div>
        </div>

        <!-- Locks Monitor -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>🔒</span> Lock Monitor
                </h3>
                <div class="flex items-center gap-2">
                    <label class="flex items-center gap-2 text-sm text-gray-400">
                        <input type="checkbox" id="show-all-locks" onchange="refreshLocks()" class="accent-indigo-500">
                        Show all locks
                    </label>
                    <button onclick="refreshLocks()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div id="locks-list" class="divide-y divide-[#30363d]">
                <div class="p-4 text-gray-500">Loading...</div>
            </div>
        </div>

        <!-- Table Maintenance -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>🧹</span> Table Maintenance
                </h3>
                <button onclick="refreshTableBloat()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-[#21262d] text-gray-400 text-left">
                        <tr>
                            <th class="px-4 py-2 font-medium">Table</th>
                            <th class="px-4 py-2 font-medium">Size</th>
                            <th class="px-4 py-2 font-medium">Dead Tuples</th>
                            <th class="px-4 py-2 font-medium">Bloat %</th>
                            <th class="px-4 py-2 font-medium">Last Vacuum</th>
                            <th class="px-4 py-2 font-medium">Last Analyze</th>
                            <th class="px-4 py-2 font-medium text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="bloat-list" class="divide-y divide-[#30363d]">
                        <tr><td colspan="7" class="p-4 text-gray-500">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Extensions -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium">Extensions</h3>
                <div class="flex items-center gap-2">
                    <label class="flex items-center gap-2 text-sm text-gray-400">
                        <input type="checkbox" id="show-all-extensions" onchange="refreshExtensions()" class="accent-indigo-500">
                        Show available
                    </label>
                    <button onclick="refreshExtensions()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div id="extensions-list" class="divide-y divide-[#30363d]">
                <div class="p-4 text-gray-500">Loading...</div>
            </div>
        </div>

        <!-- Database Settings -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>⚙️</span> Database Settings
                </h3>
                <div class="flex items-center gap-2">
                    <label class="flex items-center gap-2 text-sm text-gray-400">
                        <input type="checkbox" id="show-all-settings" onchange="refreshSettings()" class="accent-indigo-500">
                        Show all
                    </label>
                    <button onclick="refreshSettings()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div class="overflow-x-auto max-h-96">
                <table class="w-full text-sm">
                    <thead class="bg-[#21262d] text-gray-400 text-left sticky top-0">
                        <tr>
                            <th class="px-4 py-2 font-medium">Setting</th>
                            <th class="px-4 py-2 font-medium">Value</th>
                            <th class="px-4 py-2 font-medium">Category</th>
                            <th class="px-4 py-2 font-medium">Description</th>
                        </tr>
                    </thead>
                    <tbody id="settings-list" class="divide-y divide-[#30363d]">
                        <tr><td colspan="4" class="p-4 text-gray-500">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Scheduled Tasks -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>⏰</span> Scheduled Tasks
                </h3>
                <div class="flex items-center gap-2">
                    <button onclick="showScheduleModal()" class="px-3 py-1 bg-[#238636] hover:bg-[#2ea043] rounded text-sm flex items-center gap-1">
                        <i data-lucide="plus" class="w-4 h-4"></i> Add Schedule
                    </button>
                    <button onclick="refreshScheduledJobs()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div id="scheduled-jobs-list" class="divide-y divide-[#30363d]">
                <div class="p-4 text-gray-500">Loading...</div>
            </div>
        </div>

        <!-- Roles Management -->
        <div class="card rounded-xl overflow-hidden">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>👤</span> Roles & Users
                </h3>
                <div class="flex items-center gap-2">
                    <button onclick="showCreateRoleModal()" class="px-3 py-1 bg-[#238636] hover:bg-[#2ea043] rounded text-sm flex items-center gap-1">
                        <i data-lucide="plus" class="w-4 h-4"></i> New Role
                    </button>
                    <button onclick="refreshRoles()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-[#21262d] text-gray-400 text-left">
                        <tr>
                            <th class="px-4 py-2 font-medium">Role</th>
                            <th class="px-4 py-2 font-medium">Login</th>
                            <th class="px-4 py-2 font-medium">Superuser</th>
                            <th class="px-4 py-2 font-medium">Create DB</th>
                            <th class="px-4 py-2 font-medium">Create Role</th>
                            <th class="px-4 py-2 font-medium">Member Of</th>
                            <th class="px-4 py-2 font-medium text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="roles-list" class="divide-y divide-[#30363d]">
                        <tr><td colspan="7" class="p-4 text-gray-500">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Slow Queries (pg_stat_statements) -->
        <div class="card rounded-xl overflow-hidden mb-6 mt-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>🐢</span> Slow Queries
                    <span id="slow-queries-status" class="text-xs px-2 py-0.5 rounded bg-gray-700 text-gray-400">checking...</span>
                </h3>
                <div class="flex items-center gap-2">
                    <select id="slow-queries-order" onchange="refreshSlowQueries()" class="bg-[#0d1117] border border-[#30363d] rounded px-2 py-1 text-sm">
                        <option value="total_time">Total Time</option>
                        <option value="mean_time">Avg Time</option>
                        <option value="calls">Calls</option>
                    </select>
                    <button onclick="resetSlowQueries()" class="text-sm text-gray-400 hover:text-white" title="Reset statistics">Reset</button>
                    <button onclick="refreshSlowQueries()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div class="overflow-x-auto max-h-80">
                <table class="w-full text-sm">
                    <thead class="bg-[#21262d] text-gray-400 text-left sticky top-0">
                        <tr>
                            <th class="px-4 py-2 font-medium">Query</th>
                            <th class="px-4 py-2 font-medium text-right">Calls</th>
                            <th class="px-4 py-2 font-medium text-right">Total Time</th>
                            <th class="px-4 py-2 font-medium text-right">Avg Time</th>
                            <th class="px-4 py-2 font-medium text-right">Rows</th>
                            <th class="px-4 py-2 font-medium text-right">Cache %</th>
                        </tr>
                    </thead>
                    <tbody id="slow-queries-list" class="divide-y divide-[#30363d]">
                        <tr><td colspan="6" class="p-4 text-gray-500">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Index Usage -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>📊</span> Index Usage
                </h3>
                <div class="flex items-center gap-2">
                    <label class="flex items-center gap-2 text-sm text-gray-400">
                        <input type="checkbox" id="show-unused-only" onchange="refreshIndexUsage()" class="accent-indigo-500">
                        Unused only
                    </label>
                    <button onclick="showDuplicateIndexes()" class="text-sm text-orange-400 hover:text-orange-300">Find Duplicates</button>
                    <button onclick="refreshIndexUsage()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div class="overflow-x-auto max-h-80">
                <table class="w-full text-sm">
                    <thead class="bg-[#21262d] text-gray-400 text-left sticky top-0">
                        <tr>
                            <th class="px-4 py-2 font-medium">Index</th>
                            <th class="px-4 py-2 font-medium">Table</th>
                            <th class="px-4 py-2 font-medium text-right">Size</th>
                            <th class="px-4 py-2 font-medium text-right">Scans</th>
                            <th class="px-4 py-2 font-medium text-right">Tuples Read</th>
                            <th class="px-4 py-2 font-medium">Status</th>
                        </tr>
                    </thead>
                    <tbody id="index-usage-list" class="divide-y divide-[#30363d]">
                        <tr><td colspan="6" class="p-4 text-gray-500">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Replication -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>🔄</span> Replication
                </h3>
                <button onclick="refreshReplication()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
            </div>
            <div id="replication-content" class="p-4">
                <div class="text-gray-500">Loading...</div>
            </div>
        </div>

        <!-- PITR - Point-In-Time Recovery -->
        <div class="card rounded-xl overflow-hidden mb-6">
            <div class="px-4 py-3 border-b border-[#30363d] flex items-center justify-between">
                <h3 class="font-medium flex items-center gap-2">
                    <span>⏱️</span> Point-In-Time Recovery
                </h3>
                <div class="flex items-center gap-2">
                    <button onclick="createBaseBackup()" class="px-3 py-1 bg-[#238636] hover:bg-[#2ea043] rounded text-sm flex items-center gap-1">
                        <i data-lucide="hard-drive" class="w-4 h-4"></i> Base Backup
                    </button>
                    <button onclick="refreshPITR()" class="text-sm text-gray-400 hover:text-white">↻ Refresh</button>
                </div>
            </div>
            <div id="pitr-content" class="p-4">
                <div class="text-gray-500">Loading...</div>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block modals %}
<!-- Role Modal -->
<div id="role-modal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="bg-[#161b22] rounded-xl p-6 w-[450px] border border-[#30363d] shadow-2xl">
        <h3 id="role-modal-title" class="text-lg font-bold mb-4">Create Role</h3>
        <form id="role-form" class="space-y-4">
            <input type="hidden" id="role-edit-name" value="">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Role Name</label>
                <input id="role-name" placeholder="my_user" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500" required>
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Password (optional for roles without login)</label>
                <input id="role-password" type="password" placeholder="••••••" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="role-login" checked class="accent-indigo-500">
                    <span class="text-sm">Can Login</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="role-superuser" class="accent-indigo-500">
                    <span class="text-sm">Superuser</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="role-createdb" class="accent-indigo-500">
                    <span class="text-sm">Create Database</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="role-createrole" class="accent-indigo-500">
                    <span class="text-sm">Create Role</span>
                </label>
            </div>
            <div class="flex gap-3 justify-end pt-2 border-t border-[#30363d]">
                <button type="button" onclick="hideRoleModal()" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Save</button>
            </div>
        </form>
    </div>
</div>

<!-- Backups Modal -->
<div id="backups-modal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="bg-[#161b22] rounded-xl p-6 w-[550px] max-h-[80vh] border border-[#30363d] shadow-2xl flex flex-col">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold">Database Backups</h3>
            <button onclick="hideBackupsModal()" class="text-gray-400 hover:text-white text-xl">×</button>
        </div>
        <div id="backups-list" class="flex-1 overflow-auto">
            <div class="text-gray-500">Loading...</div>
        </div>
    </div>
</div>

<!-- Create Database from Backup Modal -->
<div id="create-db-modal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="bg-[#161b22] rounded-xl p-6 w-[450px] border border-[#30363d] shadow-2xl">
        <h3 class="text-lg font-bold mb-4">Create Database from Backup</h3>
        <div class="space-y-4">
            <div class="bg-[#0d1117] rounded-lg p-3 text-sm">
                <div class="text-gray-400 mb-1">Backup file:</div>
                <div id="create-db-backup-name" class="font-mono text-indigo-400"></div>
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">New Database Name</label>
                <input id="create-db-name" type="text" placeholder="my_new_database"
                       class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                <p class="text-xs text-gray-500 mt-1">Use lowercase letters, numbers, and underscores</p>
            </div>
            <div class="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 text-sm text-amber-400">
                <div class="flex items-start gap-2">
                    <span class="text-lg">⚠️</span>
                    <div>This will create a new database and restore the backup into it.</div>
                </div>
            </div>
        </div>
        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button onclick="hideCreateDbModal()" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
            <button onclick="createDbFromBackup()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg font-medium">Create Database</button>
        </div>
    </div>
</div>

<!-- Schedule Modal -->
<div id="schedule-modal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="bg-[#161b22] rounded-xl p-6 w-[450px] border border-[#30363d] shadow-2xl">
        <h3 class="text-lg font-bold mb-4">Add Scheduled Task</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Task Type</label>
                <select id="schedule-type" onchange="updateScheduleOptions()" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                    <option value="backup">Backup</option>
                    <option value="vacuum">VACUUM</option>
                    <option value="analyze">ANALYZE</option>
                </select>
            </div>
            <div id="schedule-vacuum-options" class="hidden">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="schedule-vacuum-full" class="accent-indigo-500">
                    <span class="text-sm">VACUUM FULL (more thorough, but locks tables)</span>
                </label>
            </div>
            <!-- Schedule Mode -->
            <div>
                <label class="block text-sm text-gray-400 mb-2">Schedule Mode</label>
                <div class="flex gap-2">
                    <button onclick="setScheduleMode('recurring')" id="schedule-mode-recurring" class="flex-1 px-3 py-2 rounded-lg text-sm font-medium bg-[#21262d] text-white border border-indigo-500">
                        <i data-lucide="repeat" class="w-4 h-4 inline mr-1"></i> Recurring
                    </button>
                    <button onclick="setScheduleMode('once')" id="schedule-mode-once" class="flex-1 px-3 py-2 rounded-lg text-sm font-medium bg-[#0d1117] text-[#8b949e] hover:text-white border border-[#30363d]">
                        <i data-lucide="calendar" class="w-4 h-4 inline mr-1"></i> Run Once
                    </button>
                </div>
            </div>
            <!-- Recurring options -->
            <div id="schedule-recurring-options">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Hour (0-23)</label>
                        <input id="schedule-hour" type="number" min="0" max="23" value="2" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Minute (0-59)</label>
                        <input id="schedule-minute" type="number" min="0" max="59" value="0" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                    </div>
                </div>
                <div class="mt-4">
                    <label class="block text-sm text-gray-400 mb-1">Day of Week</label>
                    <select id="schedule-day" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="*">Every day</option>
                        <option value="mon">Monday</option>
                        <option value="tue">Tuesday</option>
                        <option value="wed">Wednesday</option>
                        <option value="thu">Thursday</option>
                        <option value="fri">Friday</option>
                        <option value="sat">Saturday</option>
                        <option value="sun" selected>Sunday</option>
                        <option value="mon-fri">Weekdays (Mon-Fri)</option>
                    </select>
                </div>
            </div>
            <!-- One-time options -->
            <div id="schedule-once-options" class="hidden">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Date & Time</label>
                    <input id="schedule-datetime" type="datetime-local" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-white">
                </div>
            </div>
            <div class="bg-[#0d1117] rounded-lg p-3 text-sm text-[#8b949e]">
                <div class="flex items-start gap-2">
                    <i data-lucide="info" class="w-4 h-4 mt-0.5 flex-shrink-0"></i>
                    <div>Scheduled tasks run at the specified time for the currently selected connection.</div>
                </div>
            </div>
        </div>
        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button onclick="hideScheduleModal()" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
            <button onclick="addScheduledTask()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Add Schedule</button>
        </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
<script src="/static/admin.js"></script>
{% endblock %}