{{-- Container do carrossel. --}}
<div class="overflow-hidden relative w-full bg-[#003ca6]" x-data="{
    interval: null,
    ativo: 0,
    anterior() {
        this.ativo && this.ativo--
    },
    proximo() {
        this.resetInterval();
        this.ativo = ++this.ativo % @js(count($slides));
    },
    resetInterval() {
        window.clearTimeout(this.interval)
        this.interval = window.setTimeout(() => {
            console.log('tick');
            this.proximo();
        }, 7000);
    },
    init() {
        this.resetInterval()
    }
    }">
    <div class="flex transition-transform duration-500"
         x-effect="$el.style.transform = `translateX(${ ativo * -100 }%)`">
        @foreach ($slides as $indice => $slide)
            {{-- Cartão equivalente a um item do carrossel. --}}
            <div class="h-[580px] sm:h-[775px] min-w-full flex items-center">
                {{-- Imagem de fundo, por ser absoluta pode ficar dentro do cartão sem problemas. --}}
                <picture class="absolute w-full h-[inherit] z-[-1]">
                    <source media="(max-width: 768px)" srcset="{{ asset('storage/' . ($slide['mobile'] ?? $slide['imagem'])) }}">
                    <img src="{{ asset('storage/' . $slide['imagem']) }}" alt="Imagem de Fundo"
                         class="h-[inherit] w-full object-cover pointer-events-none">
                </picture>
                <!-- Texto e botão -->
                <div class="home-vitrine w-full max-w-[85.375rem] pt-[--header-height] mx-auto">
                    <div class="box-border flex flex-col items-start mt-[-128px]">
                        <div class="m-0 text-sky-blue tracking-[7.7px] uppercase font-bricolage text-sm font-bold">
                            {{ $slide['titulo'] }}
                        </div>
                        <h2 class="block font-bold leading-none my-3 text-13xl text-white sm:text-41xl font-bricolage [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] sm:[text-shadow:none] max-w-[30rem]">
                            {!! str($slide['descricao'])->sanitizeHtml() !!}
                        </h2>
                        @if ($slide['exibir_botao'])
                            <a class="text-midnightblue-100 bg-white rounded-full px-8 py-4 font-bold text-sm sm:text-base mt-4"
                               href="{{ $slide['botao_url'] }}">
                                {{ $slide['botao_texto'] }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    {{-- Paginação, controle do carrossel. --}}
    <div class="absolute bottom-[140px] right-0 left-0">
        <div class="max-w-[85.375rem] mx-auto flex justify-end items-end">
            <div
                class="bg-white/0.1 px-6 py-3 backdrop-blur-[15px] backdrop-brightness-[105%] border-2 border-white border-solid border-opacity-40 rounded-full hidden sm:inline-flex gap-x-2">
                <button class="p-2" @click="anterior()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.414 14.828" width="18.414"
                         height="14.828">
                        <path d="M17.414 7.414h-16m0 0 6-6m-6 6 6 6" fill="none" stroke="#fff"
                              stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </button>
                @foreach ($slides as $indice => $slide)
                    <button class="flex p-2 items-center justify-center" @click="ativo = @js($indice)">
                        <span class="block w-2 h-2 rounded-full border border-solid border-white"
                              :class="ativo === @js($indice) ? 'bg-white' : 'bg-transparent'"></span>
                    </button>
                @endforeach
                <button class="p-2" @click="proximo()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.414 14.828" width="18.414"
                         height="14.828">
                        <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="#fff" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

@pushonce('scripts')
    <style>
        .home-vitrine {
            padding-inline: 2rem;
        }
        /* 85.375rem + 4 */
        @media (min-width: 89.375rem) {
            .home-vitrine {
                padding-inline: 0;
            }
        }
    </style>
@endpushonce