@extends('layouts.app')

@section('content')
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
    <!-- Barra de herramientas con breadcrumbs -->
    <div class="mb-6">
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2">
                <li>
                    <div class="flex items-center">
                        <a href="{{ route('projects.index') }}" class="text-gray-400 hover:text-gray-500">
                            <x-icons.home class="h-5 w-5" />
                        </a>
                    </div>
                </li>
                @foreach($breadcrumbs as $crumb)
                <li>
                    <div class="flex items-center">
                        <x-icons.chevron-right class="h-5 w-5 text-gray-400" />
                        @if(!$loop->last)
                        <a href="{{ $crumb['url'] }}" class="ml-2 text-sm font-medium text-gray-500 hover:text-gray-700">
                            {{ $crumb['name'] }}
                        </a>
                        @else
                        <span class="ml-2 text-sm font-medium text-gray-700">{{ $crumb['name'] }}</span>
                        @endif
                    </div>
                </li>
                @endforeach
            </ol>
        </nav>
    </div>

    <!-- Barra de herramientas principal -->
    <x-toolbar :project="$project" :current-folder="$currentFolder" />

    <!-- Componente principal Livewire -->
    <livewire:project-show 
        :project="$project"
        :current-folder="$currentFolder ?? null"
        wire:key="project-show-{{ $project->id }}-{{ $currentFolder->id ?? 'root' }}"
    />

    <!-- Modales -->
    @livewire('folder.create-modal', ['project' => $project, 'parentFolder' => $currentFolder ?? null])
    @livewire('document.upload-modal', ['project' => $project, 'currentFolder' => $currentFolder ?? null])
</div>
@endsection