@if(count($files) > 0)
    @foreach($files as $file)
        <div class="file-item {{ $file['type'] === 'folder' ? 'folder' : 'file' }}" 
             data-path="{{ $file['path'] }}" 
             data-type="{{ $file['type'] }}"
             data-name="{{ $file['name'] }}"
             data-size="{{ $file['size'] ?? 0 }}"
             data-modified="{{ $file['modified'] }}"
             {{-- Debug: {{ $file['type'] === 'folder' ? 'files: ' . ($file['file_count'] ?? 'null') : '' }} --}}>
            
            <!-- Checkbox pro výběr -->
            <input type="checkbox" class="file-checkbox" id="file-{{ $loop->index }}" 
                   data-file-path="{{ $file['path'] }}" 
                   data-file-type="{{ $file['type'] }}" 
                   data-file-name="{{ $file['name'] }}" />
            
            <!-- Preview obrázku (pouze pro imagelist layout) -->
            <div class="file-preview">
                @if($file['type'] === 'file' && in_array(strtolower($file['extension'] ?? ''), ['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif']))
                    @if(in_array(strtolower($file['extension'] ?? ''), ['heic', 'heif']))
                        <img data-heic="true" 
                             data-heic-path="{{ route('files-gallery.api.image.public', ['file' => $file['name']]) }}" 
                             alt="{{ $file['name'] }}" 
                             loading="lazy"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    @else
                        <img src="{{ route('files-gallery.api.thumbnail.public', ['file' => $file['name'], 'size' => 300]) }}" 
                             alt="{{ $file['name'] }}" 
                             loading="lazy"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    @endif
                    <div class="file-icon" style="display: none;">
                        <i class="{{ App\Http\Controllers\FilesGallery\FilesGalleryController::getFileIcon($file['extension'] ?? '', $file['type']) }}"></i>
                    </div>
                @else
                    <div class="file-icon">
                        <i class="{{ App\Http\Controllers\FilesGallery\FilesGalleryController::getFileIcon($file['extension'] ?? '', $file['type']) }}"></i>
                    </div>
                @endif
            </div>
            
            <!-- Hlavní ikona souboru (pro ostatní layouty) -->
            <div class="file-icon">
                @if($file['type'] === 'file' && in_array(strtolower($file['extension'] ?? ''), ['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif']))
                    <div class="file-thumbnail">
                        @if(in_array(strtolower($file['extension'] ?? ''), ['heic', 'heif']))
                            <img data-heic="true" 
                                 data-heic-path="{{ route('files-gallery.api.image.public', ['file' => $file['name']]) }}" 
                                 alt="{{ $file['name'] }}" 
                                 loading="lazy"
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                        @else
                            <img src="{{ route('files-gallery.api.thumbnail.public', ['file' => $file['name'], 'size' => 600]) }}" 
                                 alt="{{ $file['name'] }}" 
                                 loading="lazy"
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                        @endif
                        <i class="{{ App\Http\Controllers\FilesGallery\FilesGalleryController::getFileIcon($file['extension'] ?? '', $file['type']) }}" style="display: none;"></i>
                    </div>
                @else
                    <i class="{{ App\Http\Controllers\FilesGallery\FilesGalleryController::getFileIcon($file['extension'] ?? '', $file['type']) }}"></i>
                @endif
            </div>
            
            <!-- Název souboru (hlavní) -->
            <div class="file-name" title="{{ $file['name'] }}">
                {{ $file['name'] }}
                @if($file['type'] === 'folder' && isset($file['file_count']))
                    <div class="fg-folder-stats">
                        <span class="fg-file-count" title="{{ $file['file_count'] }} souborů">
                            {{ $file['file_count'] }}
                        </span>
                    </div>
                @endif
            </div>
            
            <!-- Detaily souboru (pouze pro imagelist layout) -->
            <div class="file-details">
                <div class="file-name" title="{{ $file['name'] }}">
                    {{ $file['name'] }}
                    @if($file['type'] === 'folder' && isset($file['file_count']))
                        <div class="fg-folder-stats">
                            <span class="fg-file-count" title="{{ $file['file_count'] }} souborů">
                                {{ $file['file_count'] }}
                            </span>
                        </div>
                    @endif
                </div>
                <div class="file-meta">
                    @if($file['type'] === 'file')
                        {{ App\Http\Controllers\FilesGallery\FilesGalleryController::formatFileSize($file['size']) }}
                    @endif
                </div>
            </div>
            
            <!-- Informace pro list layout -->
            <div class="file-info">
                <div class="file-size">
                    @if($file['type'] === 'file')
                        {{ App\Http\Controllers\FilesGallery\FilesGalleryController::formatFileSize($file['size']) }}
                    @else
                        -
                    @endif
                </div>
                <div class="file-date">
                    {{ date('d.m.Y H:i', $file['modified']) }}
                </div>
            </div>
            
            
            <!-- Context Menu Button (třemi tečky) -->
            <div class="files-context" data-file-path="{{ $file['path'] }}" data-file-type="{{ $file['type'] }}" data-file-name="{{ $file['name'] }}">
                <svg viewBox="0 0 24 24" class="svg-icon">
                    <path class="svg-path-dots" d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"></path>
                    <path class="svg-path-close_thin" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
                </svg>
            </div>
            
            <!-- Selection Checkbox (like in PHP version) -->
            <svg viewBox="0 0 24 24" class="svg-icon svg-check-select">
                <path class="svg-path-check" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
            </svg>
        </div>
    @endforeach
@else
    <div class="fg-empty-state" style="text-align: center; padding: 40px; color: rgba(255,255,255,0.6);">
        <i class="fas fa-folder-open" style="font-size: 64px; margin-bottom: 20px; color: rgba(255,255,255,0.4);"></i>
        <div style="font-size: 20px; font-weight: 600; margin-bottom: 10px;">Prázdná složka</div>
        <div>Tato složka neobsahuje žádné soubory ani podsložky</div>
    </div>
@endif