{% load i18n checkout_tags %}

<div class="checkout-nav text-center row">
    <div class="col no-margin no-padding">
        <div class="progress-block {% step_class 1 %}"></div>
        <a href="{% url 'checkout:shipping-address' %}">
            <i class="fa fa-address-book d-sm-inline-block mr-1"></i>
            <small class="d-none d-md-inline-block">{% trans 'Shipping Address' %}</small>
        </a>
    </div>
    <div class="col no-margin no-padding">
        <div class="progress-block {% step_class 2 %}"></div>
        <a href="{% url 'checkout:shipping-method' %}">
            <i class="fa fa-truck d-sm-inline-block mr-1"></i>
            <small class="d-none d-md-inline-block">{% trans 'Shipping Method' %}</small>
        </a>
    </div>
    <div class="col no-margin no-padding">
        <div class="progress-block {% step_class 3 %}"></div>
        <a href="{% url 'checkout:payment-details' %}">
            <i class="fa fa-credit-card d-sm-inline-block mr-1"></i>
            <small class="d-none d-md-inline-block">{% trans 'Payment' %}</small>
        </a>
    </div>
    <div class="col no-margin no-padding">
        <div class="progress-block {% step_class 4 %}"></div>
        <a href="{% url 'checkout:preview' %}">
            <i class="fa fa-list d-sm-inline-block mr-1"></i>
            <small class="d-none d-md-inline-block">{% trans 'Preview' %}</small>
        </a>
    </div>
    <div class="col no-margin no-padding">
        <div class="progress-block {% step_class 5 %}"></div>
        <a href="#">
            <i class="fa fa-check-square d-sm-inline-block mr-1"></i>
            <small class="d-none d-md-inline-block">{% trans 'Confirmation' %}</small>
        </a>
    </div>
</div>

{% comment %}
{% spaceless %}
    <ul class="nav flex-row navbar-nav w-100 nav-justified checkout-nav" role="tablist">
        <li role="presentation" 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 class="nav-link d-flex flex-row" href="{% url 'checkout:shipping-address' %}">
                    <span class="flex-grow-1">{% trans "Shipping address" %}</span>
                    <span>
                        <i class="fa fa-chevron-right"></i>
                    </span>
                </a>
            {% else %}
                <span class="navbar-text">
                        {% trans "Shipping address" %}
                    </span>
            {% endif %}
        </li>

        <li role="presentation" 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 class="nav-link d-flex flex-row" href="{% url 'checkout:shipping-method' %}">
                    <span class="flex-grow-1">{% trans "Shipping method" %}</span>
                    <span>
                        <i class="fa fa-chevron-right"></i>
                    </span>
                </a>
            {% else %}
                <span class="navbar-text">
                        {% trans "Shipping method" %}
                    </span>
            {% endif %}
        </li>

        <li role="presentation" 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 class="nav-link d-flex flex-row" href="{% url 'checkout:payment-details' %}">
                    <span class="flex-grow-1">{% trans "Payment" %}</span>
                    <span>
                        <i class="fa fa-chevron-right"></i>
                    </span>
                </a>
            {% else %}
                <span class="navbar-text">
                        {% trans "Payment" %}
                    </span>
            {% endif %}
        </li>

        <li role="presentation" class="nav-item step4 {% if step == 4 %}active{% else %}disabled{% endif %} ">
            <a href="#" class="nav-link d-flex flex-row">
                <span class="flex-grow-1">{% trans "Preview" %}</span>
                <span><i class="fa fa-chevron-right"></i></span>
            </a>
        </li>

        <li role="presentation" class="nav-item step5 {% if step == 5 %}active{% else %}disabled{% endif %} ">
            <a href="#" class="nav-link flex-row d-flex">
                <span class="flex-grow-1">{% trans "Confirmation" %}</span>
            </a>
        </li>
    </ul>
    <div class="space-2"></div>
{% endspaceless %}
{% endcomment %}