@props(['name', 'label', 'preview' => null, 'accept' => 'image/*', 'hint' => null, 'removeName' => null])
{{-- Image upload with the current file as preview; removeName adds a "remove" box (the file is deleted on save). --}}
@php($id = $attributes->get('id', $name))
@php($key = str_replace(['[', ']'], ['.', ''], $name))
<div>
    <label class="form-label" for="{{ $id }}">{{ $label }}</label>
    @if ($preview)
        <img src="{{ $preview }}" alt="" class="mb-2 h-16 max-w-full rounded-lg bg-gray-100 object-contain p-1 dark:bg-gray-800">
    @endif
    <input type="file" name="{{ $name }}" id="{{ $id }}" accept="{{ $accept }}"
           {{ $attributes->except('id')->class('block w-full text-sm text-gray-500 file:me-3 file:rounded-lg file:border-0 file:bg-gray-100 file:px-3 file:py-2 file:text-sm file:font-medium hover:file:bg-gray-200 dark:file:bg-gray-800 dark:file:text-gray-200') }}>
    @if ($hint)<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ $hint }}</p>@endif
    @if ($removeName)
        <label class="mt-2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
            <input type="hidden" name="{{ $removeName }}" value="0">
            <input type="checkbox" name="{{ $removeName }}" value="1" class="rounded border-gray-300 dark:border-gray-700">
            {{ __('Remove this file') }}
        </label>
    @endif
    @error($key)<p class="form-error">{{ $message }}</p>@enderror
</div>