{{--
    The file picker, shared by the counter lane's Files step and the quote
    lane's artwork attachment. $retentionNote differs by lane on purpose: the
    counter really does delete everything after 24 hours, a quote-lane request
    keeps its artwork until the enquiry is closed out.
--}}
<label class="mt-4 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 px-4 py-8 text-center transition hover:border-slate-400 hover:bg-slate-100"
       wire:loading.class="opacity-50" wire:target="incoming">
    <x-icon name="arrow-up-tray" class="h-9 w-9 text-slate-400" />
    <span class="text-sm font-semibold text-slate-700">{{ empty($fileMeta) ? __('Tap to upload') : __('Add another file') }}</span>
    <span class="text-xs text-slate-400">{{ __('PDF, images or Word · up to 12 MB each') }}</span>
    <input type="file" wire:model="incoming" multiple accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,image/*,application/pdf" class="hidden">
</label>

<x-upload-progress target="incoming" class="mt-3" />

<p class="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-500">{{ $retentionNote }}</p>

@error('uploads') <p class="mt-2 text-sm text-rose-600">{{ $message }}</p> @enderror

@if (! empty($fileMeta))
    <ul class="mt-4 space-y-2">
        @foreach ($fileMeta as $i => $meta)
            <li class="flex items-center gap-3 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2.5">
                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-slate-400 ring-1 ring-slate-900/5">
                    <x-icon name="document-text" class="h-5 w-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-medium text-slate-700">{{ $meta['name'] }}</p>
                    <p class="text-xs text-slate-400">{{ trans_choice('{1} :count page|[2,*] :count pages', $meta['pages'], ['count' => $meta['pages']]) }}</p>
                </div>
                <button type="button" wire:click="removeUpload({{ $i }})" class="shrink-0 rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-500">
                    <x-icon name="x-mark" class="h-5 w-5" />
                </button>
            </li>
        @endforeach
    </ul>
@endif