{{--
    The catch-all upload reporter.

    Mounted once per layout, it shows progress and failures for any upload that
    doesn't have its own inline <x-upload-progress> bar on screen — so no file
    in the system can ever go up (or fail) silently.

    It also hands the browser the server's real size limits, which is what lets
    an oversized file be turned away instantly instead of after a long upload.
--}}
<div
    x-data
    x-init="$store.uploads.configure(@js(\App\Support\UploadLimits::forJs()))"
    x-cloak
    {{-- Sits clear of the bottom nav and the floating assistant button. --}}
    class="pointer-events-none fixed bottom-28 right-4 z-[70] flex w-72 flex-col gap-2 sm:w-80"
>
    <template x-for="item in $store.uploads.unclaimed" :key="item.uid">
        <div
            class="pointer-events-auto rounded-xl border bg-white p-3 shadow-lg ring-1 ring-black/5"
            :class="item.status === 'failed' ? 'border-rose-200' : (item.status === 'done' ? 'border-emerald-200' : 'border-slate-200')"
        >
            <div class="flex items-start gap-2">
                <span class="min-w-0 flex-1">
                    <span class="block truncate text-xs font-semibold text-slate-700" x-text="item.label" :title="item.label"></span>
                    <span
                        class="block text-[11px]"
                        :class="item.status === 'failed' ? 'text-rose-600' : 'text-slate-400'"
                        x-text="item.status === 'uploading' ? `{{ __('Uploading') }} · ${item.sizeLabel}` : (item.status === 'done' ? `{{ __('Uploaded') }}` : item.message)"
                    ></span>
                </span>

                <span x-show="item.status === 'uploading'" class="shrink-0 text-xs font-semibold tabular-nums text-indigo-600" x-text="item.progress + '%'"></span>

                <button
                    type="button"
                    x-show="item.status !== 'done'"
                    @click="item.status === 'uploading' ? $store.uploads.cancel(item.uid) : $store.uploads.dismiss(item.uid)"
                    class="shrink-0 text-[11px] font-medium text-slate-400 transition hover:text-rose-600"
                    x-text="item.status === 'uploading' ? '{{ __('Cancel') }}' : '{{ __('Dismiss') }}'"
                ></button>
            </div>

            <div x-show="item.status !== 'failed'" class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-200">
                <div
                    class="h-full rounded-full transition-all duration-200"
                    :class="item.status === 'done' ? 'bg-emerald-500' : 'bg-indigo-500'"
                    :style="`width: ${item.progress}%`"
                ></div>
            </div>
        </div>
    </template>
</div>