@foreach($folders as $folder)
<div class="tree-item {{ $folder->id == $activeFolder ? 'active' : '' }}" 
     data-folder-id="{{ $folder->id }}" 
     data-folder-name="{{ $folder->name }}"
     data-has-children="{{ $folder->children->count() > 0 ? 'true' : 'false' }}">
    
    @if($folder->children->count() > 0)
    <span class="tree-toggle" data-folder-id="{{ $folder->id }}">
        <i class="fas fa-chevron-right"></i>
    </span>
    @else
    <span class="tree-toggle" style="visibility: hidden;">
        <i class="fas"></i>
    </span>
    @endif
    
    <i class="fas fa-folder me-2" style="color: #f39c12;"></i>
    <span class="folder-name">{{ $folder->name }}</span>
    
    @if($folder->documents_count > 0)
    <span class="badge bg-light text-dark ms-auto">{{ $folder->documents_count }}</span>
    @endif
    
    <!-- Nested folders (initially hidden) -->
    @if($folder->children->count() > 0)
    <div class="tree-children ms-4 d-none" id="children-{{ $folder->id }}">
        @include('documents.partials.folder-tree', ['folders' => $folder->children])
    </div>
    @endif
</div>
@endforeach

@if(count($folders) === 0)
<div class="text-center py-3">
    <i class="fas fa-folder-open fa-2x mb-2 text-muted"></i>
    <p class="text-muted mb-0">No folders yet</p>
    <small class="text-muted">Create your first folder to organize documents</small>
</div>
@endif
