{{-- Модальное окно выбора города --}}
<div x-show="cityModalOpen" x-cloak
     class="fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-4 pt-16"
     @keydown.escape.window="cityModalOpen = false"
     style="display:none">
    <div class="card w-full max-w-lg overflow-hidden" @click.outside="cityModalOpen = false"
         x-data="citySelect(@js($currentCity?->slug))" x-effect="cityModalOpen && load()">
        <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
            <h2 class="text-lg font-bold">Выберите город</h2>
            <button type="button" @click="cityModalOpen = false" class="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div class="p-5">
            <input type="text" x-model="q" placeholder="Начните вводить название города" class="input mb-3" autofocus>

            {{-- «Вся Россия» — POST, чтобы сбросить город из сессии, затем переход
                 на национальный URL текущей страницы (relative redirect). --}}
            <form method="POST" action="{{ route('city.select') }}" x-ref="cityForm">
                @csrf
                <input type="hidden" name="city_id" value="">
                <input type="hidden" name="redirect" x-ref="redirectTo">
            </form>

            <div class="max-h-80 space-y-0.5 overflow-y-auto">
                {{-- Вся Россия --}}
                <button type="button" x-show="q === ''"
                        @click="$refs.redirectTo.value = nationalUrl(); $refs.cityForm.submit()"
                        class="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left hover:bg-brand-50 {{ $currentCity ? '' : 'bg-brand-50 font-semibold' }}">
                    <span>Вся Россия</span>
                    @unless($currentCity)
                        <span class="text-brand-600">✓</span>
                    @endunless
                </button>

                <div x-show="loading" class="px-3 py-4 text-sm text-muted">Загрузка…</div>

                {{-- Города — обычные ссылки на городской вариант текущей страницы (crawlable).
                     Заход на городской URL сам сохранит город в сессии. --}}
                <template x-for="c in filtered" :key="c.id">
                    <a :href="cityUrl(c.slug)"
                       class="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left hover:bg-brand-50"
                       :class="c.slug === currentSlug ? 'bg-brand-50 font-semibold' : ''">
                        <span x-text="c.name"></span>
                        <span class="text-xs text-muted" x-text="c.region"></span>
                    </a>
                </template>

                <div x-show="loaded && q !== '' && !filtered.length" class="px-3 py-4 text-sm text-muted">Город не найден.</div>
            </div>
        </div>
    </div>
</div>