{# Step circles + connectors. Driven by wizard_steps, so any number of steps works. #}
<div class="wizard-steps">
    {% for s in wizard_steps %}
    {% if not loop.first %}
    <div class="wizard-step-connector {% if step >= s.index %}active{% endif %}"></div>
    {% endif %}
    <div class="wizard-step-indicator {% if step >= s.index %}active{% endif %} {% if step > s.index %}completed{% endif %}">
        <div class="step-number">{{ s.index }}</div>
        <div class="step-label">{{ s.label }}</div>
    </div>
    {% endfor %}
</div>