@php
    $fileUrl = \App\Helpers\FileHelper::getFileUrl($site, $file->file);
@endphp
<div 
    class="group relative w-16 h-16 bg-slate-100 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-500 transition-all"
    @click="openModal('{{ $fileUrl }}', getFileType('{{ $file->file }}'))"
>
    <template x-if="isImage('{{ $file->file }}')">
        <img 
            src="{{ $fileUrl }}" 
            alt="{{ $file->file }}"
            class="w-full h-full object-cover"
            onerror="this.style.display='none';"
        >
    </template>
    <div class="w-full h-full flex items-center justify-center" x-show="!isImage('{{ $file->file }}')">
        <svg class="w-6 h-6 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>
    </div>
    <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
        <svg class="w-4 h-4 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>
</div>