{% 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 class="nav-item step1 {% if step == 1 %}active{% else %}{% if step == 2 %}previous{% else %}{% if step > 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 class="nav-item step2 {% if step == 2 %}active{% else %}{% if step == 3 %}previous{% else %}{% if step > 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 class="nav-item step3 {% if step == 3 %}active{% else %}{% if step == 4 %}previous{% else %}{% if step > 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 -->
