@aware(['page'])
<div>
    <div class="w-full h-[800px] mb-10">
        <div class="swiper photoSwiper h-full">
            <div class="swiper-wrapper">
                @foreach($carousels as $carousel)
                    <div class="swiper-slide h-[600px] bg-cover bg-center" style="background-image: url('{{ asset('storage/'.$carousel["image"]) }}');">
                        <div class="theme-max-w mx-auto flex h-[600px] px-5">
                            <div class="text-white z-10 my-auto bg-black/20 p-3 rounded-xl">
                                <h1 class="text-4xl md:text-4xl font-bold max-w-lg leading-snug" style="line-height: 52px;">{{$carousel['title']}}</h1>
                                <a href="{{$carousel['link']}}" class="inline-block mt-6 text-white font-bold no-underline">
                                    <span class="text-2xl mr-2">{{$carousel['linktext']}}</span>
                                    <i class="fa-solid fa-arrow-right-long my-auto"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="theme-max-w mx-auto px-5">
                <div class="text-right text-white text-sm -translate-y-12 relative z-20">
                    <span id="currentSlide">01</span> / <span id="totalSlides">02</span>
                </div>
            </div>
        </div>
    </div>

    @push("inlinescript")
        <script>
            const mainSwiper = new Swiper(".photoSwiper", {
                slidesPerView: 1,
                loop: false,
                speed: 800,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false
                },
                navigation: false,
                on: {
                    init: function () {
                        document.getElementById('totalSlides').textContent = String(this.slides.length).padStart(2, '0');
                        document.getElementById('currentSlide').textContent = String(this.realIndex + 1).padStart(2, '0');
                    },
                    slideChange: function () {
                        document.getElementById('currentSlide').textContent = String(this.realIndex + 1).padStart(2, '0');
                    }
                }
            });
        </script>
    @endpush
</div>