{{-- City selector modal (ТЗ §21.1): millionniki featured + search over own cities table. --}}
<div x-cloak x-show="$store.cityModal.open" x-data="citySelect"
     class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[10vh]"
     @keydown.escape.window="$store.cityModal.hide()">
    <div class="w-full max-w-md rounded-[var(--radius-xl)] bg-white p-6 shadow-[var(--shadow-frame)]"
         @click.outside="$store.cityModal.hide()">
        <div class="mb-3 flex items-center justify-between">
            <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Выбор города</h2>
            <button type="button" @click="$store.cityModal.hide()" class="text-[var(--color-muted)] hover:text-[var(--color-ink)]" aria-label="Закрыть">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <div class="relative">
            <i data-lucide="search" class="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--color-muted)]"></i>
            <input x-model="query" @input="onInput()" type="search" placeholder="Начните вводить город…"
                   class="w-full rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-[#F7F8FA] py-2.5 pl-10 pr-4 text-sm outline-none focus:border-[var(--color-primary)]">
        </div>

        <div class="mt-4 max-h-[45vh] overflow-y-auto">
            <template x-if="loading">
                <p class="py-4 text-center text-sm text-[var(--color-muted)]">Загрузка…</p>
            </template>
            <template x-if="!loading && results.length === 0">
                <p class="py-4 text-center text-sm text-[var(--color-muted)]">Ничего не найдено.</p>
            </template>
            <ul class="divide-y divide-[#F1F2F5]">
                <template x-for="c in results" :key="c.id">
                    <li>
                        <button type="button" @click="select(c.id)"
                                class="flex w-full items-center justify-between gap-2 rounded-[var(--radius-sm)] px-3 py-2.5 text-left hover:bg-[var(--color-primary-soft)]">
                            <span class="text-sm font-semibold text-[var(--color-ink)]" x-text="c.name"></span>
                            <span class="text-xs text-[var(--color-muted)]" x-text="c.region"></span>
                        </button>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</div>