{% 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 = sylius_is_payment_required(order) %}
{% set order_requires_shipping = sylius_is_shipping_required(order) %}

{% 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 {{ steps_count }} steps">
    <a class="{{ steps['address'] }} step-item" href="{{ path('sylius_shop_checkout_address') }}" {{ sylius_test_html_attribute('step-address') }}>
        <span class="step-icon">
            <span class="icon-address"></span>
        </span>
        <p class="step-content">
            <span class="step-title">{{ 'sylius.ui.address'|trans }}</span>
            <span class="step-description">{{ 'sylius.ui.fill_in_your_billing_and_shipping_addresses'|trans }}</span>
        </p>
    </a>
    {% if order_requires_shipping %}
        <a class="{{ steps['select_shipping'] }} step-item" href="{{ path('sylius_shop_checkout_select_shipping') }}" {{ sylius_test_html_attribute('step-shipping') }}>
            <span class="step-icon">
                <span class="icon-delivery"></span>
            </span>
            <p class="step-content">
                <span class="step-title">{{ 'sylius.ui.shipping'|trans }}</span>
                <span class="step-description">{{ 'sylius.ui.choose_how_your_goods_will_be_delivered'|trans }}</span>
            </p>
        </a>
    {% endif %}

    {% if order_requires_payment %}
        <a class="{{ steps['select_payment'] }} step-item" href="{{ path('sylius_shop_checkout_select_payment') }}" {{ sylius_test_html_attribute('step-payment') }}>
            <span class="step-icon">
                <span class="icon-payment"></span>
            </span>
            <p class="step-content">
                <span class="step-title">{{ 'sylius.ui.payment'|trans }}</span>
                <span class="step-description">{{ 'sylius.ui.choose_how_you_will_pay'|trans }}</span>
            </p>
        </a>
    {% endif %}

    <div class="{{ steps['complete'] }} step-item">
        <span class="step-icon">
            <span class="icon-complete"></span>
        </span>
        <p class="step-content">
            <span class="step-title">{{ 'sylius.ui.complete'|trans }}</span>
            <span class="step-description">{{ 'sylius.ui.review_and_confirm_your_order'|trans }}</span>
        </p>
    </div>
</div>
