<!-- resources/views/components/toolbar.blade.php -->
<div class="flex items-center justify-between mb-4 space-x-4">
    <!-- Grupo izquierdo: Acciones principales -->
    <div class="flex items-center space-x-2">
        <!-- Crear nueva carpeta -->
        <button wire:click="$emit('openCreateFolderModal')" 
                class="px-3 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700">
            <x-icons icon="folder-add" class="w-5 h-5 mr-1 inline" />
            Nueva Carpeta
        </button>

        <!-- Subir archivos -->
        <div x-data="{ isUploading: false }" 
             x-on:livewire-upload-start="isUploading = true"
             x-on:livewire-upload-finish="isUploading = false"
             x-on:livewire-upload-error="isUploading = false">
            <button @click="document.getElementById('file-input').click()"
                    class="px-3 py-2 text-sm text-white bg-green-600 rounded-lg hover:bg-green-700"
                    :disabled="isUploading">
                <x-icons icon="upload" class="w-5 h-5 mr-1 inline" />
                <span x-text="isUploading ? 'Subiendo...' : 'Subir Archivos'"></span>
            </button>
            <input type="file" 
                   id="file-input" 
                   wire:model="files"
                   multiple
                   class="hidden"
                   @change="$wire.uploadFiles()">
        </div>
    </div>

    <!-- Grupo derecho: Acciones adicionales -->
    <div class="flex items-center space-x-2">
        <!-- Menú desplegable con más opciones -->
        <div class="relative" x-data="{ open: false }">
            <button @click="open = !open" 
                    class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
                <x-icons icon="dots-vertical" class="w-5 h-5" />
            </button>
            
            <div x-show="open" 
                 @click.away="open = false"
                 class="absolute right-0 z-10 w-48 bg-white rounded-lg shadow-lg">
                <div class="p-2 space-y-1">
                    <button wire:click="$emit('openCreateSubfolderModal')"
                            class="flex items-center w-full px-2 py-1 text-sm hover:bg-gray-100">
                        <x-icons icon="folder-plus" class="w-4 h-4 mr-2" />
                        Nueva Subcarpeta
                    </button>
                    <button wire:click="$emit('openMultiUploadModal')"
                            class="flex items-center w-full px-2 py-1 text-sm hover:bg-gray-100">
                        <x-icons icon="upload-multiple" class="w-4 h-4 mr-2" />
                        Subida Masiva
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear carpeta -->
@livewire('folder.create-modal')