{# app/templates/admin/base.html #}
<!DOCTYPE html>
<html :class="{ 'dark': dark }" x-data="{% block alpine_data %}data(){% endblock %}" lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}Admin Panel{% endblock %} - Multi-Tenant Platform</title>

    <!-- Fonts: Local fallback + Google Fonts -->
    <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

    <!-- Tailwind CSS v4 (built locally via standalone CLI) -->
    <link rel="stylesheet" href="{{ url_for('static', path='admin/css/tailwind.output.css') }}" />

    <!-- Alpine Cloak -->
    <style>
        [x-cloak] { display: none !important; }
    </style>

    <!-- Flatpickr CSS with CDN fallback (loaded on demand via block) -->
    {% block flatpickr_css %}{% endblock %}

    {% block extra_head %}{% endblock %}
</head>
<body x-cloak>
    <div class="flex h-screen bg-gray-50 dark:bg-gray-900" :class="{ 'overflow-hidden': isSideMenuOpen }">
        <!-- Sidebar (server-side included) -->
        {% include 'admin/partials/sidebar.html' %}

        <div class="flex flex-col flex-1 w-full">
            <!-- Header (server-side included) -->
            {% include 'admin/partials/header.html' %}

            <!-- Main Content -->
            <main class="h-full overflow-y-auto">
                <div class="container px-6 mx-auto grid">
                    {% block content %}{% endblock %}
                </div>
            </main>
        </div>
    </div>

    <!-- Core Scripts - ORDER MATTERS! -->

    <!-- 1. FIRST: Log Configuration -->
    <script src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>

    <!-- 2. SECOND: Icons (before Alpine.js) -->
    <script src="{{ url_for('static', path='shared/js/icons.js') }}"></script>

    <!-- 3. THIRD: Alpine.js Base Data -->
    <script src="{{ url_for('static', path='admin/js/init-alpine.js') }}"></script>

    <!-- 4. FOURTH: Utils (standalone utilities) -->
    <script src="{{ url_for('static', path='shared/js/utils.js') }}"></script>

    <!-- 5. FIFTH: API Client (depends on Utils) -->
    <script src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>

    <!-- 6. SIXTH: Alpine.js v3 with CDN fallback (with defer) -->
    <script>
    (function() {
        var script = document.createElement('script');
        script.defer = true;
        script.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js';

        script.onerror = function() {
            console.warn('Alpine.js CDN failed, loading local copy...');
            var fallbackScript = document.createElement('script');
            fallbackScript.defer = true;
            fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/alpine.min.js") }}';
            document.head.appendChild(fallbackScript);
        };

        document.head.appendChild(script);
    })();
    </script>

    <!-- 7. OPTIONAL: Chart.js with CDN fallback (loaded on demand via block) -->
    {% block chartjs_script %}{% endblock %}

    <!-- 8. OPTIONAL: Flatpickr with CDN fallback (loaded on demand via block) -->
    {% block flatpickr_script %}{% endblock %}

    <!-- 9. LAST: Page-specific scripts -->
    {% block extra_scripts %}{% endblock %}
</body>
</html>