{% if active is not defined or active == 'address' %}
    {% set steps = {'address': 'active', 'select_shipping': 'not-completed', 'select_payment': '', 'complete': 'not-completed'} %}
{% elseif active == 'select_shipping' %}
    {% set steps = {'address': 'completed', 'select_shipping': 'active', 'select_payment': 'not-completed', 'complete': 'not-completed'} %}
{% elseif active == 'select_payment' %}
    {% set steps = {'address': 'completed', 'select_shipping': 'completed', 'select_payment': 'active', 'complete': 'not-completed'} %}
{% 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 %}
<section id="page-title">
    <div class="container">
        <div class="page-title">
            <h1>
                {% if steps['select_shipping'] == "active" %}
                    {{ 'sylius.ui.shipping'|trans }}
                {% elseif steps['select_payment'] == "active" %}
                    {{ 'sylius.ui.payment'|trans }}
                {% elseif steps['complete'] == "active" %}
                    {{ 'sylius.ui.complete'|trans }}
                {% else %}
                    {{ 'sylius.ui.address'|trans }}
                {% endif %}
            </h1>
            {% if steps['complete'] == "active" %}<p> {{ 'sylius.ui.summary_of_your_order'|trans }}</p> {% endif %}
        </div>
        <div class="breadcrumb justify-content-center" style="background-color: transparent">
            <ul>
                <li><a href="{{ path('sylius_shop_homepage') }}"><i class="fa fa-home"></i></a> </li>
                {% if steps['select_shipping'] == "active" %}
                    <li><a href="{{ path('sylius_shop_checkout_address') }}">{{ 'sylius.ui.address'|trans }}</a></li>
                    <li class="active" aria-current="page"> {{ 'sylius.ui.shipping'|trans }}</li>
                {% elseif steps['select_payment'] == "active" %}
                    <li><a href="{{ path('sylius_shop_checkout_address') }}">{{ 'sylius.ui.address'|trans }}</a></li>
                    <li><a href="{{ path('sylius_shop_checkout_select_shipping') }}">{{ 'sylius.ui.shipping'|trans }}</a></li>
                    <li class="active" aria-current="page">{{ 'sylius.ui.payment'|trans }}</li>
                {% elseif steps['complete'] == "active" %}
                    <li><a href="{{ path('sylius_shop_checkout_address') }}">{{ 'sylius.ui.address'|trans }}</a></li>
                    <li><a href="{{ path('sylius_shop_checkout_select_shipping') }}">{{ 'sylius.ui.shipping'|trans }}</a></li>
                    <li><a href="{{ path('sylius_shop_checkout_select_payment') }}">{{ 'sylius.ui.payment'|trans }}</a></li>
                    <li class="active" aria-current="page">{{ 'sylius.ui.complete'|trans }}</li>
                {% else %}
                    <li class="active" aria-current="page">{{ 'sylius.ui.address'|trans }}</li>
                {% endif %}

            </ul>
        </div>
    </div>
</section>