@props([
    'label' => 'Image',
    'image' => null,
    'model' => '',
    'currentImage' => null,
    'currentImageClass' => 'rounded shadow-sm mb-2 h-100px',
])

<label class="form-label">{{ $label }}</label>
<div wire:loading wire:target="{{ $model }}" class="my-4">
    <div class="spinner text-light"></div>
</div>

<div>
@if($image && $image->isPreviewable())
    <img src="{{ $image->temporaryUrl() }}" class="h-150px mb-2 shadow-sm">
    <a class="btn btn-trigger btn-icon ms-2" wire:click="$set('{{ $model }}', null)">
        <em class="icon ni ni-trash"></em>
    </a>
@elseif($currentImage)
    <img src="{{ asset($currentImage) }}" class="{{ $currentImageClass }}">
    <a class="btn btn-trigger btn-icon ms-2" wire:click="$set('removeImage', true)"><em class="icon ni ni-trash"></em></a>
@endif
</div>

<div class="form-control-wrap">
    <div class="form-file">
        <input id="customFile" type="file" class="form-file-input" wire:model="{{ $model }}">
        <label class="form-file-label" for="customFile">
            {{ __('Select an image') }}
        </label>
        @error($model) <span class="invalid">{{ $message }}</span> @enderror
    </div>
</div>