@props(['folder', 'currentFolder', 'expandedFolders', 'level' => 0, 'itemsCount' => 0])
<li class="pl-{{ $level * 4 }}">
    <div class="flex items-center justify-between p-1 hover:bg-gray-50 
              {{ $folder->id === optional($currentFolder)->id ? 'bg-blue-50' : '' }}">
        <div class="flex items-center relative flex-1" wire:click="selectFolder({{ $folder->id }})">
            <button wire:click.prevent="toggleFolder({{ $folder->id }})" class="mr-2">
                @if(in_array($folder->id, $expandedFolders))
                    <x-icons icon="chevron-down" class="w-4 h-4" />
                @else
                    <x-icons icon="chevron-right" class="w-4 h-4" />
                @endif
            </button>
            @if(in_array($folder->id, $expandedFolders))
                <flux:icon.folder-open class="size-5 mr-2"/> 
            @else
                <flux:icon.folder class="size-5 mr-2"/>
            @endif
            <span class="flex-1 whitespace-nowrap">{{ $folder->name }}</span>
            @if($itemsCount > 0)
                <flux:badge class="text-xs font-medium rounded-sm px-1 py-0.5 text-gray-700 dark:text-gray-200 bg-gray-400/15 dark:bg-white/10" size="sm" inset="top bottom">{{ $itemsCount }}</flux:badge>
            @endif
        </div>
    </div>
    @if(in_array($folder->id, $expandedFolders))
        <ul class="ml-4">
            @foreach($folder->children as $child)
                <x-folder-item 
                    :folder="$child" 
                    :currentFolder="$currentFolder"
                    :expandedFolders="$expandedFolders"
                    :level="$level + 1"
                    wire:key="folder-{{ $child->id }}"
                />
            @endforeach
        </ul>
    @endif
</li>