@props([
    'name',
    'label',
    'current' => null,
    'required' => false,
    'col' => 'col-md-4',
])

<div class="{{ $col }}">
    <label class="form-label {{ $required ? 'required' : '' }}" for="{{ $name }}">{{ $label }}</label>
    <input type="file" accept="image/*"
           id="{{ $name }}" name="{{ $name }}"
           @required($required)
           class="form-control {{ $errors->has($name) ? 'is-invalid' : '' }}"
           onchange="const p = document.getElementById('{{ $name }}_preview'); if (this.files[0]) { p.src = URL.createObjectURL(this.files[0]); p.classList.remove('d-none'); }">

    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror

    <img id="{{ $name }}_preview"
         src="{{ $current ?: '' }}"
         alt=""
         class="image-preview mt-2 {{ $current ? '' : 'd-none' }}">
</div>