{{#extend "modal" id="modal-click-and-collect" title="Click & Collect" fullWidth=true wide=true}}
    {{#content "sections"}}

        {{#extend "modal-body-section" customSectionClass="click-and-collect__description"}}
            {{#content "body"}}
                <div class="click-and-collect__product">
                    {{#with click-and-collect.product }}
                        {{> card_product_preview  modifier="product-card-preview_cc"}}
                    {{/with}}
                    <div class="click-and-collect__locator">
                        <form action="#" class="click-and-collect__locator-form">

                            <!--
                            <div class="form-row" data-row-required>
                                <div class="click-and-collect__locator-town form-row__field">
                                    <input class="tbx" placeholder="Enter a town/city or postcode"
                                           id="click-and-collect-town" type="text"
                                           aria-label="Enter a town/city or postcode">
                                </div>
                                <div class="click-and-collect__locator-btn">
                                    <button class="btn btn_full btn-primary" id="click-and-collect-submit">
                                        <span class="btn__text">Find store</span>
                                    </button>
                                </div>
                            </div>-->

                            <div class="form-row" data-row-required>
                                <div class="click-and-collect__locator-town form-row__field">
                                        <div class="input-group">
                                            <input class="tbx form-control"
                                            placeholder="Enter a city or postcode"
                                            id="locationForSearch" type="text" aria-label="Enter a town/city or postcode:">

                                            <div class="input-group-append">
                                                <button class="btn btn-secondary" id="geoLocateSearch" type="button">
                                                    <i class="fas fa-location-arrow"></i>
                                                </button>
                                            </div>

                                        </div>
                                </div>
                                <div class="click-and-collect__locator-btn">
                                    <button class="btn btn_full btn-primary" id="click-and-collect-submit">
                                        <span class="btn__text">Find store</span>
                                    </button>
                                </div>
                            </div>


                            <div class="form-row">
                                <div class="click-and-collect__locator-checkbox form-row__field">
                                    {{> checkbox id="click-and-collect-stock" label="Only show stores with stock"}}
                                </div>
                            </div>
                        </form>

                        <button class="btn btn-secondary click-and-collect-toggler">
                            <span class="btn__text">Show Map</span>
                        </button>

                        <div class="map-container" id="google-map">
                            <div class="map store-locator-popup__map">
                                {{> google-map pdp=pdp}}
                            </div>
                        </div>


                    </div>
                </div>
            {{/content}}
        {{/extend}}

        {{#extend "modal-body-section" customSectionClass="click-and-collect__swiper"}}
            {{#content "body"}}
                {{#extend "modal-slider" slidesCount="2" slidesCountMd="2"}}
                    {{#content "cards"}}
                        {{#each click-and-collect.stores}}
                            {{>card-store-collect modification="swiper-slide" }}
                        {{/each}}
                    {{/content}}
                {{/extend}}
            {{/content}}
        {{/extend}}

        <div class="click-and-collect__pagination">
            <div class="sort-products-list__section sort-products-list__pagination">
                {{> pagination pagination1="true" }}
            </div>

            <button class="btn btn-secondary">
                <span class="btn__text">Show more</span>
            </button>
        </div>

    {{/content}}
{{/extend}}