@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp
<div class="glide banners relative">
    <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
            @foreach ($banners as $banner)
                <li class="glide__slide">
                    <a href="{{ $banner->link }}" @if ($banner->blank) target="_blank" @endif>
                        <img class="hidden lg:block w-full" src="{{ Storage::url($banner->image) }}"
                            alt="{{ config('app.name') }}" loading="lazy" >

                        <img class="block lg:hidden w-full" src="{{ Storage::url($banner->image_mobile) }}"
                            alt="{{ config('app.name') }}" loading="lazy" >
                    </a>
                </li>
            @endforeach
        </ul>
    </div>

</div>
@if(setting('site.marquee'))
<div class="marquee">
    <div class="track bg-secundario text-white text-base sm:text-lg md:text-2xl text-center  px-3 py-4 ">
        <span> {!! setting('site.marquee') !!} </span>
        <span> {!! setting('site.marquee') !!} </span>
    </div>
</div>
@endif
@if ($banners->count())
    @push('scripts')
        <script>
            window.addEventListener("load", (event) => {
                new Glide('.banners', {
                    type: 'carousel',
                    startAt: 0,
                    autoplay: @js($banners->count() > 1 ? 5000 : false),
                    perView: 1
                }).mount();
            });
        </script>
    @endpush
@endif