@if(!$sliders->isEmpty())
    <div id="carousel-sse" class="carousel slide carousel-fade" data-bs-ride="carousel">
        @php $isFirst = true; @endphp
        <div class="carousel-indicators">
            @foreach($sliders as $key => $slider)
                <button type="button" data-bs-target="#carousel-sse" data-bs-slide-to="{{ $key }}" class="{{ $isFirst ? 'active' : '' }}" {{ $isFirst ? 'aria-current="true"' : '' }} aria-label="{{ Str::slug($slider->titulo) }}"></button>
                @php $isFirst = false; @endphp
            @endforeach
        </div>
        <div class="carousel-inner">
            @foreach($sliders as $key => $slider)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                    <img src="{{ env('URL_IMAGE_SISSE') . $slider->imagen }}" class="d-block w-100" alt="{{ $slider->titulo }}" loading="lazy">
                    @if(isset($slider->titulo) || isset($slider->descripcion) || isset($slider->enlace))
                        <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75 rounded-3">
                            @isset($slider->titulo)
                                <div class="h1 px-4 py-1 text-truncate">
                                    {{ $slider->titulo }}
                                </div>
                            @endisset
                            @isset($slider->descripcion)
                                <p class="px-4 fs-5 fw-light text-truncate d-none d-lg-block">
                                    {{ $slider->descripcion }}
                                </p>
                            @endisset
                            @isset($slider->enlace)
                                <a class="btn btn-secondary mb-2 rounded-3" href="{{ $slider->enlace }}">
                                    Más información
                                </a>
                            @endisset
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-sse" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel-sse" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
@endif