Filter content : geolocation

<button @click="open = false" class="flex items-center w-full py-3.75 px-7">

    <span class="flex items-center gap-3.75 group">

        <?= icon('chevron-left', 'w-2 text-primary-accent group-hover:text-secondary transition duration-300'); ?>

        <span class="font-semibold">Géolocalisation</span>

    </span>

</button>

<div class="px-7 pt-7.5 pb-3.75 relative">

    <div>

        <div class="text-base font-semibold mb-5">Recherchez une ville et un rayon</div>

        <div>

            <div class="form-element text w-full">

                <input name="search" class="form-input form-input--search pr-13 w-full" id="search" type="text" title="Nom" placeholder="Marque, modèle ou mot clé" pattern="\S+">

                <span>

                <svg class="icon text-background-dark w-4.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

                     viewBox="0 0 16.7 16.7" enable-background="new 0 0 16.7 16.7" xml:space="preserve">

                    <path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M1.5,9.3

                        c0.6,1.4,1.8,2.6,3.2,3.2c1.5,0.6,3.1,0.6,4.5,0c1.4-0.6,2.6-1.8,3.2-3.2c0.6-1.5,0.6-3.1,0-4.5S10.6,2,9.2,1.5

                        c-1.5-0.6-3.1-0.6-4.5,0C3.2,2.1,2,3.3,1.5,4.7S0.9,7.8,1.5,9.3L1.5,9.3z"/>

                    <path fill="none" stroke="currentColor" stroke-width="2.0408" stroke-linecap="round" stroke-linejoin="round" d="M11.1,11.1l4.6,4.6"/>

                </svg>

            </span>

            </div>

        </div>

        <div class="pt-5">

            <div class="form-element text form-range" x-data="rangeSlider(0, 500, 0)">

                <input type="range"

                       id="range"

                       name="range" class="" title=""

                       x-bind:min="min" x-bind:max="max" x-model="selected" step="10"

                       @input="slide()"

                >

                <div class="relative z-10 h-0.75 mt-[43px] mb-3.5">

                    <div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>

                    <div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>

                    <div class="absolute z-40 -top-[42px] left-0 -translate-x-1/2 px-1.5 bg-primary-accent text-white font-semibold rounded-full whitespace-nowrap" x-bind:style="'left: '+thumb+'%'" x-text="selected + ' km'"></div>

                    <div class="absolute z-30 w-7.5 h-7.5 top-0 left-0 bg-white border-[3px] border-primary-accent rounded-full -mt-3.25 -ml-3.5" x-bind:style="'left: '+thumb+'%'"></div>

                </div>

            </div>

        </div>

        <div class="pt-5">

            <div class="rounded-button border-2 flex gap-2.5 py-3.5 px-4.25 border-error bg-error-light">

                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">

                    <circle cx="11" cy="11" r="11" fill="#FF6464"/>

                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 5C11.9404 5 12.5 5.55964 12.5 6.25V10.75C12.5 11.4404 11.9404 12 11.25 12C10.5596 12 10 11.4404 10 10.75V6.25C10 5.55964 10.5596 5 11.25 5Z" fill="white"/>

                    <circle cx="11.25" cy="14.25" r="1.25" fill="white"/>

                </svg>

                <span>La concession la plus proche est à 150 km</span>

            </div>

        </div>

    </div>

    <div class="border-t border-ui pt-7.5 mt-7.5">

        <div class="text-base font-semibold mb-5">Ou accédez au stock d'une concession</div>



        <div class="form-element form-select w-full mb-5"

             x-data="selectInput"

             :class="{ 'active' : active }"

             @click.away="active = false"

        >

            <input x-ref="input" name="city" class="w-full" id="city" type="text" pattern="\S+">

            <div x-ref="display" @click="active = !active" class="form-input select"></div>

            <label @click="active = !active" :class="{ 'moved' : full }" for="city">Choisissez une ville</label>

            <ul class="select-options" x-show="active">

                <li @click="setValue('toulouse', 'Toulouse')">Toulouse</li>

                <li @click="setValue('narbonne', 'Narbonne')">Narbonne</li>

                <li @click="setValue('bordeaux', 'Bordeaux')">Bordeaux</li>

            </ul>

        </div>



        <div class="form-element form-select w-full"

             x-data="selectInput"

             :class="{ 'active' : active }"

             @click.away="active = false"

        >

            <input x-ref="input" name="city" class="w-full" id="concession" type="text" pattern="\S+">

            <div x-ref="display" @click="active = !active" class="form-input select"></div>

            <label @click="active = !active" :class="{ 'moved' : full }" for="concession">Choisissez une concession</label>

            <ul class="select-options" x-show="active">

                <li @click="setValue('concession_1', 'Concession 1')">Concession 1</li>

                <li @click="setValue('concession_2', 'Concession 2')">Concession 2</li>

                <li @click="setValue('concession_3', 'Concession 3')">Concession 3</li>

            </ul>

        </div>

    </div>

</div>