{% if active is not defined or active == 'address' %}
    {% set steps = {'address': 'current', 'select_shipping': '', 'select_payment': '', 'complete': ''} %}
{% elseif active == 'select_shipping' %}
    {% set steps = {'address': 'visited', 'select_shipping': 'current', 'select_payment': '', 'complete': ''} %}
{% elseif active == 'select_payment' %}
    {% set steps = {'address': 'visited', 'select_shipping': 'visited', 'select_payment': 'current', 'complete': ''} %}
{% else %}
    {% set steps = {'address': 'visited', 'select_shipping': 'visited', 'select_payment': 'visited', 'complete': 'current'} %}
{% 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 %}
{# <pre>
    {{ dump(steps) }}
</pre>
<div class="ui {{ steps_count }} steps">
    <a class="{{ steps['address'] }} step" href="{{ path('sylius_shop_checkout_address') }}" {{ sylius_test_html_attribute('step-address') }}>
        <i class="map icon"></i>
        <div class="content">
            <div class="title">{{ 'sylius.ui.address'|trans }}</div>
            <div class="description">{{ 'sylius.ui.fill_in_your_billing_and_shipping_addresses'|trans }}</div>
        </div>
    </a>
    {% if order_requires_shipping %}
    <a class="{{ steps['select_shipping'] }} step" href="{{ path('sylius_shop_checkout_select_shipping') }}" {{ sylius_test_html_attribute('step-shipping') }}>
        <i class="truck icon"></i>
        <div class="content">
            <div class="title">{{ 'sylius.ui.shipping'|trans }}</div>
            <div class="description">{{ 'sylius.ui.choose_how_your_goods_will_be_delivered'|trans }}</div>
        </div>
    </a>
    {% endif %}
    {% if order_requires_payment %}
    <a class="{{ steps['select_payment'] }} step" href="{{ path('sylius_shop_checkout_select_payment') }}" {{ sylius_test_html_attribute('step-payment') }}>
        <i class="payment icon"></i>
        <div class="content">
            <div class="title">{{ 'sylius.ui.payment'|trans }}</div>
            <div class="description">{{ 'sylius.ui.choose_how_you_will_pay'|trans }}</div>
        </div>
    </a>
    {% endif %}
    <div class="{{ steps['complete'] }} step" href="{{ path('sylius_shop_checkout_complete') }}">
        <i class="checkered flag icon"></i>
        <div class="content">
            <div class="title">{{ 'sylius.ui.complete'|trans }}</div>
            <div class="description">{{ 'sylius.ui.review_and_confirm_your_order'|trans }}</div>
        </div>
    </div>
</div> #}

	<nav>
		<ol class="cd-multi-steps text-bottom count" style="width=100vw">
			<li class="{{ steps['address'] }}"><a href="#0">{{ 'sylius.ui.address'|trans }}</a></li>
			<li class="{{ steps['select_shipping'] }}" ><a href="#0">{{ 'sylius.ui.shipping'|trans }}</a></li>
			<li class="{{ steps['select_payment'] }}"><em>{{ 'sylius.ui.payment'|trans }}</em></li>
			<li class="{{ steps['complete'] }}"><em>{{ 'sylius.ui.complete'|trans }}</em></li>
		</ol>
	</nav>