@props([
    'streetModel',
    'cityModel',
    'postalModel',
    'streetLabel' => 'Street Address',
    'cityLabel' => 'City',
    'postalLabel' => 'Postal Code',
    'required' => false,
    'streetPlaceholder' => null,
    'cityPlaceholder' => null,
    'postalPlaceholder' => null,
    'streetColSpan' => false,
])

<div class="contents" x-data="addressAutocomplete('{{ route('address.search') }}')" @click.outside="open = false">
    <flux:field @class(['sm:col-span-2' => $streetColSpan])>
        <flux:label>
            {{ $streetLabel }}
            @if ($required)
                <span aria-hidden="true" class="text-red-600 dark:text-red-400">*</span
                ><span class="sr-only">{{ __('(required)') }}</span>
            @endif
        </flux:label>
        <div class="relative" x-ref="streetWrapper">
            <flux:input
                wire:model="{{ $streetModel }}"
                autocomplete="street-address"
                :placeholder="$streetPlaceholder"
                x-on:input="handleInput($event.target.value)"
            />
            <ul
                x-show="open"
                x-transition
                class="absolute z-50 mt-1 w-full rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800"
                role="listbox"
            >
                <template x-for="(result, index) in results" :key="index">
                    <li
                        class="cursor-pointer px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-700"
                        role="option"
                        @mousedown.prevent="select(result)"
                        x-text="result.label"
                    ></li>
                </template>
                <li x-show="loading" class="px-3 py-2 text-sm text-zinc-400 dark:text-zinc-500">
                    {{ __('Searching…') }}
                </li>
            </ul>
        </div>
        @error($streetModel)
            <flux:text size="sm" class="text-red-600 dark:text-red-400">{{ $message }}</flux:text>
        @enderror
    </flux:field>

    <flux:field>
        <flux:label>
            {{ $cityLabel }}
            @if ($required)
                <span aria-hidden="true" class="text-red-600 dark:text-red-400">*</span
                ><span class="sr-only">{{ __('(required)') }}</span>
            @endif
        </flux:label>
        <div x-ref="cityWrapper">
            <flux:input wire:model="{{ $cityModel }}" autocomplete="address-level2" :placeholder="$cityPlaceholder" />
        </div>
        @error($cityModel)
            <flux:text size="sm" class="text-red-600 dark:text-red-400">{{ $message }}</flux:text>
        @enderror
    </flux:field>

    <flux:field>
        <flux:label>
            {{ $postalLabel }}
            @if ($required)
                <span aria-hidden="true" class="text-red-600 dark:text-red-400">*</span
                ><span class="sr-only">{{ __('(required)') }}</span>
            @endif
        </flux:label>
        <div x-ref="postalWrapper">
            <flux:input wire:model="{{ $postalModel }}" autocomplete="postal-code" :placeholder="$postalPlaceholder" />
        </div>
        @error($postalModel)
            <flux:text size="sm" class="text-red-600 dark:text-red-400">{{ $message }}</flux:text>
        @enderror
    </flux:field>
</div>
