@props(['children' => []])

@if(count($children) > 0)
<div class="mb-6" x-data="{ open: false, selected: '{{ $children->first()?->name ?? '' }}' }">
    <div class="flex items-center gap-3">
        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Viewing as:</label>
        <div class="relative">
            <button
                @click="open = !open"
                class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                <span x-text="selected">Select Child</span>
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div
                x-show="open"
                @click.away="open = false"
                x-transition
                class="absolute z-50 mt-1 w-56 rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
            >
                @foreach($children as $child)
                    <a
                        href="{{ url()->current() }}?child_id={{ $child->id }}"
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 {{ request('child_id') == $child->id ? 'bg-indigo-50 dark:bg-indigo-900/20' : '' }}"
                        @click="selected = '{{ $child->name }}'; open = false"
                    >
                        {{ $child->name }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif