{# Désactiver la navigation si le formulaire a été soumis #}
{% set isDisabled = isSubmitted|default(false) %}

<div class="bg-white p-6 rounded-lg shadow-md">
    <div class="flex justify-between items-center mb-6">
        <span class="text-base font-medium text-blue-700">Progression</span>
        <span class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">{{ currentStep }}/{{ totalSteps }}</span>
    </div>

    {# Étapes verticales avec barre de progression à gauche #}
    <div class="relative flex py-4 pl-12 space-y-0">
        {# Barre de progression verticale à gauche des étapes #}
        <div class="absolute left-2 top-5 bottom-5 w-3 bg-gray-200 rounded-full"></div>
        <div class="absolute left-2 top-5 w-3 bg-blue-600 rounded-full"
             style="height: calc((100% - 40px) * {{ (currentStep - 1) / (totalSteps - 1) }});"></div>

        {# Conteneur des étapes avec espacement vertical #}
        <div class="space-y-16 w-full">
            {% for step in 1..totalSteps %}
                <div class="flex items-center group
                     {% if isDisabled %}cursor-not-allowed opacity-50{% else %}cursor-pointer{% endif %}"
                        {% if not isDisabled %}
                    data-action="click->live#action"
                    data-live-action-param="goToStep"
                    data-live-step-param="{{ step }}"
                        {% endif %}>

                    <div class="{{ currentStep >= step ? 'bg-blue-600' : 'bg-gray-300' }}
                        rounded-full h-10 w-10 flex items-center justify-center
                        text-white font-medium mr-4">
                        {{ step }}
                    </div>
                    <p class="{{ currentStep >= step ? 'text-blue-600 font-medium' : 'text-gray-500' }}
                      text-base {% if not isDisabled %}hover:underline{% endif %}">
                        {{ stepLabels[step] }}
                    </p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>