@props(['sliders' => []])

@if ($sliders)
    <section class="container pt-3" aria-label="Promotions">
        <div id="saruarHeroCarousel" class="carousel slide sm-hero-carousel">
            @if (count($sliders) > 1)
                <div class="carousel-indicators">
                    @foreach ($sliders as $slider)
                        <button type="button" data-bs-target="#saruarHeroCarousel" data-bs-slide-to="{{ $loop->index }}" @class(['active' => $loop->first]) @if ($loop->first) aria-current="true" @endif aria-label="Slide {{ $loop->iteration }}"></button>
                    @endforeach
                </div>
            @endif

            <div class="carousel-inner">
                @foreach ($sliders as $slider)
                    <div @class(['carousel-item', 'active' => $loop->first])>
                        <div class="sm-hero">
                            <span class="sm-hero-seal"><i class="bi bi-gift-fill" aria-hidden="true"></i></span>

                            <div class="sm-hero-copy">
                                <h2 class="sm-hero-title">{{ $slider['title'] }}</h2>

                                {{-- A subtitle holds one or more chips, separated by |. --}}
                                @if ($slider['subtitle'])
                                    <ul class="sm-hero-chips list-unstyled">
                                        @foreach (explode('|', $slider['subtitle']) as $chip)
                                            <li>{{ trim($chip) }}</li>
                                        @endforeach
                                    </ul>
                                @endif

                                @if ($slider['button_text'] && $slider['link'])
                                    <a class="btn sm-btn-primary" href="{{ url($slider['link']) }}">{{ $slider['button_text'] }}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            @if (count($sliders) > 1)
                <button class="carousel-control-prev" type="button" data-bs-target="#saruarHeroCarousel" data-bs-slide="prev">
                    <i class="bi bi-chevron-left" aria-hidden="true"></i>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#saruarHeroCarousel" data-bs-slide="next">
                    <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    <span class="visually-hidden">Next</span>
                </button>
            @endif
        </div>
    </section>
@endif