{% extends 'base.html.twig' %}

{% block title %}Sidebar - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-left', size: 'sm', color: 'gray' } %}
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-xs font-medium bg-purple-100 text-purple-700 rounded">Organisme</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Sidebar</h1>
                    </div>
                    <p class="text-sm text-gray-500">Navigation principale de l'application</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== EXPLICATION ===== #}
        <section class="mb-12 bg-gradient-to-r from-purple-50 to-purple-100/50 rounded-xl border border-purple-200 overflow-hidden">
            <div class="p-6">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'list', size: 'lg', color: 'white' } %}
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <h2 class="text-lg font-semibold text-gray-900">Navigation principale</h2>
                            <span class="px-2 py-0.5 text-xs font-medium bg-red-100 text-red-700 rounded">Critique</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            La Sidebar est l'organisme le plus important de Bubul. Presente sur <strong>100% des pages</strong>,
                            elle permet de naviguer entre les produits (Moodia, Serenia, Slidia, SAM) et les sections d'administration.
                        </p>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">1</p>
                                <p class="text-xs text-gray-500">Molecule</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">3</p>
                                <p class="text-xs text-gray-500">Atomes</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">3</p>
                                <p class="text-xs text-gray-500">Roles</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">1</p>
                                <p class="text-xs text-gray-500">Controller</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== COMPOSITION ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Composition</h2>
                <p class="text-sm text-gray-500 mt-1">Molecules et atomes utilises</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                            Molecules
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center gap-2">
                                <code class="bg-gray-100 px-2 py-0.5 rounded text-xs">nav-item</code>
                                <span class="text-gray-400">- Elements de navigation</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                            Atomes
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center gap-2">
                                <code class="bg-gray-100 px-2 py-0.5 rounded text-xs">icon</code>
                                <span class="text-gray-400">- Icones des produits</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <code class="bg-gray-100 px-2 py-0.5 rounded text-xs">logo</code>
                                <span class="text-gray-400">- Logo Bubul</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <code class="bg-gray-100 px-2 py-0.5 rounded text-xs">badge</code>
                                <span class="text-gray-400">- Compteurs notifications</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        {# ===== USAGE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Usage</h2>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{# Dans base.html.twig #}
{% include '_organisms/sidebar/sidebar.html.twig' %}

{# Ou avec parametres explicites #}
{% include '_organisms/sidebar/sidebar.html.twig' with {
    collapsed: app.user.settings.sidebarCollapsed|default(false),
    currentRoute: app.request.attributes.get('_route'),
    accessibleTools: accessible_tools,
    isAdmin: is_granted('ROLE_ADMIN'),
    isManager: is_granted('ROLE_COMPANY_MANAGER'),
    companyUuid: app.user.company.uuid|default(null),
    version: app_version,
    navItemSize: 'lg',
    logoSize: '2xl',
    logoSizeCollapsed: 'md'
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== STRUCTURE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Structure</h2>
                <p class="text-sm text-gray-500 mt-1">Organisation hierarchique de la sidebar</p>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 text-sm font-mono">
                    <pre class="text-gray-100"><code>Sidebar
├── Header
│   ├── Toggle (collapse/expand)
│   └── Logo Bubul
│
├── Menu Principal
│   ├── Dashboard
│   ├── Moodia      (ou locked)
│   ├── Serenia     (ou locked)
│   ├── Slidia      (ou locked)
│   └── SAM         (conditionnel)
│
├── Section Admin   (si ROLE_ADMIN ou ROLE_COMPANY_MANAGER)
│   ├── Separateur
│   ├── Categorie "Administration"
│   ├── Entreprises / Mon entreprise
│   ├── Utilisateurs
│   ├── Contrats    (admin only)
│   └── Tokens      (manager only)
│
├── Section Beta    (si ROLE_ADMIN)
│   ├── Separateur
│   ├── Categorie "Beta"
│   ├── Feedbacks
│   ├── Design System
│   └── Beta testers
│
└── Footer
    ├── Parametres
    ├── Deconnexion
    └── Version</code></pre>
                </div>
            </div>
        </section>

        {# ===== DEMO ORGANISME ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Demo de l'organisme</h2>
                <p class="text-sm text-gray-500 mt-1">Comparaison Expanded (260px) vs Collapsed (72px)</p>
            </div>
            <div class="p-6">
                <div class="flex gap-8 justify-center items-start">
                    {# Expanded #}
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-3 text-center">Expanded</p>
                        <div class="overflow-hidden rounded-xl border border-gray-200">
                            {% include '_organisms/sidebar/sidebar.html.twig' with {
                                collapsed: false,
                                currentRoute: 'admin_design_system',
                                accessibleTools: ['moodia', 'serenia'],
                                isAdmin: true,
                                isManager: false,
                                version: '0.9.54',
                                interactive: false,
                                static: true
                            } %}
                        </div>
                    </div>

                    {# Collapsed #}
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-3 text-center">Collapsed</p>
                        <div class="overflow-hidden rounded-xl border border-gray-200">
                            {% include '_organisms/sidebar/sidebar.html.twig' with {
                                collapsed: true,
                                currentRoute: 'admin_design_system',
                                accessibleTools: ['moodia', 'serenia'],
                                isAdmin: true,
                                isManager: false,
                                version: '0.9.54',
                                interactive: false,
                                static: true
                            } %}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== OUTILS VERROUILLES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Outils verrouilles</h2>
                <p class="text-sm text-gray-500 mt-1">Affichage quand l'utilisateur n'a pas acces a un outil</p>
            </div>
            <div class="p-6">
                <div class="max-w-[260px] mx-auto flex flex-col gap-1 bg-gradient-to-b from-sky-50/95 via-sky-100/95 to-white/95 p-3 rounded-xl border border-primary/10 shadow-lg">
                    {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Dashboard', icon: 'bubul-dashboard', href: '#', active: true } %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Moodia', icon: 'bubul-moodia', href: '#' } %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Serenia', icon: 'bubul-serenia', href: '#', locked: true } %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Slidia', icon: 'bubul-slidia', href: '#', locked: true } %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'SAM', icon: 'bubul-sam', href: '#', locked: true, disabled: true } %}
                </div>
                <p class="text-sm text-gray-500 text-center mt-4">
                    Les outils avec <code class="bg-gray-100 px-1 rounded">locked: true</code> affichent un cadenas rouge
                </p>
            </div>
        </section>

        {# ===== SECTIONS PAR ROLE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Sections par role</h2>
                <p class="text-sm text-gray-500 mt-1">Affichage conditionnel selon les permissions</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {# User #}
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-3 text-center">ROLE_USER</p>
                        <div class="bg-gradient-to-b from-sky-50/95 to-white/95 p-3 rounded-xl border border-primary/10">
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Dashboard', icon: 'bubul-dashboard', href: '#', active: true, size: 'sm' } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Moodia', icon: 'bubul-moodia', href: '#', size: 'sm' } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Serenia', icon: 'bubul-serenia', href: '#', size: 'sm' } %}
                        </div>
                        <p class="text-xs text-gray-400 text-center mt-2">Menu principal uniquement</p>
                    </div>

                    {# Manager #}
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-3 text-center">ROLE_COMPANY_MANAGER</p>
                        <div class="bg-gradient-to-b from-sky-50/95 to-white/95 p-3 rounded-xl border border-primary/10">
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Dashboard', icon: 'bubul-dashboard', href: '#', size: 'sm' } %}
                            <div class="h-px bg-primary/10 my-2"></div>
                            <div class="px-3 py-1">
                                <span class="text-[10px] font-semibold uppercase text-primary/60">Admin</span>
                            </div>
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Mon entreprise', icon: 'bubul-entreprise', href: '#', size: 'sm' } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Utilisateurs', icon: 'bubul-utilisateur', href: '#', size: 'sm' } %}
                        </div>
                        <p class="text-xs text-gray-400 text-center mt-2">+ Section entreprise</p>
                    </div>

                    {# Admin #}
                    <div>
                        <p class="text-sm font-medium text-gray-500 mb-3 text-center">ROLE_ADMIN</p>
                        <div class="bg-gradient-to-b from-sky-50/95 to-white/95 p-3 rounded-xl border border-primary/10">
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Dashboard', icon: 'bubul-dashboard', href: '#', size: 'sm' } %}
                            <div class="h-px bg-primary/10 my-2"></div>
                            <div class="px-3 py-1">
                                <span class="text-[10px] font-semibold uppercase text-primary/60">Admin</span>
                            </div>
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Entreprises', icon: 'bubul-entreprise', href: '#', size: 'sm' } %}
                            <div class="h-px bg-primary/10 my-2"></div>
                            <div class="px-3 py-1">
                                <span class="text-[10px] font-semibold uppercase text-primary/60">Beta</span>
                            </div>
                            {% include '_molecules/nav-item/nav-item.html.twig' with { label: 'Design System', icon: 'widget-add', href: '#', size: 'sm', active: true } %}
                        </div>
                        <p class="text-xs text-gray-400 text-center mt-2">+ Admin + Beta</p>
                    </div>
                </div>
            </div>
        </section>

        {# ===== CONTROLLER STIMULUS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Controller Stimulus</h2>
                <p class="text-sm text-gray-500 mt-1"><code class="bg-gray-200 px-1 rounded">shared--sidebar</code></p>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto mb-4">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}<nav
    data-controller="shared--sidebar"
    data-shared--sidebar-collapsed-class="sidebar--collapsed"
>
    <button data-action="click->shared--sidebar#toggle">
        Toggle
    </button>
</nav>{% endverbatim %}</code></pre>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div class="p-3 bg-blue-50 rounded-lg">
                        <p class="font-medium text-blue-800">Actions</p>
                        <ul class="mt-2 text-blue-700 space-y-1">
                            <li><code>toggle</code> - Bascule collapsed/expanded</li>
                        </ul>
                    </div>
                    <div class="p-3 bg-green-50 rounded-lg">
                        <p class="font-medium text-green-800">Classes CSS</p>
                        <ul class="mt-2 text-green-700 space-y-1">
                            <li><code>sidebar--collapsed</code> - Etat reduit</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        {# ===== LOGIQUE METIER ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Logique metier</h2>
                <p class="text-sm text-gray-500 mt-1">Variables et conditions Twig</p>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Variable</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100">
                            <td class="py-2 px-3"><code>app.user</code></td>
                            <td class="py-2 px-3">User</td>
                            <td class="py-2 px-3">Utilisateur connecte</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-2 px-3"><code>app.user.settings.sidebarCollapsed</code></td>
                            <td class="py-2 px-3">bool</td>
                            <td class="py-2 px-3">Etat collapsed sauvegarde en BDD</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-2 px-3"><code>accessible_tools</code></td>
                            <td class="py-2 px-3">array</td>
                            <td class="py-2 px-3">Liste des codes outils accessibles ['moodia', 'serenia', ...]</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-2 px-3"><code>app.request.attributes.get('_route')</code></td>
                            <td class="py-2 px-3">string</td>
                            <td class="py-2 px-3">Route actuelle pour marquer l'item actif</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-2 px-3"><code>is_granted('ROLE_ADMIN')</code></td>
                            <td class="py-2 px-3">bool</td>
                            <td class="py-2 px-3">Affiche sections Admin et Beta</td>
                        </tr>
                        <tr>
                            <td class="py-2 px-3"><code>is_granted('ROLE_COMPANY_MANAGER')</code></td>
                            <td class="py-2 px-3">bool</td>
                            <td class="py-2 px-3">Affiche section Mon entreprise</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== PARAMETRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Parametres</h2>
                <p class="text-sm text-gray-500 mt-1">Reference complete des parametres du composant</p>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-4 font-semibold text-gray-700 bg-gray-50">Parametre</th>
                            <th class="text-left py-3 px-4 font-semibold text-gray-700 bg-gray-50">Type</th>
                            <th class="text-left py-3 px-4 font-semibold text-gray-700 bg-gray-50">Defaut</th>
                            <th class="text-left py-3 px-4 font-semibold text-gray-700 bg-gray-50">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">collapsed</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">bool</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">false</code></td>
                            <td class="py-3 px-4">Etat collapsed de la sidebar (72px vs 260px)</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">currentRoute</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">string</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">_route</code></td>
                            <td class="py-3 px-4">Route actuelle pour marquer l'item actif</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">accessibleTools</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">array</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">[]</code></td>
                            <td class="py-3 px-4">Liste des codes outils accessibles ['moodia', 'serenia', ...]</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">isAdmin</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">bool</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">is_granted</code></td>
                            <td class="py-3 px-4">Affiche les sections Admin et Beta</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">isManager</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">bool</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">is_granted</code></td>
                            <td class="py-3 px-4">Affiche la section Mon entreprise</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">companyUuid</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">string</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">null</code></td>
                            <td class="py-3 px-4">UUID entreprise pour les liens manager</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">version</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">string</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">app_version</code></td>
                            <td class="py-3 px-4">Version de l'application affichee en bas</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">interactive</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">bool</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">true</code></td>
                            <td class="py-3 px-4">Active le controller Stimulus (toggle)</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">static</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">bool</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">false</code></td>
                            <td class="py-3 px-4">Mode statique (relative au lieu de fixed) pour les demos</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">navItemSize</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">string</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">'lg'</code></td>
                            <td class="py-3 px-4">Taille des nav-items (sm, md, lg)</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">logoSize</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">string</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">'2xl'</code></td>
                            <td class="py-3 px-4">Taille du logo en mode expanded</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4"><code class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded">logoSizeCollapsed</code></td>
                            <td class="py-3 px-4"><span class="text-purple-600">string</span></td>
                            <td class="py-3 px-4"><code class="text-gray-500">'md'</code></td>
                            <td class="py-3 px-4">Taille du logo en mode collapsed</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== FICHIER SOURCE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Fichier source</h2>
            </div>
            <div class="p-6">
                <div class="flex items-center gap-3 p-4 bg-green-50 rounded-lg border border-green-200">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'md', color: 'success' } %}
                    <div>
                        <p class="font-medium text-green-800">Organisme</p>
                        <code class="text-sm text-green-700">templates/_organisms/sidebar/sidebar.html.twig</code>
                        <p class="text-sm text-green-600 mt-1">
                            Note : L'ancienne navbar est dans <code>templates/_components/navbar.html.twig</code>
                        </p>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>
{% endblock %}