<div>
    <!-- Header y Breadcrumbs -->
    <div class="p-4 bg-white border-b">
        <div class="flex items-center justify-between">
            <div>
                <nav class="flex space-x-2 text-sm">
                    <a wire:click="currentFolder = null" class="cursor-pointer text-gray-600 hover:text-blue-600">
                        Inicio
                    </a>
                    @foreach($this->breadcrumbs as $folder)
                    <span class="text-gray-400">/</span>
                    <a wire:click="selectFolder({{ $folder->id }})" 
                       class="cursor-pointer text-gray-600 hover:text-blue-600">
                        {{ $folder->name }}
                    </a>
                    @endforeach
                </nav>
                <h1 class="mt-2 text-2xl font-bold">{{ $project->name }}</h1>
            </div>
            <a href="{{ route('projects.edit', $project) }}" 
               class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                Editar Proyecto
            </a>
        </div>
    </div>

    <!-- Barra de Herramientas y Contenido -->
    <div class="grid grid-cols-1 gap-6 p-4 lg:grid-cols-4">
        <!-- Treeview de Carpetas -->
        <div class="col-span-1 bg-white rounded-lg shadow">
            <div class="p-4 border-b">
                <div class="flex items-center justify-between">
                    <h3 class="font-medium">Carpetas</h3>
                    <button wire:click="createFolder" class="p-1 text-gray-600 hover:bg-gray-100 rounded">
                        <x-icons icon="plus" class="w-5 h-5" />
                    </button>
                </div>
                <input type="text" 
                       wire:model.live="folderName"
                       placeholder="Nueva carpeta"
                       class="w-full p-2 mt-2 border rounded"
                       @keyup.enter="createFolder">
            </div>
            <div class="p-4">
                <ul class="space-y-2">
                    @foreach($project->rootFolders as $folder)
                    <x-folder-item 
                        :folder="$folder"
                        :currentFolder="$currentFolder"
                        :expandedFolders="$expandedFolders"
                        wire:key="folder-{{ $folder->id }}"
                    />
                    @endforeach
                </ul>
            </div>
        </div>

        <!-- Documentos y Subida de Archivos -->
        <div class="col-span-3">
            <div class="bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <div class="flex items-center justify-between">
                        <h3 class="font-medium">Documentos</h3>
                        <input type="file" 
                               wire:model="files"
                               multiple
                               class="hidden"
                               id="file-upload">
                        <label for="file-upload"  class="px-4 py-2 text-sm text-white bg-green-600 rounded-lg cursor-pointer hover:bg-green-700">
                            Subir Archivos
                        </label>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Nombre</th>
                                <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Versiones</th>
                                <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Última Actualización</th>
                                <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Estado</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($this->documents as $document)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <x-icons icon="document" class="w-5 h-5 mr-2 text-gray-400" />
                                        {{ $document->name }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $document->versions_count }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {{ $document->updated_at->diffForHumans() }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <x-status-badge :status="$document->status" />
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="px-6 py-4 text-center text-gray-500">
                                    No se encontraron documentos
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>