{#
 # ============================================================================
 # ORGANISM: SIDEBAR
 # ============================================================================
 #
 # Navigation principale de l'application Bubul.
 # Combine la molécule nav-item avec la logique métier (rôles, outils, routes).
 #
 # ============================================================================
 # COMPOSITION (Molécules et Atomes utilisés)
 # ============================================================================
 #
 # - _molecules/nav-item/nav-item.html.twig
 # - _atoms/icon/icon.html.twig
 # - _atoms/logo/logo.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre        | Type    | Défaut    | Description                     |
 # |------------------|---------|-----------|--------------------------------|
 # | variant          | string  | 'bubul'   | Variante : 'bubul' ou 'sam'    |
 # | collapsed        | bool    | false     | État collapsed                 |
 # | currentRoute     | string  | null      | Route actuelle pour état actif |
 # | accessibleTools  | array   | []        | Outils accessibles             |
 # | isAdmin          | bool    | false     | Utilisateur admin              |
 # | isManager        | bool    | false     | Utilisateur manager            |
 # | companyUuid      | string  | null      | UUID entreprise (manager)      |
 # | version          | string  | null      | Version de l'application       |
 # | interactive      | bool    | true      | Active le controller Stimulus  |
 # | static           | bool    | false     | Mode statique (pour démos)     |
 # | navItemSize      | string  | 'lg'      | Taille nav-items (sm, md, lg)  |
 # | logoSize         | string  | '2xl'     | Taille logo expanded           |
 # | logoSizeCollapsed| string  | 'md'      | Taille logo collapsed          |
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set variant = variant ?? 'bubul' %}
{% set isSam = variant == 'sam' %}
{% set navColorScheme = isSam ? 'violet' : 'blue' %}
{% set collapsed = collapsed ?? (app.user.settings.sidebarCollapsed|default(false)) %}
{% set currentRoute = currentRoute ?? app.request.attributes.get('_route')|default('') %}
{% set accessibleTools = accessibleTools ?? accessible_tools|default([]) %}
{% set isAdmin = isAdmin ?? is_granted('ROLE_ADMIN')|default(false) %}
{% set isManager = isManager ?? (is_granted('ROLE_COMPANY_MANAGER')|default(false) and not isAdmin) %}
{% set isCommercial = is_granted('ROLE_COMMERCIAL') and not isAdmin %}
{% set companyUuid = companyUuid ?? (app.user.company.uuid|default(null)) %}
{% set version = version ?? app_version|default('0.0.0') %}
{% set interactive = interactive ?? true %}
{% set static = static ?? false %}
{% set navItemSize = navItemSize ?? 'lg' %}
{% set logoSize = logoSize ?? 'xl' %}
{% set logoSizeCollapsed = logoSizeCollapsed ?? 'md' %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set sidebarWidth = collapsed ? 'w-[72px]' : 'w-[250px]' %}
{% set positionClasses = static ? 'relative h-[600px]' : 'fixed top-0 left-0 h-screen z-40' %}

