{#
 # ============================================================================
 # MOLECULE: EXPAND TOGGLE
 # ============================================================================
 #
 # Bouton "Tout déplier / Tout replier" pour les listes d'accordéons.
 # Gère le swap d'icône et de label selon l'état (expanded/collapsed).
 # Doit être associé à une fonction JS qui lit/écrit data-expanded.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # Aucun — SVG inline pour éviter la dépendance à l'atom icon
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut          | Description                          |
 # |---------------|---------|-----------------|--------------------------------------|
 # | id            | string  | 'expand-toggle' | ID HTML du bouton (ciblage JS)        |
 # | onclick       | string  | ''              | Fonction JS à appeler au clic         |
 # | labelExpand   | string  | 'Tout déplier'  | Label quand tout est replié           |
 # | labelCollapse | string  | 'Tout replier'  | Label quand tout est déplié           |
 # | class         | string  | ''              | Classes additionnelles                |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Simple (avec fonction JS toggleAllSections()):
 # {% include '_molecules/expand-toggle/expand-toggle.html.twig' with {
 #     id: 'cd-toggle-all',
 #     onclick: 'toggleAllSections()'
 # } %}
 #
 # Labels personnalisés:
 # {% include '_molecules/expand-toggle/expand-toggle.html.twig' with {
 #     id: 'my-toggle',
 #     onclick: 'myToggleFn()',
 #     labelExpand: 'Développer tout',
 #     labelCollapse: 'Réduire tout'
 # } %}
 #
 # ============================================================================
 #}

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

{% set id            = id            ?? 'expand-toggle' %}
{% set onclick       = onclick       ?? '' %}
{% set labelExpand   = labelExpand   ?? 'Tout déplier' %}
{% set labelCollapse = labelCollapse ?? 'Tout replier' %}
{% set class         = class         ?? '' %}

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

<button type="button"
        id="{{ id }}"
        {% if onclick %}onclick="{{ onclick }}"{% endif %}
        data-expanded="false"
        class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-gray-500 bg-gray-100 hover:bg-gray-200 transition-colors shrink-0 {{ class }}">

    {# Icône état replié (flèche bas) — visible par défaut #}
    <svg id="{{ id }}-icon-expand"
         width="14" height="14" viewBox="0 0 24 24"
         fill="none" stroke="currentColor" stroke-width="2.5">
        <polyline points="6 9 12 15 18 9"/>
    </svg>

    {# Icône état déplié (flèche haut) — masquée par défaut #}
    <svg id="{{ id }}-icon-collapse"
         width="14" height="14" viewBox="0 0 24 24"
         fill="none" stroke="currentColor" stroke-width="2.5"
         class="hidden">
        <polyline points="18 15 12 9 6 15"/>
    </svg>

    <span id="{{ id }}-label">{{ labelExpand }}</span>
</button>