<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <title>{% block title %}SALSABIL Madrassas{% 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=Noto+Serif:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="{{ asset('assets/brand/favicon.png') }}">
    <link href="{{ asset('assets/admin/app.css') }}" rel="stylesheet">
    <style>
        :root {
            --admin-primary: {% block brand_color %}#0f3433{% endblock %};
            --admin-primary-strong: {% block brand_deep_color %}#001e1d{% endblock %};
            --admin-accent: {% block accent_color %}#c5a059{% endblock %};
            --admin-surface: {% block surface_color %}#ffffff{% endblock %};
            --admin-surface-soft: {% block surface_soft_color %}#f5f3ee{% endblock %};
            --admin-page-bg: {% block page_background %}#fbf9f4{% endblock %};
            --admin-border: {% block border_color %}#e4e2dd{% endblock %};
            --admin-text: {% block text_color %}#1b1c19{% endblock %};
            --admin-muted: {% block muted_color %}#717978{% endblock %};
            --admin-sidebar-width: {% block sidebar_width %}17rem{% endblock %};
        }
    </style>
    {% block extra_styles %}{% endblock %}
</head>
<body class="admin-body admin-body-{% block admin_space %}generic{% endblock %}">
    <div class="admin-shell">
        <aside class="admin-sidebar d-none d-lg-flex">
            <div class="admin-sidebar-inner">
                <a class="admin-brand" href="{% block brand_link %}#{% endblock %}">
                    {% block brand_logo %}
                        <img class="admin-brand-logo brand-logo-light" src="{{ asset('assets/brand/logo-salmad-light.png') }}" alt="SALSABIL Madrassas">
                        <img class="admin-brand-logo brand-logo-dark" src="{{ asset('assets/brand/logo-salmad-dark.png') }}" alt="SALSABIL Madrassas">
                    {% endblock %}
                    <div class="admin-brand-copy">
                        <strong>{% block brand_title %}SALSABIL{% endblock %}</strong>
                        <span>{% block brand_subtitle %}Gestion des madrassas{% endblock %}</span>
                    </div>
                </a>

                {% block sidebar_context %}{% endblock %}

                <nav class="admin-nav">
                    {% block sidebar_items %}{% endblock %}
                </nav>

                <div class="admin-sidebar-cta">
                    {% block sidebar_cta %}
                        <button class="admin-primary-cta" type="button">
                            <span class="material-symbols-outlined">add</span>
                            <span>Nouvelle inscription</span>
                        </button>
                    {% endblock %}
                </div>

                <div class="admin-sidebar-footer">
                    {% block sidebar_footer_links %}{% endblock %}
                </div>
            </div>
        </aside>

        <div class="admin-main">
            <header class="admin-topbar">
                <div class="admin-topbar-left">
                    <button class="admin-mobile-toggle d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#adminMobileNav" aria-controls="adminMobileNav">
                        <span class="material-symbols-outlined">menu</span>
                    </button>

                    {% block topbar_search %}
                        <label class="admin-search-pill" aria-label="Recherche">
                            <span class="material-symbols-outlined">search</span>
                            <input type="search" placeholder="{% block search_placeholder %}Rechercher...{% endblock %}">
                        </label>
                    {% endblock %}
                </div>

                <div class="admin-topbar-right">
                    {% block topbar_badge %}
                        <span class="admin-topbar-badge">Espace administrateur</span>
                    {% endblock %}

                    <button class="admin-theme-toggle" type="button" aria-label="Activer le thème sombre" title="Changer le thème" data-admin-theme-toggle>
                        <span class="material-symbols-outlined">contrast</span>
                        <span data-admin-theme-label>Thème</span>
                    </button>

                    <button class="admin-topbar-icon" type="button" aria-label="Notifications">
                        <span class="material-symbols-outlined">notifications</span>
                        <span class="admin-topbar-dot"></span>
                    </button>

                    <button class="admin-topbar-icon" type="button" aria-label="Aide">
                        <span class="material-symbols-outlined">help_outline</span>
                    </button>

                    <div class="admin-topbar-divider"></div>

                    {% if app.user %}
                        <div class="admin-user">
                            <div class="admin-user-copy d-none d-sm-block">
                                <strong>{{ app.user.nom }}</strong>
                                <span>{% block user_meta %}Utilisateur autorisé{% endblock %}</span>
                            </div>
                            <span class="admin-user-avatar">{{ app.user.nom|slice(0, 1)|upper }}</span>
                        </div>
                    {% endif %}
                </div>
            </header>

            <main class="admin-content">
                {% for label, messages in app.flashes %}
                    {% for message in messages %}
                        <div class="admin-flash admin-flash-{{ label }}" role="status">
                            <span class="material-symbols-outlined">{{ label == 'success' ? 'check_circle' : 'info' }}</span>
                            <span>{{ message }}</span>
                        </div>
                    {% endfor %}
                {% endfor %}
                {% block content %}{% endblock %}
            </main>
        </div>
    </div>

    <div class="offcanvas offcanvas-start admin-mobile-canvas d-lg-none" tabindex="-1" id="adminMobileNav" aria-labelledby="adminMobileNavLabel">
        <div class="offcanvas-header">
            <div id="adminMobileNavLabel" class="admin-mobile-brand">
                {% block mobile_brand_logo %}
                    <img class="admin-mobile-brand-logo brand-logo-light" src="{{ asset('assets/brand/logo-salmad-light.png') }}" alt="SALSABIL Madrassas">
                    <img class="admin-mobile-brand-logo brand-logo-dark" src="{{ asset('assets/brand/logo-salmad-dark.png') }}" alt="SALSABIL Madrassas">
                {% endblock %}
                <strong>{% block mobile_brand_title %}SALSABIL{% endblock %}</strong>
                <span>{% block mobile_brand_subtitle %}Gestion des madrassas{% endblock %}</span>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
        </div>
        <div class="offcanvas-body">
            {% block mobile_sidebar_context %}{% endblock %}
            <nav class="admin-nav">
                {% block mobile_sidebar_items %}
                    {{ block('sidebar_items') }}
                {% endblock %}
            </nav>
            <div class="admin-sidebar-cta pt-4">
                {{ block('sidebar_cta') }}
            </div>
            <div class="admin-sidebar-footer pt-4">
                {{ block('sidebar_footer_links') }}
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        (() => {
            const storageKey = 'salsabil-admin-theme';
            const body = document.body;
            const buttons = document.querySelectorAll('[data-admin-theme-toggle]');
            const labels = document.querySelectorAll('[data-admin-theme-label]');

            const applyTheme = (theme) => {
                const isDark = theme === 'dark';
                body.classList.toggle('admin-theme-dark', isDark);
                buttons.forEach((button) => {
                    button.setAttribute('aria-label', isDark ? 'Activer le thème clair' : 'Activer le thème sombre');
                    button.setAttribute('aria-pressed', isDark ? 'true' : 'false');
                });
                labels.forEach((label) => {
                    label.textContent = isDark ? 'Clair' : 'Sombre';
                });
            };

            const savedTheme = localStorage.getItem(storageKey) || 'light';
            applyTheme(savedTheme);

            buttons.forEach((button) => {
                button.addEventListener('click', () => {
                    const nextTheme = body.classList.contains('admin-theme-dark') ? 'light' : 'dark';
                    localStorage.setItem(storageKey, nextTheme);
                    applyTheme(nextTheme);
                });
            });
        })();
    </script>
</body>
</html>
