@foreach($categories as $category)
    <div class="inline-block">
        @if(!empty($category['children']))
            <!-- Category with children - shows dropdown on click -->
            <div x-data="{ showChildren: false }" class="relative">
                <button
                    @click="showChildren = !showChildren"
                    wire:click="selectCategory({{ $category['id'] }})"
                    class="bg-{{ $category['color'] }}-400 hover:bg-{{ $category['color'] }}-200 text-black inline-flex items-center rounded-md px-2 py-1 text-xs font-normal transition duration-150 ease-in-out cursor-pointer mr-1 mb-1
                    {{ in_array($category['id'], $selectedCategories) ? 'ring-1 ring-black ring-offset-2' : '' }}">
                    {{ $category['name'] }}
                    <svg class="ml-1 w-3 h-3" :class="showChildren ? 'rotate-180' : ''" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>

                <!-- Dropdown for children -->
                <div x-show="showChildren"
                     x-transition:enter="transition ease-out duration-100"
                     x-transition:enter-start="transform opacity-0 scale-95"
                     x-transition:enter-end="transform opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-75"
                     x-transition:leave-start="transform opacity-100 scale-100"
                     x-transition:leave-end="transform opacity-0 scale-95"
                     @click.away="showChildren = false"
                     class="absolute top-full left-0 mt-1 bg-white border border-theme-border rounded-md shadow-lg z-10 p-2 min-w-max">
                    <div class="flex flex-wrap gap-1 max-w-xs">
                        @include('livewire.partials.category-tree-horizontal-multi', ['categories' => $category['children'], 'level' => $level + 1])
                    </div>
                </div>
            </div>
        @else
            <!-- Category without children - simple button -->
            <button
                wire:click="selectCategory({{ $category['id'] }})"
                class="bg-{{ $category['color'] }}-400 hover:bg-{{ $category['color'] }}-200 text-black inline-flex items-center rounded-md px-2 py-1 text-xs font-normal transition duration-150 ease-in-out cursor-pointer mr-1 mb-1
                {{ in_array($category['id'], $selectedCategories) ? 'ring-1 ring-black ring-offset-2' : '' }}">
                {{ $category['name'] }}
            </button>
        @endif
    </div>
@endforeach