{{--
    The product's current image, on the edit form.

    A plain <img>, deliberately: the file sits on the platform bucket, a
    different origin from the app, and an <img> is not subject to CORS the way
    the upload widget's own fetch is. This is the same URL the POS grid and
    every listing render, so what the operator sees here is what the terminal
    shows.
--}}
<div class="flex items-center gap-3 rounded-lg border border-dashed border-gray-300 p-3 dark:border-white/10">
    @if (filled($url ?? null))
        <img
            src="{{ $url }}"
            alt="Current product image"
            @class([
                'h-16 w-16 rounded-md border border-gray-200 bg-white object-contain dark:border-white/10',
                'opacity-40 grayscale' => $removing ?? false,
            ])
        >
    @else
        <div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-[10px] text-gray-400 dark:border-white/10 dark:bg-gray-800">
            No image
        </div>
    @endif

    <div class="text-xs text-gray-500 dark:text-gray-400">
        @if ($removing ?? false)
            <span class="font-medium text-danger-600 dark:text-danger-400">This image will be removed when you save.</span>
        @else
            Current image. Upload a new one below to replace it.
        @endif
    </div>
</div>