{# templates/layouts/admin_layout.html.twig #}
{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    {# 1. Fichiers CSS spécifiques à l'Admin #}
    <link href="{{ asset('assets/css/theme-entreprise.min.css') }}" type="text/css" rel="stylesheet" />
    <link href="{{ asset('assets/css/theme-entreprise-main.css') }}" type="text/css" rel="stylesheet" />

    <style>
        :root {
           
            --sidebar-bg: #1e293b;
            --luxim-primary: #0d6efd; /* Couleur personnalisable par interface */
        }

        body { 
            font-family: 'Manrope', sans-serif; 
            background-color: #f4f7f6; 
            margin: 0;
        }

        /* Styles du Loader spécifique à l'Admin */
        /* Désactivé temporairement
        #global-loader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            z-index: 9999; display: flex;
            justify-content: center; align-items: center; flex-direction: column;
            transition: opacity 0.5s ease;
        }
        .spinner {
            width: 50px; height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--express-green);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        */

        /* Structure de mise en page Admin */
        .app-wrapper { display: flex; min-height: 100vh; }
        .sidebar-professional { width: 280px; background: var(--sidebar-bg); flex-shrink: 0; }
        .main-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
    </style>
{% endblock %}

{% block body %}
    {# Loader Global - Mis en commentaire 
    <div id="global-loader">
        <div class="loader-content text-center">
            <div class="spinner"></div>
            <p class="fw-bold" style="color: var(--sidebar-bg);">LUXIM GPIM - ADMIN</p>
        </div>
    </div>
    #}

    <div class="app-wrapper">
        <aside class="sidebar-professional d-none d-lg-block">
            {% include '_sidebar.html.twig' %}
        </aside>

        <div class="main-content">
            {% include '_header.html.twig' %}

            <main class="flex-grow-1">
                {% include 'breadcrumb.html.twig' %}
                <div class="container-fluid " style="padding:0 20px">
                    

                    {# Messages Flash #}
                    {% for label, messages in app.flashes %}
                        {% for message in messages %}
                            <div class="alert alert-{{ label }} alert-dismissible fade show shadow-sm border-0 mb-4">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endfor %}

                    {# Contenu de la page #}
                    {% block content %}{% endblock %}
                </div>
            </main>

            {% include '_footer.html.twig' %}
        </div>
    </div>

    <div class="offcanvas offcanvas-start bg-dark text-white" tabindex="-1" id="sidebarOffcanvas">
        <div class="offcanvas-body p-0">
            {% include '_sidebar.html.twig' %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            /* Script du loader désactivé
            const loader = document.getElementById('global-loader');
            // Cacher le loader
            setTimeout(() => { 
                if(loader) {
                    loader.style.opacity = '0';
                    setTimeout(() => { loader.style.display = 'none'; }, 500);
                }
            }, 300);

            // Réafficher le loader lors du changement de page
            window.onbeforeunload = function() {
                if(loader) {
                    loader.style.display = 'flex';
                    loader.style.opacity = '1';
                }
            };
            */
        });
    </script>
{% endblock %}