@php
    $fileUrl = \App\Helpers\FileHelper::getFileUrl($site, $file->file);
@endphp
<div 
    class="group relative aspect-square bg-slate-100 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-500 transition-all"
    @click="openModal('{{ $fileUrl }}', getFileType('{{ $file->file }}'))"
>
    <!-- Thumbnail -->
    <template x-if="isImage('{{ $file->file }}')">
        <img 
            src="{{ $fileUrl }}" 
            alt="{{ $file->file }}"
            class="w-full h-full object-cover"
            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
        >
    </template>
    
    <!-- File icon fallback -->
    <div class="w-full h-full flex flex-col items-center justify-center bg-slate-100" x-show="!isImage('{{ $file->file }}')">
        <template x-if="isPdf('{{ $file->file }}')">
            <svg class="w-12 h-12 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 2l5 5h-5V4zM8.5 13H10v4H8.5v-1.5H7V17H5.5v-4H7v1.5h1.5V13zm3 0h2c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-1v1h-1v-5zm1 3h1v-2h-1v2zm4-3h2v1h-1v.5h1v1h-1v1.5h-1v-4z"/>
            </svg>
        </template>
        <template x-if="isVideo('{{ $file->file }}')">
            <svg class="w-12 h-12 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
            </svg>
        </template>
        <template x-if="!isPdf('{{ $file->file }}') && !isVideo('{{ $file->file }}') && !isImage('{{ $file->file }}')">
            <svg class="w-12 h-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
        </template>
        <span class="text-xs text-slate-500 mt-2 px-2 truncate max-w-full uppercase">{{ pathinfo($file->file, PATHINFO_EXTENSION) }}</span>
    </div>
    
    <!-- Overlay on hover -->
    <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
        </svg>
    </div>
    
    <!-- Filename tooltip -->
    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
        <p class="text-white text-xs truncate">{{ basename($file->file) }}</p>
    </div>
</div>