{% load i18n %}
<header id="steps" class="wcs-steps steps-{{page_labels|length}}">
  <h2 id="steps--title">{% trans "Steps" %}</h2>
  <div role="progressbar"
    aria-labelledby="steps--title"
    aria-valuemin="1"
    aria-valuenow="{{ current_page_no }}"
    aria-valuemax="{{ page_labels|length }}"
    aria-valuetext="Étape {{ current_page_no }} : {{ page_labels|get:current_page_index }}">
    {% block steps-list %}
      <ol class="wcs-steps--list">
        {% for page_label in page_labels %}
          {% spaceless %}
            <li
              class="wcs-step
                {% if forloop.first %}first{% endif %}
                {% if forloop.last %}last{% endif %}
                {% if forloop.counter == current_page_no %}current{% endif %}
                {% if forloop.counter < current_page_no %}step-before{% endif %}
                {% if forloop.counter > current_page_no %}step-after{% endif %}" >
              <abbr
                aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
                title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
                class="marker wcs-step--marker">
                <span class="wcs-step--marker-nb">
                  {{ forloop.counter }}
                </span>
                <span class="wcs-step--marker-total">
                  {{ page_labels|length }}
                </span>
              </abbr>
              <span class="label wcs-step--label">{{ page_label }}
                {% if forloop.counter == current_page_no %}<span class="sr-only">(étape courante)</span>{% endif %}
              </span>
            </li>
          {% endspaceless %}
        {% endfor %}
      </ol>
    {% endblock %}
  </div>
</header>
