<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>{% block title %}Admin Panel{% endblock %}</title>
    <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=Space+Grotesk:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='css/admin.css') }}">
    {% block head %}{% endblock %}
</head>
<body data-page="{% block page_id %}dashboard{% endblock %}">
    <div class="admin-shell">
        {% include "sidebar.html" %}
        <div class="sidebar-overlay" data-sidebar-overlay></div>
        <main class="admin-main">
            <header class="topbar glass-card">
                <button class="icon-btn hamburger" type="button" data-sidebar-toggle aria-label="Toggle sidebar">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <div>
                    <p class="eyebrow">{% block eyebrow %}Control Center{% endblock %}</p>
                    <h1 class="page-title">{% block page_title %}Admin Panel{% endblock %}</h1>
                </div>
                <div class="topbar-meta">
                    <span class="user-chip">Signed in as {{ session.get('admin_username', 'admin') }}</span>
                    <button id="logoutBtn">Logout</button>
                    <form method="post" action="{{ url_for('auth.logout') }}" id="logoutForm" style="display: none;">
                    </form>
                </div>
            </header>

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="flash-stack">
                        {% for category, message in messages %}
                            <div class="flash-message {{ category }}">{{ message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}

            {% block content %}{% endblock %}
        </main>
    </div>

    <script src="{{ url_for('admin.static', filename='js/admin.js') }}"></script>
    <script>
        // Logout confirmation popup
        document.getElementById('logoutBtn').addEventListener('click', function() {
            if (confirm('Are you sure you want to logout?')) {
                document.getElementById('logoutForm').submit();
            }
        });
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>
