@if (empty($suggestions))
    <div></div>
@else
    <ul class="mt-2 rounded-md border border-gray-200 shadow-sm bg-white divide-y divide-gray-100">
        @foreach ($suggestions as $s)
            <li>
                <button type="button"
                        class="w-full text-left px-3 py-2 hover:bg-gray-50"
                        hx-on:click="
                          // set the visible input value
                          document.querySelector('#location').value = @js($s['display_name'] ?? '');
                          // set optional hidden fields for later normalization (step 2)
                          const setVal = (id,val)=>{ const el=document.querySelector(id); if(el) el.value = val ?? '' };
                          setVal('#loc_display_name', @js($s['display_name'] ?? ''));
                          setVal('#loc_street',       @js($s['street'] ?? ''));
                          setVal('#loc_city',         @js($s['city'] ?? ''));
                          setVal('#loc_state',        @js($s['state'] ?? ''));
                          setVal('#loc_postal',       @js($s['postal'] ?? ''));
                          setVal('#loc_country',      @js($s['country'] ?? ''));
                          setVal('#loc_lat',          @js($s['lat'] ?? ''));
                          setVal('#loc_lon',          @js($s['lon'] ?? ''));
                          // clear the suggestion list
                          this.closest('#location-suggestions').innerHTML = '';
                        ">
                    <div class="font-medium text-gray-800">
                        {{ $s['display_name'] ?? '' }}
                    </div>
                    @php
                        $line2 = collect([$s['street'] ?? null, $s['city'] ?? null, $s['state'] ?? null, $s['postal'] ?? null])
                                ->filter()->implode(', ');
                    @endphp
                    @if($line2)
                        <div class="text-sm text-gray-500">{{ $line2 }}</div>
                    @endif
                </button>
            </li>
        @endforeach
    </ul>
@endif