{% if active is not defined or active == 'address' %}
    {% set steps = {'address': 'active', 'select_shipping': 'disabled', 'select_payment': 'disabled', 'complete': 'disabled'} %}
{% elseif active == 'select_shipping' %}
    {% set steps = {'address': 'completed', 'select_shipping': 'active', 'select_payment': 'disabled', 'complete': 'disabled'} %}
{% elseif active == 'select_payment' %}
    {% set steps = {'address': 'completed', 'select_shipping': 'completed', 'select_payment': 'active', 'complete': 'disabled'} %}
{% else %}
    {% set steps = {'address': 'completed', 'select_shipping': 'completed', 'select_payment': 'completed', 'complete': 'active'} %}
{% endif %}

{% set order_requires_payment = commerce_is_payment_required(cart) %}
{% set order_requires_shipping = commerce_is_shipping_required(cart) %}

{% set steps_count = 'four' %}
{% if not order_requires_payment and not order_requires_shipping %}
    {% set steps_count = 'two' %}
{% elseif not order_requires_payment or not order_requires_shipping %}
    {% set steps_count = 'three' %}
{% endif %}

<div class="checkout-steps checkout-steps-{{ steps_count }}">
    <div class="checkout-steps-item {{ steps['address'] }}">
        <a href="{{ path('checkout_address') }}" class="checkout-steps-link">
            <div class="checkout-steps-link-title">Address</div>
            <div class="checkout-steps-link-description">Fill in your billing and shipping addresses</div>
        </a>
    </div>

    {% if order_requires_shipping %}
        <div class="checkout-steps-item {{ steps['select_shipping'] }}">
            <a href="{{ path('checkout_select_shipping') }}" class="checkout-steps-link">
                <div class="checkout-steps-link-title">Shipping</div>
                <div class="checkout-steps-link-description">Choose how your goods will be delivered</div>
            </a>
        </div>
    {% endif %}

    {% if order_requires_payment %}
        <div class="checkout-steps-item {{ steps['select_payment'] }}">
            <a href="{{ path('checkout_select_payment') }}" class="checkout-steps-link">
                <div class="checkout-steps-link-title">Payment</div>
                <div class="checkout-steps-link-description">Choose how you will pay</div>
            </a>
        </div>
    {% endif %}

    <div class="checkout-steps-item {{ steps['complete'] }}">
        <div class="checkout-steps-link">
            <div class="checkout-steps-link-title">Complete</div>
            <div class="checkout-steps-link-description">Review and confirm your order</div>
        </div>
    </div>
</div>