{% load i18n %}
{# Tabler-style stepper. Inaccessible steps are rendered non-interactive. #}
<ul class="steps steps-counter mb-4">
  {% for item in step_items %}
    <li class="step-item {% if item.active %}active{% endif %}">
      {% if item.accessible and not item.active %}
        <a hx-get="{{ item.url }}"
           hx-target="#wizard-body"
           hx-swap="innerHTML"
           hx-push-url="{{ item.url }}"
           href="{{ item.url }}">
          {{ item.title }}
        </a>
      {% else %}
        <span class="step-item-label{% if not item.accessible %} text-muted{% endif %}">{{ item.title }}</span>
      {% endif %}
    </li>
  {% endfor %}
</ul>