{% block checkout_steps_main %}
    <div class="c4s-checkout-steps">
        <div class="row p-2 align-items-center">
            {% if oxcmp_basket.getProductsCount() %}
                {% set blShowStepLinks = true %}
            {% endif %}

            {% block checkout_steps_basket %}
                <div class="col text-center c4s-checkout-step{% if active == 1 %} active{% elseif active > 1 %} passed{% endif %}">
                    {% if blShowStepLinks %}<a href="{{ seo_url({ ident: oViewConf.getBasketLink()|raw }) }}">{% endif %}
                    <div class="c4s-checkout-step-num">1</div>
                    <div class="c4s-checkout-step-text">
                        {{ translate({ ident: "STEPS_BASKET" }) }}
                    </div>
                    {% if blShowStepLinks %}</a>{% endif %}
                </div>
            {% endblock %}

            {% set blShowStepLinks = false %}
            {% if active > 2 and not oView.isLowOrderPrice() and oxcmp_basket.getProductsCount() %}
                {% set blShowStepLinks = true %}
            {% endif %}

            {% block checkout_steps_user %}
                <div class="col text-center c4s-checkout-step{% if active == 2 %} active{% elseif active > 2 %} passed{% endif %}">
                    {% if blShowStepLinks %}<a href="{{ seo_url({ ident: oViewConf.getOrderLink()|raw }) }}">{% endif %}
                    <div class="c4s-checkout-step-num">2</div>
                    <div class="c4s-checkout-step-text">
                        {{ translate({ ident: "STEPS_SEND" }) }}
                    </div>
                    {% if blShowStepLinks %}</a>{% endif %}
                </div>
            {% endblock %}

            {% set blShowStepLinks = false %}
            {% if active > 3 and oxcmp_user and not oView.isLowOrderPrice() and oxcmp_basket.getProductsCount() %}
                {% set blShowStepLinks = true %}
            {% endif %}

            {% block checkout_steps_pay %}
                <div class="col text-center c4s-checkout-step{% if active == 3 %} active{% elseif active > 3 %} passed{% endif %}">
                    {% if blShowStepLinks %}<a {% if oViewConf.getActiveClassName() == "user" %}id="c4s-checkout-step-link-payment"{% endif %} href="{{ seo_url({ ident: oViewConf.getPaymentLink()|raw }) }}">{% endif %}
                    <div class="c4s-checkout-step-num">3</div>
                    <div class="c4s-checkout-step-text">
                        {{ translate({ ident: "STEPS_PAY_DELIVER" }) }}
                    </div>
                    {% if blShowStepLinks %}</a>{% endif %}
                </div>
                {# {{ script({ add: "$('#paymentStep').click( function() { $('#c4s-user-next-step-btn').click();return false;});", dynamic: __oxid_include_dynamic }) }} #}
            {% endblock %}

            {% set blShowStepLinks = false %}
            {% if active > 4 and oxcmp_user and not oView.isLowOrderPrice() and oxcmp_basket.getProductsCount() and oView.getPaymentList() %}
                {% set blShowStepLinks = true %}
            {% endif %}

            {% block checkout_steps_order %}
                <div class="col text-center c4s-checkout-step{% if active == 4 %} active{% elseif active > 4 %} passed{% endif %}">
                    {% if blShowStepLinks %}<a {% if oViewConf.getActiveClassName() == "payment" %}id="c4s-checkout-step-link-order"{% endif %} href="{% if oViewConf.getActiveClassName() == "payment" %}javascript:document.forms.order.submit();{% else %}{{ seo_url({ ident: oViewConf.getOrderConfirmLink()|raw }) }}{% endif %}">{% endif %}
                    <div class="c4s-checkout-step-num">4</div>
                    <div class="c4s-checkout-step-text">
                        {{ translate({ ident: "STEPS_ORDER" }) }}
                    </div>
                    {% if blShowStepLinks %}</a>{% endif %}
                </div>
                {# {{ script({ add: "$('#orderStep').click( function() { $('#paymentNextStepBottom').click();return false;});", dynamic: __oxid_include_dynamic }) }} #}
            {% endblock %}

            {% block checkout_steps_laststep %}
                <div class="col text-center c4s-checkout-step{% if active == 5 %} active{% endif %}">
                    <div class="c4s-checkout-step-num">5</div>
                    <div class="c4s-checkout-step-text">
                        {{ translate({ ident: "READY" }) }}
                    </div>
                </div>
            {% endblock %}
        </div>
    </div>
{% endblock %}