@aware(['ondeEncontrar'])
<div {{ $attributes }}>
    <h2 class="text-center text-xl sm:text-2xl text-midnightblue-100 font-bricolage font-extrabold mb-6">
        {{ $ondeEncontrar }}
    </h2>
    <div class="relative">
        <div class="relative">
            <input type="text"
                   class="border px-2 w-full border-midnightblue-100 rounded-full placeholder:text-darkgray-100 text-sm block w-full pr-10"
                   placeholder="{{ __('messages.__maps.placeholder') }}"
                   x-ref="mapInput"
                   x-model="buscarTexto"
                   :disable="disable"
                   @input.debounce.500ms="autocomplete"
                   @keydown.arrow-down.prevent="moveDown"
                   @keydown.arrow-up.prevent="moveUp"
                   @keydown.enter.prevent="selectSuggestion()"/>
            <div class="absolute inset-y-0 right-4 flex-col justify-center hidden md:flex">
                <img src="/images/icon3.svg" alt="Buscar" class="w-4 h-4">
            </div>
            <x-botao-principal @click="selectSuggestion()" class="text-center !justify-center absolute -top-1 -bottom-1 h-auto right-0 md:hidden">
                {{ __('messages.buscar') }}
            </x-botao-principal>
        </div>
        <ul @click.outside="suggestions = [];"
            class="absolute ring-2 ring-blue-300 top-[calc(100%_+_0.125rem)] overflow-clip shadow-[0.2rem_0.2rem_0.2rem_rgba(0,0,0,0.3),0_0_0.5rem_rgba(0,0,0,0.3)] bg-white rounded-xl left-0 right-0 z-30"
            x-show="suggestions.length > 0">
            <template x-for="(suggestion, index) in suggestions" :key="index">
                <li
                    class="px-3 py-3 border-b border-b-black/10 cursor-pointer text-[0.875rem] select-none font-medium hover:bg-black/10"
                    :class="{ '!bg-midnightblue-100/15': index === highlightedIndex }"
                    @click="selectSuggestion(index)"
                    x-text="suggestion.text"
                ></li>
            </template>
        </ul>
    </div>
    <x-botao-principal @click="selectSuggestion()" class="mt-6 min-w-[50%] text-center !justify-center max-md:hidden">
        {{ __('messages.buscar') }}
    </x-botao-principal>
    <ul data-ref="sortedStoresContainer" class="mt-4 overflow-y-auto start-scrollbar-2 transition-all duration-500 will-change-[height]"
        :class="sortedStores.length > 0 ? 'h-[30rem] md:h-[min(17rem,19vh)]' : 'h-[0]'">
        <template x-for="(store, index) in sortedStores" :key="store._id">
            <li
                :data-id="store._id"
                :data-store="store.nome_da_loja"
                @click="selectSortedStore(index)"
                class="group py-4 mr-3 text-[0.875rem] border-t border-darkslateblue-300/20 font-medium cursor-default"
            >
                <h3 class="cursor-pointer text-xl md:text-2xl font-bricolage font-bold transition-colors"
                    x-text="store.nome_da_loja" :class="lastSelectedSortedStore === index ? 'text-midnightblue-100 group-hover:text-midnightblue-100' : 'text-black/50 group-hover:text-black/70'"></h3>
                <div class="text-[0.875rem] mt-2 text-darkslateblue-200" x-text="store.address"></div>
            </li>
        </template>
    </ul>
</div>