{#
 # ============================================================================
 # MOLECULE: NAV GROUP
 # ============================================================================
 #
 # Groupe de navigation avec sous-éléments repliables.
 # S'ouvre/ferme au clic. S'ouvre automatiquement si un enfant est actif.
 # Masqué entièrement en mode sidebar collapsed.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type   | Défaut   | Description                           |
 # |-------------|--------|----------|---------------------------------------|
 # | label       | string | (requis) | Label du groupe                       |
 # | icon        | string | null     | Icône du groupe                       |
 # | colorScheme | string | 'blue'   | 'blue' ou 'violet'                    |
 # | active      | bool   | false    | Un enfant est-il actif ?              |
 # | children    | array  | []       | Sous-éléments {label, href, icon, active} |
 #
 # ============================================================================
#}

{% set label = label ?? 'Groupe' %}
{% set icon = icon ?? null %}
{% set colorScheme = colorScheme ?? 'blue' %}
{% set active = active ?? false %}
{% set children = children ?? [] %}

{% if colorScheme == 'violet' %}
    {% set hoverBg     = 'hover:bg-[linear-gradient(135deg,rgba(139,92,246,0.12)_0%,rgba(167,139,250,0.08)_100%)] hover:text-cohorts-dark' %}
    {% set accent      = 'cohorts' %}
    {% set lineColor   = 'bg-cohorts/20' %}
    {% set childActive = 'bg-cohorts/10 text-cohorts-dark font-semibold' %}
    {% set childHover  = 'hover:bg-cohorts/5 hover:text-cohorts-dark' %}
{% else %}
    {% set hoverBg     = 'hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.12)_0%,rgba(58,158,235,0.08)_100%)] hover:text-primary-dark' %}
    {% set accent      = 'primary' %}
    {% set lineColor   = 'bg-primary/20' %}
    {% set childActive = 'bg-primary/10 text-primary-dark font-semibold' %}
    {% set childHover  = 'hover:bg-primary/5 hover:text-primary-dark' %}
{% endif %}

{# Masqué en sidebar collapsed #}
<div class="group-data-[collapsed=true]/sidebar:hidden"
     data-controller="shared--nav-group">

    {# ── Bouton parent — même taille que nav-item lg ── #}
    <button
        type="button"
        class="flex items-center gap-5 w-full min-w-0 rounded-xl px-7 py-[14px] font-secondary font-medium text-sm text-gray-600 transition-[background,color] duration-300 {{ hoverBg }}"
        data-action="click->shared--nav-group#toggle"
    >
        {% if icon %}
            <span class="flex-shrink-0 flex items-center justify-center">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: icon,
                    size: 'md',
                    color: accent,
                    opacitySecondary: '0.35'
                } only %}
            </span>
        {% endif %}

        <span class="flex-1 text-left truncate">{{ label }}</span>

        <span class="flex-shrink-0 opacity-40 transition-transform duration-300 data-[open=true]:rotate-180"
              data-shared--nav-group-target="chevron">
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'chevron-down',
                size: 'xs',
                color: 'gray'
            } only %}
        </span>
    </button>

    {# ── Sous-éléments ── #}
    <div class="overflow-hidden transition-[max-height] duration-300 ease-out"
         style="max-height: 0;"
         data-shared--nav-group-target="content">

        <div class="ml-[3.25rem] mr-2 mb-2 min-w-0">
            <div class="flex flex-col gap-1">
                {% for child in children %}
                    {% set isActive = child.active ?? false %}
                    <a href="{{ child.href ?? '#' }}"
                       class="flex items-center gap-2 px-3 py-2.5 rounded-xl font-secondary font-medium text-sm min-w-0 overflow-hidden transition-[background,color] duration-300 {{ isActive ? childActive : ('text-gray-500 ' ~ childHover) }}"
                       {% if isActive %}aria-current="page"{% endif %}>

                        {% if child.icon ?? null %}
                            <span class="flex-shrink-0 flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: child.icon,
                                    size: 'sm',
                                    color: isActive ? accent : 'gray',
                                    opacitySecondary: isActive ? '0.6' : '0.35'
                                } only %}
                            </span>
                        {% endif %}

                        <span class="truncate min-w-0">{{ child.label }}</span>
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>