{% load i18n %}

<div class="navbar navbar-static-top navbar-inverse nav-checkout">
    <div class="navbar-inner">
        <ul class="nav row-fluid">
            {% spaceless %}
                <li class="step1 {% if step == 1 %}active{% else %}{% if step == 2 %}previous{% else %}{% if step > 1 %}visited{% else %}disabled{% endif %}{% endif %}{% endif %} span3">
                    {% if step == 2 or step == 3 or step == 4 %}
                        <a href="{% url 'checkout:shipping-address' %}">
                            <i class="visible-phone icon-chevron-left"></i>
                            <span>
                                {% trans "1. Shipping address" %}
                            </span>
                        </a>
                    {% else %}
                        <span class="navbar-text">
                            {%  trans "1. Shipping address" %}
                        </span>
                    {% endif %}
                </li>

                <li class="step2 {% if step == 2 %}active{% else %}{% if step == 3 %}previous{% else %}{% if step > 2 %}visited{% else %}disabled{% endif %}{% endif %}{% endif %} span3">
                    {% if step == 3 or step == 4 %}
                        <a href="{% url 'checkout:shipping-method' %}">
                            <i class="visible-phone icon-chevron-left"></i>
                            <span>
                                {% trans "2. Shipping method" %}
                            </span>
                        </a>
                    {% else %}
                        <span class="navbar-text">
                            {%  trans "2. Shipping method" %}
                        </span>
                    {% endif %}
                </li>

                <li class="step3 {% if step == 3 %}active{% else %}{% if step == 4 %}previous{% else %}{% if step > 3 %}visited{% else %}disabled{% endif %}{% endif %}{% endif %} span3">
                    {% if step == 4 %}
                        <a href="{% url 'checkout:payment-details' %}">
                            <i class="visible-phone icon-chevron-left"></i>
                            <span>
                                {% trans "3. Payment" %}
                            </span>
                        </a>
                    {% else %}
                        <span class="navbar-text">
                            {%  trans "3. Payment" %}
                        </span>
                    {% endif %}
                </li>

                <li class="step4 {% if step == 4 %}active{% else %}disabled{% endif %} span3">
                    <span class="navbar-text">
                        {% trans "4. Confirmation" %}
                    </span>
                </li>
            {% endspaceless %}
        </ul>
    </div><!-- /navbar-inner -->
</div><!-- /navbar -->