@php
    $isOwn = $file->user_id === auth()->id();
    $canManage = $isOwn || auth()->user()->isAdmin();
    $ext = strtoupper(pathinfo($file->original_name, PATHINFO_EXTENSION)) ?: 'FILE';
    $colors = \App\Support\Avatar::colors($ext);
@endphp

<div class="rounded-xl border-2 border-gray-200 p-3 hover:border-gray-300" id="file-{{ $file->id }}" data-file-id="{{ $file->id }}">
    <div class="flex items-center gap-3">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $colors['bg'] }} {{ $colors['text'] }} text-[10px] font-bold">
            {{ Str::limit($ext, 4, '') }}
        </span>

        <div class="min-w-0 flex-1">
            <a href="{{ route('files.show', ['path' => $file->path]) }}" class="block truncate text-sm font-medium text-gray-700 hover:text-rose-500">
                {{ $file->original_name }}
            </a>
            <div class="mt-1 flex flex-wrap items-center gap-1.5">
                <span class="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-500">
                    Subido por {{ $file->user->name }}
                </span>
                <span class="text-[11px] text-gray-400">{{ $file->humanSize() }} · {{ $file->created_at->format('d/m/Y H:i') }}</span>
            </div>
        </div>

        @if ($canManage)
            <button type="button" class="shrink-0 text-xs text-gray-300 hover:text-red-500 file-delete" data-file-id="{{ $file->id }}">
                Eliminar
            </button>
        @endif
    </div>

    <div class="mt-2 pl-[52px]">
        <p class="file-note-text text-xs italic text-gray-500 {{ $file->note ? '' : 'hidden' }}">{{ $file->note }}</p>

        @if ($canManage)
            <button type="button" class="file-note-btn mt-1 text-[11px] font-medium text-gray-400 hover:text-rose-500" data-file-id="{{ $file->id }}">
                {{ $file->note ? 'Editar nota' : '+ Agregar nota' }}
            </button>
        @endif
    </div>
</div>