<!DOCTYPE html>
{% set theme = 'dark' %}
{% if admin_settings is defined and admin_settings and admin_settings.theme in ['dark', 'light'] %}
    {% set theme = admin_settings.theme %}
{% endif %}
{% set current_tab = active_tab if active_tab is defined else '' %}
<html lang="en" class="{% if theme == 'dark' %}dark{% endif %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ site_title }}{% endblock %}</title>

    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#137fec",
                        "background-light": "#f6f7f8",
                        "background-dark": "#101922",
                        "surface-light": "#ffffff",
                        "surface-dark": "#15202b",
                    },
                    fontFamily: {
                        display: ["Inter", "sans-serif"],
                    },
                    borderRadius: {
                        DEFAULT: "0.25rem",
                        lg: "0.5rem",
                        xl: "0.75rem",
                        full: "9999px",
                    },
                },
            },
        };
    </script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        :root {
            --admin-border-soft-light: rgb(226 232 240 / 0.66);
            --admin-border-soft-dark: rgb(71 85 105 / 0.45);
            --admin-table-border-light: rgb(226 232 240 / 0.66);
            --admin-table-border-dark: rgb(71 85 105 / 0.32);
        }

        .material-symbols-outlined {
            font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 24;
        }

        body {
            font-family: "Inter", sans-serif;
        }

        .admin-scroll::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .admin-scroll::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.08);
        }

        .admin-scroll::-webkit-scrollbar-thumb {
            background: rgba(71, 85, 105, 0.45);
            border-radius: 999px;
        }

        .dark .admin-scroll::-webkit-scrollbar-track {
            background: rgba(148, 163, 184, 0.08);
        }

        .dark .admin-scroll::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.45);
        }

        .card {
            border: 1px solid var(--admin-border-soft-light);
            border-radius: 0.75rem;
            box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
        }

        .dark .card {
            border-color: var(--admin-border-soft-dark);
            background-color: rgb(21 32 43);
            color: rgb(226 232 240);
            box-shadow: none;
        }

        .admin-border-soft {
            border-color: var(--admin-border-soft-light) !important;
        }

        .dark .admin-border-soft {
            border-color: var(--admin-border-soft-dark) !important;
        }

        .admin-border-soft-divider {
            border-color: var(--admin-border-soft-light) !important;
        }

        .dark .admin-border-soft-divider {
            border-color: var(--admin-border-soft-dark) !important;
        }

        .modal-content {
            border-radius: 0.75rem;
            border-color: rgb(226 232 240);
        }

        .dark .modal-content {
            border-color: rgb(51 65 85);
            background-color: rgb(21 32 43);
            color: rgb(226 232 240);
        }

        .dark .modal-header,
        .dark .modal-footer {
            border-color: rgb(51 65 85);
        }

        .dark .form-control,
        .dark .form-select,
        .dark .form-check-input,
        .dark .form-control:focus,
        .dark .form-select:focus {
            color: rgb(226 232 240);
            background-color: rgb(15 23 42);
            border-color: rgb(71 85 105);
        }

        .dark .table {
            color: rgb(226 232 240);
        }

        .dark .table-striped > tbody > tr:nth-of-type(odd) > * {
            color: rgb(226 232 240);
            background-color: rgb(15 23 42);
        }

        .dark .table-hover > tbody > tr:hover > * {
            color: rgb(248 250 252);
            background-color: rgb(30 41 59);
        }

        .dark .dropdown-menu {
            background-color: rgb(21 32 43);
            border-color: rgb(51 65 85);
        }

        .dark .dropdown-item {
            color: rgb(226 232 240);
        }

        .dark .dropdown-item:hover {
            background-color: rgb(30 41 59);
            color: rgb(248 250 252);
        }

        .bootstrap-table .fixed-table-toolbar .btn,
        .bootstrap-table .fixed-table-pagination .btn,
        .bootstrap-table .fixed-table-pagination .page-link {
            border-radius: 0.5rem;
        }

        .bootstrap-table .search input {
            border-radius: 0.5rem;
        }

        .admin-themed-input,
        .admin-themed-input:focus {
            border-color: rgb(203 213 225) !important;
            background-color: rgb(255 255 255) !important;
            color: rgb(15 23 42) !important;
            box-shadow: none !important;
        }

        .admin-themed-input::placeholder {
            color: rgb(148 163 184) !important;
        }

        .dark .admin-themed-input,
        .dark .admin-themed-input:focus {
            border-color: rgb(71 85 105) !important;
            background-color: rgb(11 18 32) !important;
            color: rgb(226 232 240) !important;
            box-shadow: none !important;
        }

        .dark .admin-themed-input::placeholder {
            color: rgb(148 163 184) !important;
        }

        .dark .bootstrap-table .fixed-table-toolbar .search input,
        .dark .bootstrap-table .fixed-table-toolbar .search input.form-control {
            background-color: rgb(11 18 32) !important;
            border-color: rgb(71 85 105) !important;
            color: rgb(226 232 240) !important;
        }

        .dark .bootstrap-table .fixed-table-toolbar .search input::placeholder,
        .dark .bootstrap-table .fixed-table-toolbar .search input.form-control::placeholder {
            color: rgb(148 163 184) !important;
        }

        .dark .bootstrap-table .table > tbody > tr > td {
            background-color: rgb(13 21 35) !important;
            color: rgb(226 232 240) !important;
            border-color: var(--admin-table-border-dark) !important;
        }

        .bootstrap-table .table > :not(caption) > * > * {
            border-color: var(--admin-table-border-light) !important;
            border-style: solid !important;
            border-width: 1px 1px 1px 0 !important;
        }

        .bootstrap-table .table th,
        .bootstrap-table .table td {
            border-color: var(--admin-table-border-light) !important;
        }

        .bootstrap-table .table tr > *:first-child {
            border-left-width: 1px !important;
        }

        .dark .bootstrap-table .table > :not(caption) > * > * {
            border-color: var(--admin-table-border-dark) !important;
        }

        .dark .bootstrap-table .table th,
        .dark .bootstrap-table .table td {
            border-color: var(--admin-table-border-dark) !important;
        }

        .admin-model-search-shell {
            display: flex;
            align-items: center;
            height: 2.4rem;
            border: 0.8px solid var(--admin-table-border-light);
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: none;
        }

        .admin-model-search-shell:focus-within {
            border-color: rgb(19 127 236 / 0.65);
            box-shadow: none;
        }

        .dark .admin-model-search-shell {
            border-color: var(--admin-table-border-dark);
        }

        .dark .admin-model-search-shell:focus-within {
            border-color: rgb(56 189 248 / 0.6);
            box-shadow: none;
        }

        .dark .bootstrap-table .table > tbody > tr:nth-child(even) > td {
            background-color: rgb(17 27 43) !important;
        }

        .dark .bootstrap-table .table-hover > tbody > tr:hover > td {
            background-color: rgb(30 41 59) !important;
            color: rgb(248 250 252) !important;
        }

        .models-search-icon-shell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding-left: 0.65rem;
            padding-right: 0.65rem;
            border-right: 0.8px solid var(--admin-table-border-light);
            background-color: rgb(248 250 252);
        }

        .dark .models-search-icon-shell {
            border-right-color: var(--admin-table-border-dark);
            background-color: rgb(15 23 42);
        }
    </style>
    {% block extra_head %}{% endblock %}
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen">
<div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
    {% if user %}
    <header class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 bg-surface-light dark:bg-surface-dark px-5 py-3 shrink-0">
        <div class="flex items-center gap-3 text-slate-900 dark:text-slate-100">
            <div class="text-primary flex items-center justify-center">
                <span class="material-symbols-outlined text-[26px]">rocket_launch</span>
            </div>
            <div>
                <h1 class="text-base font-bold leading-tight">{{ site_title }}</h1>
                <p class="text-[11px] text-slate-500 dark:text-slate-400">Admin Control Panel</p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <div class="hidden sm:flex items-center gap-2 rounded-lg border border-slate-200 dark:border-slate-700 admin-border-soft px-3 py-1.5 text-xs text-slate-500 dark:text-slate-300">
                <span class="material-symbols-outlined text-[16px]">person</span>
                {{ user.username }}
            </div>
            <a href="/{{ prefix | default('admin') }}/logout" class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-white hover:bg-primary/90 transition-colors">
                <span class="material-symbols-outlined text-[16px]">logout</span>
                Logout
            </a>
        </div>
    </header>

    <nav class="md:hidden grid grid-cols-3 border-b border-slate-200 dark:border-slate-800 bg-surface-light dark:bg-surface-dark">
        <a href="/{{ prefix | default('admin') }}" class="flex flex-col items-center gap-1 px-2 py-2 text-[11px] font-semibold {% if current_tab == 'dashboard' %}text-primary{% else %}text-slate-500 dark:text-slate-300{% endif %}">
            <span class="material-symbols-outlined text-[18px]">dashboard</span>
            Dashboard
        </a>
        <a href="/{{ prefix | default('admin') }}/models" class="flex flex-col items-center gap-1 px-2 py-2 text-[11px] font-semibold {% if current_tab == 'models' %}text-primary{% else %}text-slate-500 dark:text-slate-300{% endif %}">
            <span class="material-symbols-outlined text-[18px]">database</span>
            Models
        </a>
        <a href="/{{ prefix | default('admin') }}/settings" class="flex flex-col items-center gap-1 px-2 py-2 text-[11px] font-semibold {% if current_tab == 'settings' %}text-primary{% else %}text-slate-500 dark:text-slate-300{% endif %}">
            <span class="material-symbols-outlined text-[18px]">settings</span>
            Settings
        </a>
    </nav>

    <div class="flex flex-1 overflow-hidden">
        <aside class="hidden md:flex md:w-72 flex-col border-r border-slate-200 dark:border-slate-800 bg-surface-light dark:bg-surface-dark p-4 admin-scroll overflow-y-auto">
            <nav class="flex flex-col gap-1">
                <a href="/{{ prefix | default('admin') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors {% if current_tab == 'dashboard' %}bg-primary/15 text-primary{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800{% endif %}">
                    <span class="material-symbols-outlined text-[20px]">dashboard</span>
                    Dashboard
                </a>
                <a href="/{{ prefix | default('admin') }}/models" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors {% if current_tab == 'models' %}bg-primary/15 text-primary{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800{% endif %}">
                    <span class="material-symbols-outlined text-[20px]">database</span>
                    Models
                </a>
                <a href="/{{ prefix | default('admin') }}/settings" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors {% if current_tab == 'settings' %}bg-primary/15 text-primary{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800{% endif %}">
                    <span class="material-symbols-outlined text-[20px]">settings</span>
                    Settings
                </a>
            </nav>

            <div class="mt-6 rounded-xl border border-slate-200 dark:border-slate-700 admin-border-soft bg-slate-50/80 dark:bg-slate-800/40 p-4">
                <p class="text-xs uppercase tracking-wider font-semibold text-slate-500 dark:text-slate-400">Models Summary</p>
                <div class="mt-3 space-y-2 text-sm text-slate-600 dark:text-slate-300">
                    <div class="flex justify-between"><span>Total</span><span class="font-semibold">{{ models|length if models is defined else 0 }}</span></div>
                    <div class="flex justify-between"><span>Categories</span><span class="font-semibold">{{ model_categories|length if model_categories is defined else 0 }}</span></div>
                </div>
            </div>

            {% if copyright %}
            <p class="mt-auto pt-6 text-xs text-slate-500 dark:text-slate-400">{{ copyright }}</p>
            {% endif %}
        </aside>

        <main class="flex-1 overflow-y-auto admin-scroll p-4 sm:p-6 lg:p-8">
            <div class="mx-auto max-w-7xl">
                {% block content %}{% endblock %}
            </div>
        </main>
    </div>
    {% else %}
    <main class="min-h-screen flex items-center justify-center p-4 sm:p-8">
        {{ self.content() }}
    </main>
    {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/locale/bootstrap-table-en-US.min.js"></script>

{% block extra_js %}
<script>
function setLanguage(lang) {
    $.ajax({
        url: '/admin/set_language',
        method: 'POST',
        data: { language: lang },
        success: function() {
            location.reload();
        },
        error: function() {
            alert('Failed to switch language');
        }
    });
}
</script>
{% endblock %}
</body>
</html>
