{# load formvalidation config #}
{% set aFvDataAttrNames = oViewConf.getViewThemeParam("aFvDataAttrNames") %}

{% block user_checkout_change %}
    <form id="c4s-checkout-user-form" action="{{ oViewConf.getSslSelfLink()|raw }}" name="order" method="post" novalidate="novalidate" data-spinner="true" data-spinner="true" data-hide-valid-spinner="false">
        {% block user_checkout_change_form %}
            {% set aErrors = oView.getFieldValidationErrors() %}
            {{ oViewConf.getHiddenSid()|raw }}
            {{ oViewConf.getNavFormParams()|raw }}
            <input type="hidden" name="cl" value="user">
            <input type="hidden" name="option" value="{{ oView.getLoginOption() }}">
            <input type="hidden" name="fnc" value="changeuser">
            <input type="hidden" name="lgn_cook" value="0">
            <input type="hidden" name="blshowshipaddress" value="1">

            {# includes nothing usable and is used anywhere, only for "compatibility" with outdated modules - deprecated #}
            {% block user_checkout_change_next_step_top %}{% endblock %}

            <div class="row">
                {% block user_checkout_billing_address %}
                    <div class="col-12 col-md-6">
                        <div class="card c4s-checkout-card">
                            <div class="card-header">
                                {% block user_checkout_billing_address_head %}
                                    <h4 class="card-title">{{ translate({ ident: "BILLING_ADDRESS" }) }}</h4>
                                    <button id="c4s-billing-address-change-btn" class="btn btn-sm text-primary float-end"
                                            name="changeBillAddress" type="button" title="{{ translate({ ident: "CHANGE" }) }}"
                                    >
                                        <i class="fa-solid fa-pencil"></i>
                                    </button>
                                    <button id="c4s-billing-address-cancel-btn" class="btn btn-sm text-danger float-end d-none"
                                            name="changeBillAddressCancel" type="button" title="{{ translate({ ident: "CANCEL" }) }}"
                                    >
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                               {% endblock %}
                            </div>
                            <div class="card-body">
                                {% block user_checkout_billing_address_content %}
                                    {% block user_checkout_billing_feedback %}
                                        <div id="c4s-billing-address-text">
                                            {% include "widget/address/billing_address.html.twig" with {noFormSubmit: true, blSubscribeNews: true, blOrderRemark: false} %}
                                        </div>
                                    {% endblock %}
                                    {% block user_checkout_billing_form %}
                                        <div id="c4s-billing-address-fields" {% if not aErrors|length %}class="d-none"{% endif %}>
                                            {% include "form/fieldset/user_billing.html.twig" with {noFormSubmit: true, blSubscribeNews: true, blOrderRemark: false} %} {# todo #}
                                        </div>
                                    {% endblock %}
                                {% endblock %}
                            </div>
                        </div>
                    </div>
                {% endblock %}

                {% block user_checkout_shipping %}
                    <div class="col-12 col-md-6">
                        <div class="card c4s-account-card">
                            <div class="card-header">
                                {% block user_checkout_shipping_head %}
                                    <h4 class="card-title">{{ translate({ ident: "SHIPPING_ADDRESS" }) }}</h4>
                                {% endblock %}
                            </div>
                            <div class="card-body">
                                {% block user_checkout_shipping_change %}
                                    <div class="form-check mb-4">
                                        <input class="form-check-input" id="c4s-shipping-address-check" name="blshowshipaddress" type="checkbox" value="0" {% if not oView.showShipAddress() %}checked{% endif %} autocomplete="off">
                                        <label class="form-check-label" for="c4s-shipping-address-check">
                                            {{ translate({ ident: "USE_BILLINGADDRESS_FOR_SHIPPINGADDRESS" }) }}
                                        </label>
                                    </div>
                                {% endblock %}
                                {% block user_checkout_shipping_form %}
                                    <div id="c4s-shipping-address-content"{% if not oView.showShipAddress() %} class="d-none"{% endif %}>
                                        {% include "form/fieldset/user_shipping.html.twig" with {noFormSubmit: true, onChangeClass: "user"} %}
                                    </div>
                                {% endblock %}
                                {% block user_checkout_shipping_feedback %}
                                    {% include "form/fieldset/order_newsletter.html.twig" with {required: false} %} {# todo #}
                                    {% include "form/fieldset/order_remark.html.twig" with {blOrderRemark: false, required: false} %} {# todo #}
                                {% endblock %}
                            </div>
                        </div>
                    </div>
                {% endblock %}
            </div>

            {% block user_checkout_change_next_step_bottom %}
                <div class="d-grid gap-2 d-md-block mt-5">
                    <a href="{{ seo_url({ ident: oViewConf.getBasketLink()|raw }) }}" id="c4s-user-back-step-btn" class="btn btn-outline-secondary float-start" ><i class="fa-solid fa-caret-left"></i> {{ translate({ ident: "PREVIOUS_STEP" }) }}</a>
                    <button id="c4s-user-next-step-btn" class="btn btn-primary float-end" name="userform" type="submit">{{ translate({ ident: "CONTINUE_TO_NEXT_STEP" }) }} <i class="fa-solid fa-caret-right"></i></button>
                </div>
            {% endblock %}
        {% endblock %}
    </form>
{% endblock %}