{% import "@SyliusShop/Common/Macro/icons.html.twig" as icons %}

{% 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="steps mb-5">
    <a class="steps-item {{ steps['address'] }}" href="{{ path('sylius_shop_checkout_address') }}" {{ sylius_test_html_attribute('step-address') }}>
        <div class="steps-icon">{{ icons.address() }}</div>
        <div class="steps-content">
            <h6 class="steps-title">{{ 'sylius.ui.address'|trans }}</h6>
            <div class="steps-text">{{ 'sylius.ui.fill_in_your_billing_and_shipping_addresses'|trans }}</div>
        </div>
    </a>
    {% if order_requires_shipping %}
        <a class="steps-item {{ steps['select_shipping'] }}" href="{{ path('sylius_shop_checkout_select_shipping') }}" {{ sylius_test_html_attribute('step-shipping') }}>
            {{ _self.sep() }}
            <div class="steps-icon">{{ icons.transport() }}</div>
            <div class="steps-content">
                <h6 class="steps-title">{{ 'sylius.ui.shipping'|trans }}</h6>
                <div class="steps-text">{{ 'sylius.ui.choose_how_your_goods_will_be_delivered'|trans }}</div>
            </div>

        </a>
    {% endif %}
    {% if order_requires_payment %}
        <a class="steps-item {{ steps['select_payment'] }}" href="{{ path('sylius_shop_checkout_select_payment') }}" {{ sylius_test_html_attribute('step-payment') }}>
            {{ _self.sep() }}
            <div class="steps-icon">{{ icons.creditCard() }}</div>
            <div class="steps-content">
                <h6 class="steps-title">{{ 'sylius.ui.payment'|trans }}</h6>
                <div class="steps-text">{{ 'sylius.ui.choose_how_you_will_pay'|trans }}</div>
            </div>

        </a>
    {% endif %}
    <a class="steps-item {{ steps['complete'] }}" href="{{ path('sylius_shop_checkout_complete') }}">
        {{ _self.sep() }}
        <div class="steps-icon">{{ icons.flag() }}</div>
        <div class="steps-content">
            <h6 class="steps-title">{{ 'sylius.ui.complete'|trans }}</h6>
            <div class="steps-text">{{ 'sylius.ui.review_and_confirm_your_order'|trans }}</div>
        </div>

    </a>
</div>

{% macro sep() %}
    <div class="steps-divider">
        <svg class="h-100 w-100" viewbox="0 0 12 82" fill="none" preserveaspectratio="none">
            <path d="M0.5 0V31L10.5 41L0.5 51V82" stroke="currentcolor" vector-effect="non-scaling-stroke"></path>
        </svg>
    </div>
{% endmacro %}