{% load i18n %}
<nav aria-label="{% trans "Checkout steps" context "checkoutflow" %}">
<ol class="checkout-flow">
    {% for step in checkout_flow %}
        <li class="checkout-step {% if step.c_is_before %}step-done{% elif request.resolver_match.kwargs.step == step.identifier %}step-current{% endif %}">
            {% if step.c_is_before %}<a href="{{ step.c_resolved_url }}">{% endif %}
            <div class="checkout-step-icon">
                <span class="fa {% if step.c_is_before %}fa-check{% elif step.icon %}fa-{{ step.icon }}{% else %}fa-pencil{% endif %}" aria-hidden="true"></span>
            </div>
            <div class="checkout-step-label">
                {% if step.c_is_before %}
                    <span class="sr-only">{% trans "Completed:" %}</span>
                {% elif request.resolver_match.kwargs.step == step.identifier %}
                    <span class="sr-only">{% trans "Current:" %}</span>
                {% endif %}
                {{ step.label }}
            </div>
            {% if step.c_is_before %}</a>{% endif %}
        </li>
    {% endfor %}
    <li class="checkout-step">
        <div class="checkout-step-icon">
            <span class="fa fa-ticket" aria-hidden="true"></span>
        </div>
        <div class="checkout-step-label">
            {% trans "Order confirmed" context "checkoutflow" %}
        </div>
    </li>
</ol>
</nav>
