{{--
    Карта каталога (ТЗ §8.6).

    Точки грузятся отдельным запросом после появления карты в области
    видимости: карта не должна задерживать рендеринг страницы. Поставщик
    приходит из MapProviderInterface — шаблон о нём ничего не знает.
--}}
@props(['city', 'filters'])

@php
    $provider = app(\App\Domain\Catalog\Contracts\MapProviderInterface::class);
    $pointsUrl = route('catalog.map-points', [$city->slug] + $filters->toQuery());
@endphp

<div
    x-data="venueMap({
        pointsUrl: @js($pointsUrl),
        scriptUrl: @js($provider->scriptUrl()),
        options: @js($provider->options()),
        center: @js(['latitude' => $city->latitude, 'longitude' => $city->longitude]),
    })"
    class="relative overflow-hidden rounded-card bg-surface-alt shadow-card"
    style="height: min(70vh, 560px)"
>
    <div x-ref="map" class="h-full w-full"></div>

    <div x-show="loading" x-cloak
         class="absolute inset-0 flex items-center justify-center bg-surface-alt/80 text-sm text-muted">
        Загружаем карту…
    </div>

    <div x-show="error" x-cloak
         class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface-alt p-6 text-center">
        <p class="text-sm text-muted" x-text="error"></p>
        <a href="{{ route('catalog.city', [$city->slug] + $filters->with('view', 'list')->toQuery()) }}"
           class="text-sm font-semibold text-primary hover:underline">Показать списком</a>
    </div>
</div>