{% sw_extends '@Storefront/storefront/component/address/address-editor-modal-create-address.html.twig' %}

{% 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,
    areaScope
} %}

{% block component_address_address_editor_modal_create_address_form_fields_include %}
    {% if 'shipping' in typePrefix %}
        <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_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-{{ areaScope }}"
                            value="mailing"
                            data-form-field-toggle="true"
                            data-form-field-toggle-target=".js-form-field-toggle-dhl-shipping-address-{{ areaScope }}"
                            data-form-field-toggle-value="false"
                        />
                        <label for="mailing-address-{{ areaScope }}" 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-{{ areaScope }}"
                            value="dhl"
                            data-form-field-toggle="true"
                            data-form-field-toggle-target=".js-form-field-toggle-dhl-shipping-address-{{ areaScope }}"
                            data-form-field-toggle-value="true"
                        />
                        <label for="dhl-address-{{ areaScope }}" class="dhl-label form-check-label">
                            {{ "dhlStore.shippingAddress.labelDhlAddress"|trans|sw_sanitize }}
                        </label>
                    </div>
                {% endblock %}
            </div>
        {% endblock %}

        <div class="js-form-field-toggle-dhl-shipping-address-{{ areaScope }} 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 id="dhlOpenModalButton"
                                    type="button"
                                    class="btn btn-primary btn-sm btn-find-location"
                            >
                                {{ "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>
    {% endif %}
        {{ parent() }}
    {% if 'shipping' in typePrefix %}
        </div>
    {% endif %}
{% endblock %}