{{--
    The map view.

    Markers are fetched separately rather than rendered here: the map carries the
    page's own filters into its request, so panning and "search this area" work
    without a reload and without the server rendering markup that a map library
    would only throw away.

    Everything below degrades: with no JavaScript the container stays empty and
    the count and the "list view" link still tell a visitor what is here.
--}}
@php($fill = $fill ?? false)

<div class="relative overflow-hidden rounded-2xl border border-border">
    <div data-listing-map
         data-map-config="{{ json_encode($map ?? app(\App\Contracts\MapProvider::class)->config()) }}"
         data-markers-endpoint="{{ route('fragments.property-markers') }}"
         role="application"
         aria-label="{{ __('Map of matching listings') }}"
         @class([
             'w-full bg-surface-muted',
             'h-full min-h-100' => $fill,
             'h-125 sm:h-150 3xl:h-175' => ! $fill,
         ])></div>

    {{-- Shown once the map has been moved, so a search is never re-run
         underneath someone who is only looking around. --}}
    <button type="button" data-map-search-area hidden
            class="absolute left-1/2 top-4 z-500 -translate-x-1/2 rounded-lg bg-surface px-4 py-2 text-sm font-medium text-text shadow-raised transition hover:bg-surface-muted">
        {{ __('Search this area') }}
    </button>

    <button type="button" data-map-locate hidden
            class="absolute bottom-4 right-4 z-500 inline-flex items-center gap-2 rounded-lg bg-surface px-3.5 py-2 text-sm font-medium text-text shadow-raised transition hover:bg-surface-muted"
            data-denied="false">
        <x-icon name="map" class="size-4" />
        {{ __('Near me') }}
    </button>
</div>

<p data-map-status role="status" aria-live="polite" class="mt-3 text-sm text-text-secondary">
    {{ trans_choice(
        'One listing matches this search.|:count listings match this search.',
        $listings->total(),
        ['count' => number_format($listings->total())],
    ) }}
</p>

<noscript>
    <p class="mt-3 text-sm text-text-secondary">
        {{ __('The map needs JavaScript.') }}
        <a href="{{ request()->fullUrlWithQuery(['view' => 'list']) }}"
           class="font-medium text-text-brand underline underline-offset-4">{{ __('See the list instead') }}</a>.
    </p>
</noscript>