@props(['name', 'label' => null, 'current' => null, 'help' => null, 'multiple' => false])
<div {{ $attributes->only('class') }} x-data="{ preview: null }">
    @if ($label)<span class="form-label">{{ $label }}</span>@endif
    <div class="flex items-center gap-4">
        <div class="flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-dashed border-gray-300 bg-gray-50">
            <template x-if="preview"><img :src="preview" alt="" class="size-full object-cover"></template>
            <template x-if="!preview">
                @if ($current)
                    <img src="{{ media_url($current) }}" alt="" class="size-full object-cover">
                @else
                    <x-icon name="photo" class="size-7 text-gray-400" />
                @endif
            </template>
        </div>
        <div class="min-w-0 flex-1">
            <input type="file" name="{{ $name }}" accept="image/*" @if ($multiple) multiple @endif
                   @change="const f = $event.target.files[0]; preview = f ? URL.createObjectURL(f) : null"
                   class="block w-full text-sm text-gray-600 file:mr-3 file:rounded-md file:border-0 file:bg-navy-800 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white hover:file:bg-navy-700">
            @if ($help)<p class="mt-1 text-xs text-gray-500">{{ $help }}</p>@endif
            @error($name)<p class="form-error">{{ $message }}</p>@enderror
        </div>
    </div>
</div>