@props([
    // An App\Models\JobAttachment.
    'file',
    // Livewire expression for the delete button, e.g. "removeMedia(12)".
    'deleteAction' => null,
    'deleteConfirm' => null,
    'showCaption' => false,
    'captionAction' => null,
    // Thumbnail-sized, for the strip under a quality check rather than a gallery.
    'compact' => false,
])

@php
    $preview = $file->previewUrl();
@endphp

@if ($compact)
    @if ($file->kind === 'audio')
        {{-- A voice note is nothing to look at, so it gets a player instead of a
             thumbnail, and a full row because 64px of audio control is unusable. --}}
        <div {{ $attributes->merge(['class' => 'flex w-full items-center gap-2 rounded-lg border border-slate-200 bg-white px-2 py-1.5']) }}>
            <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-700">
                <x-icon name="microphone" class="h-3.5 w-3.5" />
            </span>
            <audio src="{{ $preview }}" controls preload="metadata" class="h-8 min-w-0 flex-1"></audio>
            @if ($deleteAction)
                <button type="button" wire:click="{{ $deleteAction }}"
                        @if ($deleteConfirm) wire:confirm="{{ $deleteConfirm }}" @endif
                        class="shrink-0 text-slate-300 transition hover:text-rose-600" title="{{ __('Remove') }}">
                    <x-icon name="trash" class="h-3.5 w-3.5" />
                </button>
            @endif
        </div>
    @else
        <div {{ $attributes->merge(['class' => 'group/tile relative h-16 w-16 shrink-0 overflow-hidden rounded-lg border border-slate-200 bg-slate-50']) }}>
            <a href="{{ $preview }}" target="_blank" rel="noopener" class="block h-full w-full">
                @if ($file->kind === 'image')
                    <img src="{{ $preview }}" alt="{{ $file->original_name }}" loading="lazy" class="h-full w-full object-cover" />
                @elseif ($file->kind === 'video')
                    <span class="flex h-full w-full items-center justify-center bg-slate-800 text-white">
                        <x-icon name="play" class="h-5 w-5" />
                    </span>
                @else
                    <span class="flex h-full w-full items-center justify-center text-[10px] font-bold text-slate-500">{{ $file->extension_label }}</span>
                @endif
            </a>
            @if ($deleteAction)
                <button type="button" wire:click="{{ $deleteAction }}"
                        @if ($deleteConfirm) wire:confirm="{{ $deleteConfirm }}" @endif
                        class="absolute right-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-white/90 text-slate-400 shadow-sm transition hover:text-rose-600 sm:opacity-0 sm:group-hover/tile:opacity-100"
                        title="{{ __('Remove') }}">
                    <x-icon name="x-mark" class="h-3 w-3" />
                </button>
            @endif
        </div>
    @endif
@else

{{--
    One attachment, rendered as whatever it actually is. Video and audio play in
    place: making someone download a 10-second clip to find out whether it is the
    right one is the reason media libraries get abandoned.
--}}
<div {{ $attributes->merge(['class' => 'group/tile relative overflow-hidden rounded-xl border border-slate-200 bg-white']) }}>
    @if ($file->kind === 'image')
        <a href="{{ $preview }}" target="_blank" rel="noopener" class="block">
            <div class="aspect-[4/3] w-full overflow-hidden bg-slate-100">
                <img src="{{ $preview }}" alt="{{ $file->caption ?: $file->original_name }}" loading="lazy"
                     class="h-full w-full object-cover transition duration-300 group-hover/tile:scale-[1.03]" />
            </div>
        </a>
    @elseif ($file->kind === 'video')
        <div class="aspect-[4/3] w-full bg-slate-900">
            <video src="{{ $preview }}" controls preload="metadata" class="h-full w-full object-contain"></video>
        </div>
    @elseif ($file->kind === 'audio')
        <div class="flex aspect-[4/3] w-full flex-col items-center justify-center gap-2 bg-brand-50 px-3">
            <span class="flex h-11 w-11 items-center justify-center rounded-full bg-white text-brand-700 shadow-sm">
                <x-icon name="microphone" class="h-5 w-5" />
            </span>
            <audio src="{{ $preview }}" controls preload="metadata" class="h-8 w-full"></audio>
        </div>
    @else
        <a href="{{ $preview }}" target="_blank" rel="noopener"
           class="flex aspect-[4/3] w-full items-center justify-center bg-slate-50 transition group-hover/tile:bg-slate-100">
            <span class="rounded-lg bg-white px-3 py-1.5 text-xs font-bold text-slate-600 ring-1 ring-slate-200">{{ $file->extension_label }}</span>
        </a>
    @endif

    @if ($file->isInDrive())
        <span class="absolute left-2 top-2 rounded-full bg-white/90 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 shadow-sm ring-1 ring-emerald-200">{{ __('Drive') }}</span>
    @endif

    @if ($deleteAction)
        <button type="button" wire:click="{{ $deleteAction }}"
                @if ($deleteConfirm) wire:confirm="{{ $deleteConfirm }}" @endif
                class="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-slate-400 shadow-sm ring-1 ring-slate-200 transition hover:text-rose-600 sm:opacity-0 sm:group-hover/tile:opacity-100"
                title="{{ __('Remove') }}">
            <x-icon name="trash" class="h-3.5 w-3.5" />
        </button>
    @endif

    <div class="px-2.5 py-2">
        @if ($showCaption)
            {{-- Saved on blur by calling the owning component with the typed
                 value, rather than binding a property per file. --}}
            <input type="text" value="{{ $file->caption }}"
                   @if ($captionAction) wire:blur="{{ $captionAction }}" @endif
                   placeholder="{{ __('Add a caption…') }}"
                   class="block w-full border-0 border-b border-transparent bg-transparent p-0 text-xs text-slate-700 placeholder:text-slate-300 focus:border-indigo-400 focus:ring-0" />
        @elseif ($file->caption)
            <p class="truncate text-xs font-medium text-slate-700" title="{{ $file->caption }}">{{ $file->caption }}</p>
        @endif

        <p class="truncate text-[11px] text-slate-400" title="{{ $file->original_name }}">
            {{ $file->original_name }}
        </p>
        <p class="text-[11px] text-slate-400">
            {{ $file->created_at?->timezone(config('app.display_timezone'))->format('j M Y') }}
            @if ($file->size > 0) · {{ $file->human_size }} @endif
            @if ($file->driveLink())
                · <a href="{{ $file->driveLink() }}" target="_blank" rel="noopener" class="font-medium text-indigo-500 hover:text-indigo-600">{{ __('Drive') }}</a>
            @endif
        </p>
    </div>

    {{ $slot }}
</div>

@endif