@props(['name', 'label' => 'Upload & crop'])

{{-- A cropper-backed image field. The matching <x-image-cropper id="smc_{name}">
     (defined once in the sports-match modal) writes the cropped file onto the
     hidden input below and updates #sm-prev-{name}. --}}
<div {{ $attributes->merge(['class' => 'sm-img-field']) }} data-img="{{ $name }}">
    <input type="file" name="{{ $name }}" id="sm-file-{{ $name }}" accept=".jpg,.jpeg,.png,.webp" hidden>
    <button type="button" class="sm-img-drop" onclick="smOpenCropper('smc_{{ $name }}')">
        <img class="sm-img-preview d-none" id="sm-prev-{{ $name }}" alt="">
        <span class="sm-img-ph"><i class="bi bi-crop"></i><span>{{ $label }}</span></span>
    </button>
</div>