<div class="col-lg-2 col-md-3 col-sm-4 col-6">
    <div class="folder-grid-item" 
         data-folder-id="{{ $folder->id }}"
         data-folder-name="{{ strtolower($folder->name) }}"
         data-folder-date="{{ $folder->updated_at->toISOString() }}"
         @can('View Folder') ondblclick="openFolder({{ $folder->id }}, '{{ addslashes($folder->name) }}')" @endcan
         @cannot('View Folder') style="opacity: 0.6; cursor: not-allowed;" title="You don't have permission to open this folder" @endcannot>
        <!-- Three Dots Menu (Hidden by default, shown on hover) -->
        <div class="folder-actions">
            <div class="dropdown">
                <button class="btn btn-link p-0 folder-menu-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="More actions">
                    <i class="ri-more-2-fill"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                    @can('View Folder')
                    <li>
                        <a class="dropdown-item" href="#" 
                           onclick="openFolder({{ $folder->id }}, '{{ addslashes($folder->name) }}')"
                           onclick="event.stopPropagation();">
                            <i class="ri-folder-open-line me-2 text-primary"></i>
                            Open Folder
                        </a>
                    </li>
                    @endcan
                    @can('Create Folder')
                    <li>
                        <a class="dropdown-item" href="#" 
                           data-bs-toggle="modal" 
                           data-bs-target="#createFolderModal" 
                           onclick="document.getElementById('parent_id').value = '{{ $folder->id }}'; event.stopPropagation();">
                            <i class="ri-add-line me-2 text-success"></i>
                            Add Subfolder
                        </a>
                    </li>
                    @endcan
                    @can('Share Folder')
                    <li>
                        <a class="dropdown-item" href="#" 
                           onclick="openShareModal({{ $folder->id }}, '{{ addslashes($folder->name) }}'); event.stopPropagation(); return false;">
                            <i class="ri-share-line me-2 text-warning"></i>
                            Share Folder
                        </a>
                    </li>
                    @endcan
                    @can('Delete Folder')
                    <li>
                        <a class="dropdown-item text-danger" href="javascript:void(0);" 
                           onclick="deleteFolder({{ $folder->id }}, '{{ str_replace("'", "\\'", addslashes($folder->name)) }}', '{{ isset($folder->is_my_folder) && $folder->is_my_folder ? 'my' : 'normal' }}'); event.stopPropagation(); return false;">
                            <i class="ri-delete-bin-line me-2"></i>
                            Delete Folder
                        </a>
                    </li>
                    @endcan
                </ul>
            </div>
        </div>

             <!-- Yellow Folder Icon -->
        <div class="text-center">
            <div class="folder-icon-yellow">
                <i class="ri-folder-open-fill"></i>
            </div>
        </div>

        <!-- Folder Name -->
        <div class="folder-name text-center">
            {{ $folder->name }}
        </div>

        <!-- Folder Info -->
        <div class="folder-info text-center">
            @if($folder->children->count() > 0)
                {{ $folder->children->count() }} {{ $folder->children->count() == 1 ? 'item' : 'items' }}
            @else
                Empty folder
            @endif
        </div>
    </div>
</div>