{# Couleur de fond : 'bubul' → sky (par défaut), 'sam' → violet (couleur à remplacer par la couleur définitive) #}
{% set bgClasses = isSam
    ? 'bg-gradient-to-b from-violet-50/95 via-violet-100/95 to-white/95 border-r border-violet-200/40'
    : 'bg-gradient-to-b from-sky-50/95 via-sky-100/95 to-white/95 border-r border-primary/10'
%}

{% set containerClasses = [
    positionClasses,
    'flex flex-col',
    sidebarWidth,
    bgClasses,
    'backdrop-blur-xl',
    'shadow-lg',
    'transition-all duration-300 ease-out',
    static ? 'rounded-xl overflow-hidden' : ''
]|join(' ')|trim %}

{# ============================================================================
   HELPERS
   ============================================================================ #}

{% macro isRouteActive(currentRoute, targetRoute, startsWith = false) %}
    {%- if startsWith -%}
        {{ currentRoute starts with targetRoute ? true : false }}
    {%- else -%}
        {{ currentRoute == targetRoute ? true : false }}
    {%- endif -%}
{% endmacro %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<nav
    class="{{ containerClasses }} group/sidebar"
    data-collapsed="{{ collapsed ? 'true' : 'false' }}"
    {% if interactive %}
    data-controller="shared--sidebar"
    {% endif %}
    aria-label="Navigation principale"
    role="navigation"
>
    {# ===== HEADER ===== #}
    <div class="relative px-4 pt-5 pb-5 border-b {{ isSam ? 'border-violet-200/40' : 'border-primary/10' }} transition-all duration-300">

        {# Toggle button #}
        {% if interactive %}
        <button
            type="button"
            class="absolute top-1/2 -right-3.5 -translate-y-1/2 w-7 h-7 bg-white border border-gray-200 rounded-full flex items-center justify-center shadow-sm hover:shadow-md hover:scale-110 transition-all duration-300 z-10"
            data-action="click->shared--sidebar#toggle"
            aria-label="Toggle menu"
        >
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'chevron-left',
                size: 'xs',
                color: isSam ? 'cohorts' : 'primary',
                class: 'group-data-[collapsed=true]/sidebar:rotate-180 transition-transform duration-300'
            } %}
        </button>
        {% endif %}

        {# Logo header : icône carrée + nom + sous-titre #}
        <a href="{{ isSam ? path('app_sam_index') : path('app_dashboard') }}"
           class="flex items-center gap-3 group-data-[collapsed=true]/sidebar:gap-0 group-data-[collapsed=true]/sidebar:justify-center transition-all duration-300">

            {# Logo icon seul — caché par défaut, visible en collapsed #}
            <div class="opacity-0 w-0 overflow-hidden flex-shrink-0 transition-all duration-300
                        group-data-[collapsed=true]/sidebar:opacity-100 group-data-[collapsed=true]/sidebar:w-8">
                {% include '_atoms/logo/logo.html.twig' with {
                    variant: 'simple',
                    size: 'sm',
                    tint: isSam ? 'cohorts' : null
                } %}
            </div>

            {# Logo avec texte + sous-titre — visible par défaut, caché en collapsed #}
            <div class="overflow-hidden transition-all duration-300
                        group-data-[collapsed=true]/sidebar:opacity-0 group-data-[collapsed=true]/sidebar:w-0">
                {% include '_atoms/logo/logo-with-text.html.twig' with {
                    showBadge: false,
                    size: 'lg',
                    variant: isSam ? 'sam' : 'bubul',
                    subtitle: isSam ? 'Analytics Moodle' : 'Plateforme IA'
                } only %}
            </div>

        </a>

    </div>

    {# ===== ZONE SCROLL (menu uniquement) ===== #}
    <div class="flex-1 overflow-y-auto scrollbar-none">
    <div class="pt-3 pb-4 px-4">

        {% if isSam %}

            {# ===== DASHBOARD SAM (standalone) ===== #}
            {% include '_molecules/nav-item/nav-item.html.twig' with {
                label: 'Dashboard',
                icon: 'bubul-dashboard',
                href: path('app_sam_index'),
                active: currentRoute == 'app_sam_index',
                collapsed: collapsed,
                size: navItemSize,
                colorScheme: navColorScheme
            } %}

            {# ===== ANALYSE ===== #}
            <div class="px-3 mt-5 mb-1 group-data-[collapsed=true]/sidebar:hidden">
                <span class="text-[10px] font-bold uppercase tracking-[0.12em] text-cohorts/40">Analyse</span>
            </div>
            <div class="flex flex-col">
                {% include '_molecules/nav-item/nav-item.html.twig' with {
                    label: 'Stagiaires',
                    icon: 'user-id',
                    href: path('app_sam_users'),
                    active: currentRoute starts with 'app_sam_users',
                    size: navItemSize,
                    colorScheme: navColorScheme
                } %}
                {% include '_molecules/nav-item/nav-item.html.twig' with {
                    label: 'Cohortes',
                    icon: 'users-group',
                    href: path('app_sam_cohorts'),
                    active: currentRoute starts with 'app_sam_cohorts',
                    size: navItemSize,
                    colorScheme: navColorScheme
                } %}
                {% include '_molecules/nav-item/nav-item.html.twig' with {
                    label: 'Formations',
                    icon: 'presentation-graph',
                    href: path('app_sam_courses'),
                    active: currentRoute starts with 'app_sam_courses',
                    size: navItemSize,
                    colorScheme: navColorScheme
                } %}
            </div>

        {% else %}

            {% set isOnAdminRoute = currentRoute starts with 'admin_' %}
            {% set isOnBetaRoute  = currentRoute starts with 'admin_design_system' %}
            {% set isOnMgrRoute   = isOnAdminRoute and isManager %}

            {# ===== DASHBOARD (sans section parente) ===== #}
            {% include '_molecules/nav-item/nav-item.html.twig' with {
                label: 'Dashboard',
                icon: 'bubul-dashboard',
                href: path('app_dashboard'),
                active: currentRoute == 'app_dashboard',
                collapsed: collapsed,
                size: navItemSize
            } %}

            {# ===== OUTILS IA ===== #}
            {% if sidebar_tools|default([])|length > 0 %}
                {# Label section #}
                <div class="px-3 mt-5 mb-1 group-data-[collapsed=true]/sidebar:hidden">
                    <span class="text-[10px] font-bold uppercase tracking-[0.12em] text-gray-400/80">Outils</span>
                </div>
                <div class="flex flex-col">
                    {% for item in sidebar_tools|default([]) %}
                        {% set tool = item.tool %}
                        {% if tool.code == 'sam' %}
                            {# SAM géré dans le footer #}
                        {% elseif tool.code == 'promptly' %}
                            {# Promptly — item parent + sous-nav collapsible #}
                            {% set promptlyColorHex = (tool_color_details[tool.code] ?? {}).primary ?? null %}
                            {% set promptlyColorSecondary = (tool_color_details[tool.code] ?? {}).secondary ?? null %}
                            {% set promptlyColorBg = (tool_color_details[tool.code] ?? {}).bg ?? null %}
                            {% set isPromptlyActive = currentRoute starts with 'app_promptly' %}
                            <div data-controller="shared--collapsible"
                                 data-shared--collapsible-open-value="{{ isPromptlyActive ? 'true' : 'false' }}">

                                {# Mode collapsed : icône + flyout fixed positionné par sidebar_controller.js #}
                                <div class="hidden group-data-[collapsed=true]/sidebar:block w-full my-1">
                                    <button type="button"
                                            data-sidebar-promptly-btn
                                            class="relative w-full flex items-center justify-center py-2.5 rounded-xl
                                                   transition-all duration-200 hover:scale-105
                                                   nav-item--tool text-gray-600 {{ isPromptlyActive ? 'nav-item--active' : '' }}"
                                            {% if promptlyColorHex %}style="--tool-rgb: {{ promptlyColorHex|hex_to_rgb }};{% if isPromptlyActive %} background-color: {{ promptlyColorBg ?? promptlyColorHex ~ '1f' }}; color: {{ promptlyColorHex }};{% endif %}"{% endif %}>
                                        {% include '_atoms/icon/icon.html.twig' with { name: tool.sidebarIcon, size: 'sm', colorPrimary: promptlyColorHex, colorSecondary: promptlyColorSecondary } only %}
                                        {% if tool.code in new_tool_codes|default([]) %}
                                            <span class="absolute top-1 right-1 w-2 h-2 bg-warning rounded-full ring-2 ring-white"></span>
                                        {% endif %}
                                    </button>

                                    {# Flyout fixed — position:fixed injectée par JS, non clippée par overflow-y-auto #}
                                    <div data-sidebar-promptly-panel
                                         class="bg-white rounded-xl border border-gray-100 shadow-xl py-2 min-w-[160px]">
                                        <p class="px-3 py-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-widest">Promptly</p>
                                        <a href="{{ path('app_promptly') }}"
                                           class="flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors duration-100
                                                  {{ currentRoute == 'app_promptly' ? 'font-semibold' : 'text-gray-600 hover:bg-gray-50' }}"
                                           {% if promptlyColorHex %}style="{% if currentRoute == 'app_promptly' %}color: {{ promptlyColorHex }}; background: {{ promptlyColorBg ?? promptlyColorHex ~ '1f' }};{% endif %}"{% endif %}>
                                            <span class="inline-flex items-center justify-center">
                                                {% include '_atoms/icon/icon.html.twig' with { name: 'book-open', size: 'xs', colorPrimary: promptlyColorHex, colorSecondary: promptlyColorSecondary } only %}
                                            </span>
                                            Bibliothèque
                                        </a>
                                        <a href="{{ path('app_promptly_my_prompts') }}"
                                           class="flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors duration-100
                                                  {{ currentRoute starts with 'app_promptly_my_prompts' ? 'font-semibold' : 'text-gray-600 hover:bg-gray-50' }}"
                                           {% if promptlyColorHex %}style="{% if currentRoute starts with 'app_promptly_my_prompts' %}color: {{ promptlyColorHex }}; background: {{ promptlyColorBg ?? promptlyColorHex ~ '1f' }};{% endif %}"{% endif %}>
                                            <span class="inline-flex items-center justify-center">
                                                {% include '_atoms/icon/icon.html.twig' with { name: 'folder', size: 'xs', colorPrimary: promptlyColorHex, colorSecondary: promptlyColorSecondary } only %}
                                            </span>
                                            Mes prompts
                                        </a>
                                    </div>
                                </div>

                                {# Mode expanded : bouton collapsible #}
                                <button type="button"
                                        data-action="click->shared--collapsible#toggle"
                                        class="w-full flex items-center gap-4 px-3 py-2.5 rounded-lg text-left my-1
                                               transition-all duration-200
                                               nav-item--tool text-gray-600 {{ isPromptlyActive ? 'nav-item--active' : '' }}
                                               group-data-[collapsed=true]/sidebar:hidden"
                                        {% if promptlyColorHex %}style="--tool-rgb: {{ promptlyColorHex|hex_to_rgb }};{% if isPromptlyActive %} background-color: {{ promptlyColorBg ?? promptlyColorHex ~ '1f' }}; color: {{ promptlyColorHex }};{% endif %}"{% endif %}>
                                    <span class="shrink-0 flex items-center justify-center">
                                        {% include '_atoms/icon/icon.html.twig' with { name: tool.sidebarIcon, size: 'md', colorPrimary: promptlyColorHex, colorSecondary: promptlyColorSecondary } only %}
                                    </span>
                                    <span class="flex-1 text-[13px] font-medium">{{ tool.name }}</span>
                                    {% if tool.code in new_tool_codes|default([]) %}
                                        {% include '_atoms/badge/badge.html.twig' with { label: 'NEW', variant: 'warning', customColor: promptlyColorHex ?? null, size: 'xs' } only %}
                                    {% endif %}
                                    <span data-shared--collapsible-target="icon" class="opacity-50 shrink-0">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: 'current' } only %}
                                    </span>
                                </button>

                                <div data-shared--collapsible-target="content"
                                     class="group-data-[collapsed=true]/sidebar:hidden">
                                    <div class="flex flex-col mt-0.5 ml-3 pl-3 border-l border-gray-200/60">
                                        {% include '_molecules/nav-item/nav-item.html.twig' with {
                                            label: 'Bibliothèque',
                                            icon: 'book-open',
                                            href: path('app_promptly'),
                                            active: currentRoute == 'app_promptly',
                                            size: 'sm',
                                            toolColorHex: promptlyColorHex,
                                            toolColorSecondary: promptlyColorSecondary,
                                            toolColorBg: promptlyColorBg
                                        } %}
                                        {% include '_molecules/nav-item/nav-item.html.twig' with {
                                            label: 'Mes prompts',
                                            icon: 'folder',
                                            href: path('app_promptly_my_prompts'),
                                            active: currentRoute starts with 'app_promptly_my_prompts',
                                            size: 'sm',
                                            toolColorHex: promptlyColorHex,
                                            toolColorSecondary: promptlyColorSecondary,
                                            toolColorBg: promptlyColorBg
                                        } %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: tool.name,
                                icon: tool.sidebarIcon,
                                href: item.accessible ? path(tool.routeName) : (tool.code == 'scormia' ? path('app_upgrade') : '#'),
                                active: currentRoute starts with tool.routeName,
                                locked: not item.accessible,
                                collapsed: collapsed,
                                size: navItemSize,
                                isNew: tool.code in new_tool_codes|default([]),
                                newLabel: tool.code == 'scormia' ? 'BETA' : 'NEW',
                                proBadge: tool.code == 'scormia' ? (scormia_needs_pro|default(false)) : false,
                                toolColorHex: (tool_color_details[tool.code] ?? {}).primary ?? null,
                                toolColorSecondary: (tool_color_details[tool.code] ?? {}).secondary ?? null,
                                toolColorBg: (tool_color_details[tool.code] ?? {}).bg ?? null
                            } %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}

            {# ===== ESPACE COMMERCIAL (ROLE_COMMERCIAL, non-admin) ===== #}
            {% if isCommercial %}
                <div class="px-3 mt-5 mb-1 group-data-[collapsed=true]/sidebar:hidden">
                    <span class="text-[10px] font-bold uppercase tracking-[0.12em] text-gray-400/80">Commercial</span>
                </div>
                <div class="flex flex-col">
                    {% include '_molecules/nav-item/nav-item.html.twig' with {
                        label: 'Tableau de bord', icon: 'bubul-dashboard',
                        href: path('app_commercial_dashboard'),
                        active: currentRoute == 'app_commercial_dashboard',
                        collapsed: collapsed, size: navItemSize
                    } %}
                    {# Parrainage porte le code, le lien, le QR et l'invitation d'un filleul :
                       l'outil de travail principal d'un apporteur d'affaires. Il vit sous
                       /settings depuis l'unification des deux pages de parrainage, mais y
                       laisser son seul accès obligerait le commercial à le deviner dans
                       « Paramètres ». #}
                    {% include '_molecules/nav-item/nav-item.html.twig' with {
                        label: 'Parrainage', icon: 'user-plus',
                        href: path('app_settings_referral'),
                        active: currentRoute starts with 'app_settings_referral',
                        collapsed: collapsed, size: navItemSize
                    } %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with {
                        label: 'Transactions', icon: 'wallet',
                        href: path('app_commercial_transactions'),
                        active: currentRoute starts with 'app_commercial_transactions',
                        collapsed: collapsed, size: navItemSize
                    } %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with {
                        label: 'Mes paiements', icon: 'check',
                        href: path('app_commercial_paiements'),
                        active: currentRoute starts with 'app_commercial_paiements',
                        collapsed: collapsed, size: navItemSize
                    } %}
                </div>
            {% endif %}

            {# ===== GESTION (manager, collapsible) ===== #}
            {% if isManager and companyUuid %}
                <div class="mt-4 group-data-[collapsed=true]/sidebar:mt-2"
                     data-controller="shared--collapsible"
                     data-shared--collapsible-open-value="{{ isOnMgrRoute ? 'true' : 'false' }}">

                    <button type="button"
                            data-action="click->shared--collapsible#toggle"
                            class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg
                                   text-gray-400/80 hover:text-primary-dark hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.15)_0%,rgba(58,158,235,0.12)_100%)]
                                   transition-all duration-200 group-data-[collapsed=true]/sidebar:hidden">
                        <span class="text-[10px] font-bold uppercase tracking-[0.12em]">Gestion</span>
                        <span data-shared--collapsible-target="icon" class="opacity-60 shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: 'current' } only %}
                        </span>
                    </button>

                    <div data-shared--collapsible-target="content" class="group-data-[collapsed=true]/sidebar:!block">
                        <div class="flex flex-col mt-0.5 ml-2 pl-2 border-l border-primary/10
                                    group-data-[collapsed=true]/sidebar:ml-0 group-data-[collapsed=true]/sidebar:pl-0 group-data-[collapsed=true]/sidebar:border-none">
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Mon entreprise', icon: 'bubul-entreprise',
                                href: path('admin_company_show', {uuid: companyUuid}),
                                active: currentRoute == 'admin_company_show',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Contrats', icon: 'bubul-contrat',
                                href: path('admin_contract_list'),
                                active: currentRoute starts with 'admin_contract',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Utilisateurs', icon: 'bubul-utilisateur',
                                href: path('admin_user_list'),
                                active: currentRoute starts with 'admin_user',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Tokens', icon: 'token',
                                href: path('admin_company_tokens', {uuid: companyUuid}),
                                active: currentRoute == 'admin_company_tokens',
                                collapsed: collapsed, size: navItemSize
                            } %}
                        </div>
                    </div>
                </div>
            {% endif %}

            {# ===== ADMINISTRATION (admin only, collapsible) ===== #}
            {% if isAdmin %}
                {% set isOnAdminMgmtRoute = currentRoute starts with 'admin_company' or currentRoute starts with 'admin_user' or currentRoute starts with 'admin_contract' or currentRoute starts with 'admin_commercial' %}
                {% set isOnConfigRoute = currentRoute starts with 'admin_tool' or currentRoute starts with 'admin_plan' or currentRoute starts with 'admin_announcement' or currentRoute starts with 'admin_slidia_template' %}

                {# Gestion des utilisateurs et entreprises #}
                <div class="mt-4 group-data-[collapsed=true]/sidebar:mt-2"
                     data-controller="shared--collapsible"
                     data-shared--collapsible-open-value="{{ isOnAdminMgmtRoute ? 'true' : 'false' }}">

                    <button type="button"
                            data-action="click->shared--collapsible#toggle"
                            class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg
                                   text-gray-400/80 hover:text-primary-dark hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.15)_0%,rgba(58,158,235,0.12)_100%)]
                                   transition-all duration-200 group-data-[collapsed=true]/sidebar:hidden">
                        <span class="text-[10px] font-bold uppercase tracking-[0.12em]">Administration</span>
                        <span data-shared--collapsible-target="icon" class="opacity-60 shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: 'current' } only %}
                        </span>
                    </button>

                    <div data-shared--collapsible-target="content" class="group-data-[collapsed=true]/sidebar:!block">
                        <div class="flex flex-col mt-0.5 ml-2 pl-2 border-l border-primary/10
                                    group-data-[collapsed=true]/sidebar:ml-0 group-data-[collapsed=true]/sidebar:pl-0 group-data-[collapsed=true]/sidebar:border-none">
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Entreprises', icon: 'bubul-entreprise',
                                href: path('admin_company_list'),
                                active: currentRoute starts with 'admin_company',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Utilisateurs', icon: 'bubul-utilisateur',
                                href: path('admin_user_list'),
                                active: currentRoute starts with 'admin_user',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Contrats', icon: 'bubul-contrat',
                                href: path('admin_contract_list'),
                                active: currentRoute starts with 'admin_contract',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Commerciaux', icon: 'user-id',
                                href: path('admin_commercial_list'),
                                active: currentRoute starts with 'admin_commercial',
                                badge: commercial_pending_payouts_badge(),
                                badgeVariant: 'count',
                                collapsed: collapsed, size: navItemSize
                            } %}
                        </div>
                    </div>
                </div>

                {# Configuration plateforme : Outils + Offres (admin only) #}
                <div class="mt-4 group-data-[collapsed=true]/sidebar:mt-2"
                     data-controller="shared--collapsible"
                     data-shared--collapsible-open-value="{{ isOnConfigRoute ? 'true' : 'false' }}">

                    <button type="button"
                            data-action="click->shared--collapsible#toggle"
                            class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg
                                   text-gray-400/80 hover:text-primary-dark hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.15)_0%,rgba(58,158,235,0.12)_100%)]
                                   transition-all duration-200 group-data-[collapsed=true]/sidebar:hidden">
                        <span class="text-[10px] font-bold uppercase tracking-[0.12em]">Configuration</span>
                        <span data-shared--collapsible-target="icon" class="opacity-60 shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: 'current' } only %}
                        </span>
                    </button>

                    <div data-shared--collapsible-target="content" class="group-data-[collapsed=true]/sidebar:!block">
                        <div class="flex flex-col mt-0.5 ml-2 pl-2 border-l border-primary/10
                                    group-data-[collapsed=true]/sidebar:ml-0 group-data-[collapsed=true]/sidebar:pl-0 group-data-[collapsed=true]/sidebar:border-none">
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Outils', icon: 'settings',
                                href: path('admin_tool_list'),
                                active: currentRoute starts with 'admin_tool',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Offres', icon: 'wallet',
                                href: path('admin_plan_list'),
                                active: currentRoute starts with 'admin_plan',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Annonces', icon: 'bell',
                                href: path('admin_announcement_list'),
                                active: currentRoute starts with 'admin_announcement',
                                collapsed: collapsed, size: navItemSize
                            } %}
                            {% include '_molecules/nav-item/nav-item.html.twig' with {
                                label: 'Masques Slidia', icon: 'bubul-slidia',
                                href: path('admin_slidia_template_list'),
                                active: currentRoute starts with 'admin_slidia_template',
                                collapsed: collapsed, size: navItemSize
                            } %}
                        </div>
                    </div>
                </div>

                {# Dev / Support #}
                <div class="px-3 mt-5 mb-1 group-data-[collapsed=true]/sidebar:hidden">
                    <span class="text-[10px] font-bold uppercase tracking-[0.12em] text-gray-400/80">Dev · Support</span>
                </div>
                <div class="flex flex-col">
                    {% set adminSupportUnread = support_unread_count_admin() %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with {
                        label: 'Support', icon: 'message',
                        href: path('admin_support_index'),
                        active: currentRoute starts with 'admin_support',
                        badge: adminSupportUnread > 0 ? (adminSupportUnread ~ '') : null,
                        badgeVariant: 'count',
                        collapsed: collapsed, size: navItemSize
                    } %}
                    {% include '_molecules/nav-item/nav-item.html.twig' with {
                        label: 'Design System', icon: 'widget-add',
                        href: path('admin_design_system'),
                        active: currentRoute starts with 'admin_design_system',
                        collapsed: collapsed, size: navItemSize
                    } %}
                </div>
            {% endif %}

        {% endif %}

    </div>{# fin inner #}
    </div>{# fin overflow-y-auto #}

    {# ===== FOOTER FIXE ===== #}
    <div class="border-t {{ isSam ? 'border-violet-200/40' : 'border-primary/10' }} pt-3 pb-3 px-4 flex flex-col gap-2">

        {# ===== Carte utilisateur unifiée (nom + plan + menu d'actions) ===== #}

        {# 1. Couleur d'accent du plan #}
        {% if isAdmin %}
            {% set planGradient = plan_gradients['system-admin'] %}
            {% set planLabel = 'Bubul' %}
        {% elseif app.user.company %}
            {% set planGradient = plan_gradients['system-b2b'] %}
            {% set planLabel = app.user.company.name %}
        {% elseif app.user.subscription and app.user.subscription.status == 'canceled' %}
            {% set planGradient = plan_gradients['system-canceled'] %}
            {% set planLabel = (app.user.plan ? app.user.plan.name : 'Freemium') ~ ' · Annulé' %}
        {% else %}
            {% set planGradient = app.user.plan ? app.user.plan.gradientStyle : plan_gradients['freemium'] %}
            {% set planLabel = app.user.plan ? app.user.plan.name : 'Freemium' %}
        {% endif %}

        {# 2. Composition du menu — items conditionnels selon contexte / accès #}
        {% set canSwitchToSam = not isSam and (isAdmin or (isManager and can_access_tool('sam'))) %}
        {% set userSupportUnread = isSam ? 0 : support_unread_count_user() %}

        {# Items du popover — ordre logique :
           paramètres → abonnement → switch plateforme → support #}
        {% set menuItems = [
            {
                label: 'Paramètres',
                href: isSam ? path('app_sam_settings') : path('app_settings'),
                icon: 'settings',
                tint: 'default'
            },
            { label: 'Mon abonnement',  href: path('app_settings_subscription'),  icon: 'wallet', tint: 'default' },
            { label: 'Notifications',   href: path('app_settings_notifications'), icon: 'bell',   tint: 'default' },
            { label: 'Badges',          href: path('app_settings_badges'),        icon: 'crown',  tint: 'default' }
        ] %}

        {% if isSam %}
            {% set menuItems = menuItems|merge([
                { label: 'Aller sur Bubul', href: path('app_dashboard'), logo: 'simple', tint: 'primary' }
            ]) %}
        {% elseif canSwitchToSam %}
            {% set menuItems = menuItems|merge([
                { label: 'Aller sur SAM', href: path('app_sam_index'), logo: 'simple', logoTint: 'cohorts', tint: 'cohorts' }
            ]) %}
        {% endif %}

        {% set menuItems = menuItems|merge([
            {
                label: 'Support',
                href: path('app_support_index'),
                icon: 'message',
                tint: 'default',
                badge: userSupportUnread
            }
        ]) %}

        {# CTA de montée en offre — proposé à TOUT utilisateur B2C à court de tokens,
           quel que soit son plan actuel (l'ancienne condition le réservait aux comptes
           sans plan, donc au seul freemium). Un compte B2B est exclu : son volume est
           porté par le contrat de son entreprise, il n'upgrade pas lui-même.
           Même libellé et même dégradé que le CTA du dashboard, pour n'avoir qu'une
           seule identité visuelle d'upgrade. #}
        {%- set tokensRemaining = app.user.userToken ? app.user.userToken.tokensRemaining : 0 -%}
        {%- set currentPlanSlug = app.user.plan ? app.user.plan.slug : 'freemium' -%}
        {%- set nextPlanName = {'freemium': 'Pro', 'starter': 'Pro', 'pro': 'Expert'}[currentPlanSlug] ?? null -%}
        {% if not isAdmin and not app.user.company and nextPlanName and tokensRemaining < low_tokens_upgrade_threshold %}
            <div class="px-3 pb-2 group-data-[collapsed=true]/sidebar:hidden">
                <a href="{{ path('app_upgrade') }}"
                   style="background: linear-gradient(135deg, #0d1b3e 0%, #0C81E4 100%);"
                   class="flex items-center justify-center gap-1.5 w-full px-4 py-2.5 rounded-xl text-sm font-semibold text-white whitespace-nowrap shadow-sm transition-all duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)] hover:brightness-110">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'crown', size: 'xs', color: 'white' } only %}
                    Passer en {{ nextPlanName }}
                </a>
            </div>
        {% endif %}

        {% include '_molecules/sidebar-user-card/sidebar-user-card.html.twig' with {
            name: app.user.fullName ?: app.user.email,
            planLabel: planLabel,
            planGradient: planGradient,
            variant: variant,
            menuItems: menuItems
        } only %}

        {# Version #}
        <div class="px-4 text-center group-data-[collapsed=true]/sidebar:hidden">
            <span class="text-[10px] text-gray-300">v{{ version }}</span>
        </div>
    </div>
</nav>