<div>
    <!-- Countries dropdown -->
    <div class="mb-6">
        @if (!$hideLabel)
            <label class="rounder-md block text-sm font-medium text-theme-primary"> {{ __('Country') }}</label>
        @endif
        <select class="shadow-outline w-80 rounded border border-theme-muted bg-white p-2 px-4 py-2 pr-8 leading-tight placeholder-gray-300 shadow-md hover:border-theme-muted focus:appearance-none focus:outline-none focus:border-theme-accent focus:ring-1 focus:ring-theme-accent"
                wire:change="countrySelected" wire:key="country-dropdown" wire:model.live="country">
            <option selected value="">-- {{ __('Choose a country') }} --</option>
            @foreach ($countries->sortBy(function ($country) {
        return $country->translations->first()->name;
    }) as $country)
                <option value="{{ $country->id }}">{{ $country->code === 'XX' ? $country->flag . ' ' . __('~ My country is not listed') : $country->flag . ' ' . $country->translations->first()->name }}
                </option>
            @endforeach
        </select>
    </div>

    <!-- Cities dropdown if there are cities -->
    @if (count($cities) > 0)
        <div class="mb-6 mt-6" wire:init="countrySelected">
            @if (!$hideLabel)
                <label class="rounder-md block text-sm font-medium text-theme-primary">{{ __('City') }}</label>
            @endif
            <select class="shadow-outline w-80 rounded border border-theme-muted bg-white p-2 px-4 py-2 pr-8 leading-tight placeholder-gray-300 shadow-md hover:border-theme-muted focus:appearance-none focus:outline-none focus:border-theme-accent focus:ring-1 focus:ring-theme-accent"
                    wire:key="city-dropdown" wire:model.live="city">
                <option selected value="">-- {{ __('Choose a city') }} --</option>
                @foreach ($cities->sortBy(function ($city) {
        return $city->translations->first()->name;
    }) as $city)
                    <option value="{{ $city->id }}">{{ $city->translations->first()->name }}</option>
                @endforeach
            </select>
        </div>
    
    <!-- Divisions dropdown if there no cities but if there are divisions -->
    @elseif (count($divisions) > 0)
        <div class="mb-6 mt-6" wire:init="countrySelected">
            @if (!$hideLabel)
                <label class="rounder-md block text-sm font-medium text-theme-primary">{{ __('Division') }}</label>
            @endif
            <select class="shadow-outline w-80 rounded border border-theme-muted bg-white p-2 px-4 py-2 pr-8 leading-tight placeholder-gray-300 shadow-md hover:border-theme-muted focus:appearance-none focus:outline-none focus:border-theme-accent focus:ring-1 focus:ring-theme-accent"
                    wire:change="divisionSelected" wire:key="division-dropdown" wire:model.live="division">
                <option selected value="">-- {{ __('Choose a division') }} --</option>
                @foreach ($divisions->sortBy(function ($division) {
        return $division->translations->first()->name;
    }) as $division)
                    <option value="{{ $division->id }}">{{ $division->translations->first()->name }}</option>
                @endforeach
            </select>
        </div>
    @endif

    <!-- Districts dropdown if there are districts -->
    @if (count($districts) > 0)
        <div class="mb-6 mt-6" wire:init="countrySelected">
            @if (!$hideLabel)
                <label class="rounder-md block text-sm font-medium text-theme-primary">{{ __('District') }}</label>
            @endif
            <select class="shadow-outline w-80 rounded border border-theme-muted bg-white p-2 px-4 py-2 pr-8 leading-tight placeholder-gray-300 shadow-md hover:border-theme-muted focus:appearance-none focus:outline-none focus:border-theme-accent focus:ring-1 focus:ring-theme-accent"
                    wire:key="district-dropdown" wire:model.live="district">
                <option selected value="">-- {{ __('Choose a district') }} --</option>
                @foreach ($districts->sortBy(function ($district) {
        return $district->translations->first()->name;
    }) as $district)
                    <option value="{{ $district->id }}">{{ $district->translations->first()->name }}</option>
                @endforeach
            </select>
        </div>
        @endif
</div>
