{% set trans = {
    dhlCustomerNumberPlaceholder: "dhlStore.modal.dhlCustomerNumberPlaceholder"|trans,
    labelDhlCustomerNumber: "dhlStore.modal.labelDhlCustomerNumber"|trans,
    stationIdPlaceHolder: "dhlStore.modal.stationIdPlaceHolder"|trans,
    labelStationId: "dhlStore.modal.labelStationId"|trans,
    btnSetLocation: "dhlStore.modal.btnSetLocation"|trans,
    additionalField1Label: "address.additionalField1Label"|trans,
    additionalField1Placeholder: "address.additionalField1Placeholder"|trans,
    additionalField2Label: "address.additionalField2Label"|trans,
    additionalField2Placeholder: "address.additionalField2Placeholder"|trans
} %}

{% set dhlSelectionOptions = {
    countries: page.countries.jsonSerialize|map(item => { iso: item.iso, id: item.id }),
    trans: trans
} %}

<div
    class="swag-dhl-wrapper"
    data-dhl-selection="true"
    data-dhl-selection-options="{{ dhlSelectionOptions|json_encode|raw|escape('html_attr') }}">
    {% block component_account_register_address_different_shipping_control %}
        <div class="form-check register-different-shipping">
            {% block component_account_register_address_different_shipping_input %}
                <input type="checkbox"
                       class="form-check-input js-different-shipping-checkbox"
                       name="differentShippingAddress"
                       value="1"
                       id="differentShippingAddress"
                       {% if data.get('differentShippingAddress') %}checked="checked" {% endif %}
                       data-form-field-toggle="true"
                       data-form-field-toggle-target=".js-form-field-toggle-shipping-address"
                       data-form-field-toggle-value="true"
                       data-form-field-toggle-trigger-nested="true"
                />
            {% endblock %}

            {% block component_account_register_address_different_shipping_label %}
                <label class="form-check-label no-validation" for="differentShippingAddress">
                    {{ "account.registerDifferentShipping"|trans|sw_sanitize }}
                </label>
            {% endblock %}

            {% block component_account_register_address_shipping_mailing_or_dhl %}
                <div class="mailing-address-or-dhl-store-address-radios">
                    {% block component_account_register_address_shipping_mailing_radio %}
                        <div class="mailing-address-option form-check form-check-inline">
                            <input
                                class="form-check-input"
                                type="radio"
                                checked="checked"
                                name="dhlOrMailingAddress"
                                id="mailing-address"
                                value="mailing"
                                data-form-field-toggle="true"
                                data-form-field-toggle-target=".js-form-field-toggle-dhl-shipping-address"
                                data-form-field-toggle-value="false"
                            />
                            <label for="mailing-address" class="form-check-label">
                                {{ "dhlStore.shippingAddress.labelMailingAddress"|trans|sw_sanitize }}
                            </label>
                        </div>
                    {% endblock %}

                    {% block component_account_register_address_shipping_dhl_radio %}
                        <div class="dhl-address-option form-check form-check-inline">
                            <input
                                class="form-check-input"
                                type="radio"
                                name="dhlOrMailingAddress"
                                id="dhl-address"
                                value="dhl"
                                data-form-field-toggle="true"
                                data-form-field-toggle-target=".js-form-field-toggle-dhl-shipping-address"
                                data-form-field-toggle-value="true"
                            />
                            <label for="dhl-address" class="dhl-label form-check-label">
                                {{ "dhlStore.shippingAddress.labelDhlAddress"|trans|sw_sanitize }}
                            </label>
                        </div>
                    {% endblock %}
                </div>
            {% endblock %}
        </div>
    {% endblock %}

    {% block component_account_register_address_shipping %}
        <div class="register-shipping js-form-field-toggle-shipping-address d-none">
            {% block component_account_register_address_shipping_header %}
                <div class="card-title">
                    {{ "account.registerAddressShippingHeader"|trans|sw_sanitize }}
                </div>
            {% endblock %}

            {% block component_account_register_address_dhl_shipping %}
                <div class="data-swag-dhl-plugin-register-shipping js-form-field-toggle-dhl-shipping-address d-none">
                    {% block component_account_register_address_dhl_find_station_modal_trigger %}
                        <div class="row g-2">
                            <div class="form-group col-md-12 contact-type">
                                <div class="find-dhl-pack-station">
                                    <button type="button" class="btn btn-primary btn-sm"
                                        data-bs-toggle="modal"
                                        data-bs-target="#dhlMapModal"
                                    >
                                        {{ "dhlStore.shippingAddress.btnFindServiceAddress"|trans|sw_sanitize }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% endblock %}

                    {% block component_address_form_dhl_station %}
                        <div class="row g-2">
                            <div class="form-group col-md-12 contact-type">
                                {% block component_address_form_dhl_station_label %}
                                    <label class="form-label" for="dhlShippingAddressStation">
                                        {{ "dhlStore.modal.labelDhlAddressStation"|trans|sw_sanitize }}
                                        {{ "general.required"|trans|sw_sanitize }}
                                    </label>
                                {% endblock %}

                                {% block component_address_form_dhl_station_select %}
                                    <select class="dhl-station-select form-select"
                                            id="dhlShippingAddressStation"
                                            name="dhlStationId"
                                            data-initial-dhl-station-id="{{ data.get('dhlStationId') }}">
                                        <option value="" data-placeholder-option="true">
                                            {{ "dhlStore.modal.dhlShippingAddressStationPlaceholder"|trans|sw_sanitize }}
                                        </option>
                                    </select>
                                {% endblock %}
                            </div>
                        </div>
                    {% endblock %}
                </div>
            {% endblock %}

            {% block component_account_register_address_shipping_fields %}
                {% block component_account_register_address_shipping_fields_personal %}
                    {% sw_include '@Storefront/storefront/component/address/address-personal.html.twig' with {
                        'prefix': 'shippingAddress',
                        'data': data.get('shippingAddress'),
                        'hideCustomerTypeSelect': false,
                        'customToggleTarget': true,
                        'accountType': data.get('shippingAddress').get('accountType')
                    } %}
                {% endblock %}

                {% block component_account_register_address_shipping_fields_company %}
                    {% sw_include '@Storefront/storefront/component/address/address-personal-company.html.twig' with {
                        'prefix': 'shippingAddress',
                        'customToggleTarget': true,
                        'address': data.get('shippingAddress')
                    } %}
                {% endblock %}

                {% block component_account_register_address_shipping_fields_address %}
                    {% sw_include '@Storefront/storefront/component/address/address-form.html.twig' with {
                        'prefix': 'shippingAddress',
                        'data': data.get('shippingAddress'),
                        'showNoShippingPostfix': true,
                        'disableNonShippableCountries': true,
                    } %}
                {% endblock %}
            {% endblock %}
        </div>
    {% endblock %}
</div>