{{--
    Slot reutilizable para subir una imagen del sistema.
    Variables esperadas:
      $titulo, $icono, $preview, $dimension, $formatos, $route, $inputName, $inputId
--}}
<div class="col-12 col-md-3">
    <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">

        {{-- Preview de la imagen actual --}}
        <div class="position-relative bg-light d-flex align-items-center justify-content-center" style="height:160px;">
            <img src="{{ $preview }}"
                 alt="{{ $titulo }}"
                 class="w-100 mh-100">
            <span class="position-absolute top-0 start-0 m-2 badge bg-dark bg-opacity-50 text-white rounded-pill small fw-semibold">
                <i class="fa-solid fa-eye me-1"></i> Actual
            </span>
        </div>

        <div class="card-body p-3">
            <div class="d-flex align-items-center gap-2 mb-3">
                <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:34px;height:34px;">
                    <i class="fa-solid {{ $icono }}"></i>
                </div>
                <div>
                    <h6 class="fw-bold mb-0 text-dark">{{ $titulo }}</h6>
                    <small class="text-secondary">
                        <i class="fa-solid fa-ruler-combined me-1"></i> {{ $dimension }} · {{ $formatos }}
                    </small>
                </div>
            </div>

            <form action="{{ $route }}" method="post" enctype="multipart/form-data">
                {{ csrf_field() }}

                <label for="{{ $inputId }}" class="form-label fw-semibold text-secondary small">
                    <i class="fa-regular fa-image text-secondary me-1"></i> Nueva imagen
                </label>
                <input class="form-control form-control-sm mb-3" name="{{ $inputName }}" id="{{ $inputId }}" type="file" accept="image/*">

                <button type="submit" class="btn btn-primary btn-sm w-100 fw-semibold rounded-3 shadow-sm">
                    <i class="fa-solid fa-arrow-up-from-bracket me-1"></i> Subir
                </button>
            </form>
        </div>

    </div>
</div>