@props(['state' => [], 'activeCity' => null])

@php
    $stateSlug = $state['slug'] ?? '';
    $stateName = $state['name'] ?? '';
    $cities = $state['cities'] ?? [];
@endphp

<div class="location-explorer__state" x-data="{ open: {{ $activeCity ? 'true' : 'false' }} }">
    <button type="button"
            class="location-explorer__state-trigger"
            @click="open = !open"
            :aria-expanded="open">
        <span class="location-explorer__state-icon" aria-hidden="true">
            <x-menu.icon name="location" class="h-5 w-5" />
        </span>
        <span class="location-explorer__state-text">
            <span class="location-explorer__state-name">{{ $stateName }}</span>
            <span class="location-explorer__state-meta">{{ count($cities) }} cities</span>
        </span>
        <span class="location-explorer__chevron" :class="open && 'is-open'" aria-hidden="true">›</span>
    </button>

    <div x-show="open" x-cloak class="location-explorer__panel">
        <a href="{{ $state['url'] ?? '#' }}" class="location-explorer__hub-link">
            View all of {{ $stateName }} →
        </a>

        @foreach($cities as $city)
            <div class="location-explorer__city" x-data="{ cityOpen: {{ ($activeCity ?? '') === ($city['slug'] ?? '') ? 'true' : 'false' }} }">
                <button type="button"
                        class="location-explorer__city-trigger"
                        @click="cityOpen = !cityOpen"
                        :aria-expanded="cityOpen">
                    <span class="location-explorer__city-name">{{ $city['name'] }}</span>
                    <span class="location-explorer__city-meta">{{ count($city['towns'] ?? []) }} towns</span>
                    <span class="location-explorer__chevron location-explorer__chevron--sm" :class="cityOpen && 'is-open'" aria-hidden="true">›</span>
                </button>

                <div x-show="cityOpen" x-cloak class="location-explorer__towns">
                    <a href="{{ $city['url'] }}" class="location-explorer__city-link">{{ $city['name'] }} overview →</a>
                    @foreach($city['towns'] ?? [] as $town)
                        <a href="{{ $town['url'] }}" class="location-explorer__town-link">{{ $town['name'] }}</a>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>