{% load i18n %}
<nav class="navbar navbar-static-top nav-checkout navbar-expand-md navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
        {% spaceless %}
            <li >
                1 %}visited
            {% else %}
                disabled
            {% endif %}
        {% endif %}
    {% endif %}
    ">
    {% if step == 2 or step == 3 or step == 4 %}
        <a href="{% url 'checkout:shipping-address' %}" class="nav-link">
            <i class="fas fa-chevron-right"></i>
            <span>{% trans "1. Shipping address" %}</span>
        </a>
    {% else %}
        <span class="navbar-text">{% trans "1. Shipping address" %}</span>
    {% endif %}
</li>
<li >
    2 %}visited
{% else %}
    disabled
{% endif %}
{% endif %}
{% endif %}
">
{% if step == 3 or step == 4 %}
    <a href="{% url 'checkout:shipping-method' %}" class="nav-link">
        <i class="fas fa-chevron-right"></i>
        <span>{% trans "2. Shipping method" %}</span>
    </a>
{% else %}
    <span class="navbar-text">{% trans "2. Shipping method" %}</span>
{% endif %}
</li>
<li >
    3 %}visited
{% else %}
    disabled
{% endif %}
{% endif %}
{% endif %}
">
{% if step == 4 %}
    <a href="{% url 'checkout:payment-details' %}" class="nav-link">
        <i class="fas fa-chevron-right"></i>
        <span>{% trans "3. Payment" %}</span>
    </a>
{% else %}
    <span class="navbar-text">{% trans "3. Payment" %}</span>
{% endif %}
</li>
<li class="nav-item step4 {% if step == 4 %}active{% else %}disabled{% endif %} ">
    <span class="navbar-text">{% trans "4. Preview" %}</span>
</li>
<li class="nav-item step5 {% if step == 5 %}active{% else %}disabled{% endif %} ">
    <span class="navbar-text">{% trans "5. Confirmation" %}</span>
</li>
{% endspaceless %}
</ul>
<!-- /navbar-inner -->
</nav>
<!-- /navbar -->
