{# Onboarding step rail. Expects `current` (int 1..5). #}
{% set steps = [
    'onboarding.steps.verify'|trans({}, 'cms'),
    'onboarding.steps.welcome'|trans({}, 'cms'),
    'onboarding.steps.children'|trans({}, 'cms'),
    'onboarding.steps.address'|trans({}, 'cms'),
    'onboarding.steps.done'|trans({}, 'cms'),
] %}

<div class="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
    <div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3">

        <ol class="flex items-center gap-1 overflow-x-auto" aria-label="{{ 'onboarding.steps.ariaLabel'|trans({}, 'cms') }}">
            {% for label in steps %}
                {% set n = loop.index %}
                {% set state = n < current ? 'done' : (n == current ? 'current' : 'upcoming') %}
                <li class="flex items-center gap-1">
                    <span class="inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold whitespace-nowrap {{ state == 'current' ? 'bg-primary-50 text-primary-700 dark:bg-primary-600/20 dark:text-primary-200' : (state == 'done' ? 'text-gray-500 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500') }}"
                          {{ state == 'current' ? 'aria-current="step"' : '' }}>
                        <span class="grid h-6 w-6 place-items-center rounded-full text-[11px] font-bold {{ state == 'current' ? 'bg-primary-600 text-white' : (state == 'done' ? 'bg-emerald-600 text-white' : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-300') }}">
                            {% if state == 'done' %}
                                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
                            {% else %}
                                {{ n }}
                            {% endif %}
                        </span>
                        <span class="hidden sm:inline">{{ label }}</span>
                    </span>
                    {% if not loop.last %}
                        <span class="hidden h-px w-3.5 bg-gray-200 dark:bg-gray-700 sm:block"></span>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>

        <div class="flex items-center gap-2.5 whitespace-nowrap text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400" aria-live="polite">
            <span>{{ current <= 4 ? 'onboarding.progress'|trans({step: current, total: 4}, 'cms') : 'onboarding.progressDone'|trans({}, 'cms') }}</span>
            <span class="block h-1.5 w-24 overflow-hidden rounded bg-gray-200 dark:bg-gray-700">
                <span class="block h-full rounded bg-primary-600 transition-all" style="width: {{ current <= 4 ? (current / 4 * 100) : 100 }}%"></span>
            </span>
        </div>

    </div>
</div>
