{#
 # ============================================================================
 # MOLECULE: STEP-NAV
 # ============================================================================
 #
 # La barre de navigation d'un parcours en étapes : revenir en arrière à gauche,
 # passer à l'étape suivante à droite. C'est le geste que Moodia avait déjà et que
 # Slidia et Scormia adoptent ici, pour qu'un utilisateur qui passe d'un outil à
 # l'autre retrouve les mêmes commandes au même endroit.
 #
 # À ne pas confondre avec `_molecules/step-indicator` et `_molecules/stepper`, qui
 # affichent la PROGRESSION (où j'en suis) sans rien permettre de faire. Celle-ci
 # n'affiche rien et ne fait qu'agir.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/button/button.html.twig  (variant `back` à gauche, `primary` ou
 #                                    `custom-gradient` à droite)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type   | Défaut   | Description                                  |
 # |-----------|--------|----------|----------------------------------------------|
 # | next      | object | (requis) | Le bouton de droite — voir plus bas          |
 # | back      | object | null     | Le bouton de gauche. Omis : pas de retour    |
 # | hint      | string | null     | Texte d'aide, à droite du retour             |
 # | class     | string | ''       | Classes additionnelles sur la ligne          |
 #
 # `next` — tout est transmis tel quel à l'atome, rien n'est réécrit :
 # | label        | string | (requis) | Libellé                                     |
 # | href         | string | null     | Rend un <a> au lieu d'un <button>           |
 # | type         | string | 'button' | 'submit' pour valider un formulaire         |
 # | disabled     | bool   | false    | Désactivé au rendu                          |
 # | attr         | object | {}       | Attributs du bouton (action, target…)       |
 # | labelAttr    | object | {}       | Attributs du <span> du libellé              |
 # | variant      | string | 'primary'| 'custom-gradient' avec gradientFrom/To      |
 # | gradientFrom | string | null     | Couleur de départ du dégradé                |
 # | gradientTo   | string | null     | Couleur d'arrivée du dégradé                |
 #
 # `back` — mêmes clés utiles ; le variant est toujours `back`, qui impose déjà
 # l'icône `arrow-left`, le rayon et le libellé « Retour » par défaut :
 # | label | string | 'Retour' | Libellé                                          |
 # | href  | string | null     | Rend un <a> (retour serveur)                     |
 # | attr  | object | {}       | Attributs (par ex. une action Stimulus)          |
 #
 # ============================================================================
 # CE QUE LA MOLÉCULE N'ENCADRE PAS
 # ============================================================================
 #
 # Elle rend la LIGNE de boutons, pas son enveloppe ni son espacement. Dans les trois
 # outils la barre est nue sur le fond de page, SOUS le conteneur principal — jamais
 # enfermée dans un pied de carte. C'est à l'appelant de fournir l'espacement qui la
 # sépare de ce qui précède, via `class` (`pt-6` chez Moodia, `pt-8` chez Slidia et
 # Scormia, dont la carte porte déjà son propre rembourrage).
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Wizard piloté en JavaScript (Moodia) :
 # {% include '_molecules/step-nav/step-nav.html.twig' with {
 #     back: { attr: { 'data-action': 'click->moodia--wizard#backToChoice' } },
 #     next: {
 #         label: 'Analyser le document',
 #         disabled: true,
 #         attr: {
 #             'data-action': 'click->moodia--wizard#continueToConfig',
 #             'data-moodia--wizard-target': 'pdfContinueBtn'
 #         }
 #     }
 # } only %}
 #
 # Formulaire serveur aux couleurs de l'outil (Slidia, Scormia) :
 # {% include '_molecules/step-nav/step-nav.html.twig' with {
 #     back: { href: path('app_slidia_new') },
 #     hint: 'La génération démarre dès la validation.',
 #     next: {
 #         label: 'Générer la présentation',
 #         type: 'submit',
 #         disabled: true,
 #         gradientFrom: sdColor.primary,
 #         gradientTo: sdColor.secondary,
 #         attr: { 'data-slidia--configure-target': 'submitBtn' }
 #     }
 # } only %}
 #
 # Un libellé réécrit en JavaScript (Scormia change son appel à l'action) :
 # next: { …, labelAttr: { 'data-scormia--configure-target': 'submitLabel' } }
 #
 # Avec un texte d'aide qui contient du balisage, en `embed` :
 # {% embed '_molecules/step-nav/step-nav.html.twig' with { next: {…} } only %}
 #     {% block hint %}Accent : <span class="font-bold">Indigo</span>{% endblock %}
 # {% endembed %}
 #}

{% set back = back ?? null %}
{% set hint = hint ?? null %}
{% set class = class ?? '' %}

<div class="flex items-center justify-between gap-4 {{ class }}">

    {# Zone de gauche : le retour, puis l'éventuel texte d'aide #}
    <div class="flex items-center gap-4 min-w-0">
        {% if back %}
            {% include '_atoms/button/button.html.twig' with {
                variant:  'back',
                label:    back.label ?? null,
                href:     back.href ?? null,
                type:     back.type ?? 'button',
                icon:     back.icon ?? null,
                disabled: back.disabled ?? false,
                class:    back.class ?? '',
                attr:     back.attr ?? {}
            } only %}
        {% endif %}

        {% block hint %}
            {% if hint %}
                <p class="text-sm text-gray-500 min-w-0">{{ hint }}</p>
            {% endif %}
        {% endblock %}
    </div>

    {# Zone de droite : l'étape suivante. `size`, `radius` et la flèche font le geste
       commun aux trois outils — l'appelant ne fournit que le libellé, la couleur et
       son câblage. Il peut les redéfinir, mais n'a pas à les répéter. #}
    {% block next %}
        {% include '_atoms/button/button.html.twig' with {
            label:        next.label,
            variant:      next.variant ?? (next.gradientFrom is defined and next.gradientFrom ? 'custom-gradient' : 'primary'),
            gradientFrom: next.gradientFrom ?? null,
            gradientTo:   next.gradientTo ?? null,
            size:         next.size ?? 'lg',
            radius:       next.radius ?? 'xl',
            icon:         next.icon ?? 'arrow-right',
            iconPosition: 'right',
            iconSize:     next.iconSize ?? 'lg',
            href:         next.href ?? null,
            type:         next.type ?? 'button',
            disabled:     next.disabled ?? false,
            class:        next.class ?? '',
            attr:         next.attr ?? {},
            labelAttr:    next.labelAttr ?? {}
        } only %}
    {% endblock %}

</div>