{% set trans = {
    btnSetLocation: "dhlStore.modal.btnSetLocation"|trans
} %}

{% set mapStationOptions = {
    googleApiKey: config('SwagDhlApp.config.googleMapApiKey'),
    shopId: config('core.app.shopId').value,
    countryCode: config('SwagDhlApp.config.countryCode'),
    trans: trans
} %}

{% block dhl_find_station_modal_wrapper %}
    <div class="modal fade find-station-modal"
         id="dhlMapModal"
         tabindex="-1"
         role="dialog"
         aria-hidden="true"
         data-map-station="true"
         data-map-station-options="{{ mapStationOptions|json_encode|raw|escape('html_attr') }}"
    >
        {% block dhl_find_station_modal %}
            <div class="modal-dialog modal-lg" role="document">
                {% block dhl_find_station_modal_content %}
                    <div class="modal-content">
                        {% block dhl_find_station_modal_header %}
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    {{ "dhlStore.modal.title"|trans|sw_sanitize }}
                                </h5>
                                <button
                                    type="button" class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                ></button>
                            </div>
                        {% endblock %}

                        {% block dhl_find_station_modal_body %}
                            <div class="modal-body">
                                {% block dhl_find_station_modal_body_search %}
                                    <div class="row g-2">
                                        {% block dhl_find_station_modal_location_search_label %}
                                            <div class="form-group col-md-12">
                                                <div class="find-dhl-pack-station">
                                                    <label for="location">
                                                        {{ "dhlStore.modal.labelLocation"|trans|sw_sanitize }}
                                                    </label>
                                                    <input
                                                        class="form-control js-dhl-location-search"
                                                        type="text"
                                                        name="location"
                                                        id="location"
                                                        value=""
                                                        placeholder="{{ "dhlStore.modal.locationPlaceholder"|trans|sw_sanitize }}"/>
                                                </div>
                                            </div>
                                        {% endblock %}
                                    </div>
                                {% endblock %}

                                {% block dhl_find_station_modal_location %}
                                    <div class="row g-2">
                                        {% block dhl_find_station_modal_my_location_button %}
                                            <div class="form-group col-md-4">
                                                <button type="button"
                                                        class="btn btn-primary btn-sm"
                                                        id="dhl-use-my-location"
                                                >
                                                    {% sw_icon 'target-big' %}
                                                    {{ "dhlStore.modal.btnUseMyLocation"|trans|sw_sanitize }}
                                                </button>
                                            </div>
                                        {% endblock %}

                                        {% block dhl_find_station_modal_search_filters %}
                                            <div
                                                class="form-group col-md-8 align-items-center justify-content-end">
                                                <div class="d-flex flex-row flex-wrap justify-content-end m-1">
                                                    <span class="me-2">
                                                        {{ "dhlStore.modal.textShowFilterCheckboxes"|trans|sw_sanitize }}
                                                    </span>

                                                    {% block dhl_find_station_modal_search_filters_pack_station %}
                                                        <div
                                                            class="form-check form-check-inline">
                                                            <input class="form-check-input"
                                                                   checked
                                                                   type="checkbox"
                                                                   name="station"
                                                                   id="dhl-station-type"
                                                                   value="station"
                                                            />
                                                            <label for="dhl-station-type"
                                                                   class="form-check-label">
                                                                {{ "dhlStore.modal.labelDhlPackStation"|trans|sw_sanitize }}
                                                            </label>
                                                        </div>
                                                    {% endblock %}

                                                    {% block dhl_find_station_modal_search_filters_post_office %}
                                                        <div
                                                            class="form-check form-check-inline">
                                                            <input class="form-check-input"
                                                                   checked
                                                                   type="checkbox"
                                                                   name="dhl-post-type"
                                                                   id="dhl-post-type"
                                                                   value="office"
                                                            />
                                                            <label for="dhl-post-type"
                                                                   class="form-check-label">
                                                                {{ "dhlStore.modal.labelDhlPostOffice"|trans|sw_sanitize }}
                                                            </label>
                                                        </div>
                                                    {% endblock %}

                                                    {% block dhl_find_station_modal_search_filters_service_point %}
                                                        <div
                                                            class="form-check form-check-inline">
                                                            <input class="form-check-input"
                                                                   checked
                                                                   type="checkbox"
                                                                   name="dhl-servicepoint-type"
                                                                   id="dhl-servicepoint-type"
                                                                   value="servicepoint"
                                                            />
                                                            <label for="dhl-servicepoint-type"
                                                                   class="form-check-label">
                                                                {{ "dhlStore.modal.labelDhlServicePoint"|trans|sw_sanitize }}
                                                            </label>
                                                        </div>
                                                    {% endblock %}
                                                </div>
                                            </div>
                                        {% endblock %}
                                    </div>
                                {% endblock %}

                                {% block dhl_find_station_modal_google_map_wrapper %}
                                    <div class="dhl-google-map-wrapper">
                                        {% block dhl_find_station_modal_google_map %}
                                            <div id="dhl-google-map"></div>
                                        {% endblock %}
                                    </div>
                                {% endblock %}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}