@props(['target'])

{{--
    Inline upload progress for one `wire:model` file property.

    Drop it next to any file input: <x-upload-progress target="upload" />

    While a file is going up it shows the name, a percentage and a live bar
    with a Cancel button; when it fails it shows why. It also takes over the
    server-side validation message for the property, so a screen using this
    component does not need a separate <x-input-error> for the same field.

    Registering ("claiming") the property here keeps <x-upload-tray> quiet for
    it, so an upload is never reported in two places at once.
--}}
<div
    x-data="uploadProgress($wire.$id, @js($target))"
    x-effect="if (done) succeeded = true"
    {{ $attributes->merge(['class' => 'space-y-1.5']) }}
>
    <div
        x-show="item"
        x-cloak
        class="rounded-xl border px-3 py-2"
        :class="failed ? 'border-rose-200 bg-rose-50' : (done ? 'border-emerald-200 bg-emerald-50' : 'border-slate-200 bg-white')"
    >
        <div class="flex items-center gap-2">
            <span
                class="min-w-0 flex-1 truncate text-[11px] font-medium"
                :class="failed ? 'text-rose-700' : (done ? 'text-emerald-700' : 'text-slate-600')"
                x-text="item?.label"
                :title="item?.label"
            ></span>

            <span x-show="uploading" class="shrink-0 text-[11px] font-semibold tabular-nums text-indigo-600" x-text="(item?.progress ?? 0) + '%'"></span>
            <span x-show="done" class="shrink-0 text-[11px] font-semibold text-emerald-600">{{ __('Uploaded') }}</span>

            <button type="button" x-show="uploading" @click="cancel()" class="shrink-0 text-[11px] font-medium text-slate-400 transition hover:text-rose-600">
                {{ __('Cancel') }}
            </button>

            <button type="button" x-show="failed" @click="dismiss()" class="shrink-0 text-[11px] font-medium text-rose-400 transition hover:text-rose-700">
                {{ __('Dismiss') }}
            </button>
        </div>

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

        <p x-show="uploading" class="mt-1 text-[10px] text-slate-400" x-text="item?.sizeLabel"></p>
        <p x-show="failed" class="mt-1 text-[11px] leading-snug text-rose-600" x-text="item?.message"></p>
    </div>

    {{-- Anything the server rejected the file for, once the live state above has nothing to say. --}}
    @php
        // Multi-file properties report under "name.0", hence the wildcard fallback.
        $uploadError = $errors->first($target) ?: $errors->first($target.'.*');
    @endphp
    @if ($uploadError)
        <p x-show="! item && ! succeeded" x-cloak class="text-[11px] font-medium text-rose-600">{{ $uploadError }}</p>
    @endif
</div>