{{--
  Reusable CMS image upload widget.
  Props: $fieldKey (unique id), $currentUrl (existing URL or ''), $placeholder (hint text)
--}}
<div class="cms-img-wrap">
    <div class="cms-img-preview-row">
        @if($currentUrl)
        <img id="cms-img-thumb-{{ $fieldKey }}" src="{{ $currentUrl }}" alt="Current">
        @else
        <div id="cms-img-ph-{{ $fieldKey }}" class="cms-img-placeholder">🖼</div>
        <img id="cms-img-thumb-{{ $fieldKey }}" src="" alt="" style="display:none;width:52px;height:52px;object-fit:cover;border-radius:.3rem;border:1px solid #E8D5C4;">
        @endif
        <div style="flex:1;min-width:0;">
            <div style="font-size:.78rem;color:#2C1810;font-weight:600;margin-bottom:.15rem;">
                @if($currentUrl) Current image — upload to replace @else No image yet @endif
            </div>
            <div style="font-size:.72rem;color:#7A6058;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                {{ $currentUrl ?: $placeholder ?? 'optional' }}
            </div>
        </div>
    </div>
    <div class="cms-img-upload-row">
        <input type="file" id="cms-file-{{ $fieldKey }}" accept="image/*"
               onchange="cmsUploadImage(this, '{{ $fieldKey }}')">
        <span style="font-size:.72rem;color:#a89891;">max 8 MB</span>
    </div>
    <div id="cms-img-status-{{ $fieldKey }}" class="cms-img-status"></div>
</div>