{% comment %}
Wizard progress indicator. Renders a numbered, clickable pill row that
reflects the current step from the surrounding wizardForm() Alpine scope.

Required:
  steps   — list of {n: int, title: str} dicts (1-indexed)

Reads (from Alpine scope):
  step          — current step number
  goTo(n)       — backward jumps freely; forward jumps run per-step validation

Wrap your form with `x-data="wizardForm({ steps: <total> })"` and pass the
same `steps` list both here and to wizard_nav.html.
{% endcomment %}
<ol class="wizard-progress flex flex-wrap items-center gap-2 border-b border-ruforum-border px-6 py-5"
    aria-label="Form progress">
  {% for s in steps %}
    <li>
      <button type="button"
              x-on:click="goTo({{ s.n }})"
              :class="{
                'wizard-progress__pill--active': step === {{ s.n }},
                'wizard-progress__pill--done':   step >  {{ s.n }}
              }"
              :aria-current="step === {{ s.n }} ? 'step' : null"
              class="wizard-progress__pill">
        <span class="wizard-progress__num">{{ s.n }}</span>
        <span class="wizard-progress__title">{{ s.title }}</span>
      </button>
    </li>
    {% if not forloop.last %}<li class="wizard-progress__sep" aria-hidden="true">›</li>{% endif %}
  {% endfor %}
</ol>