<div x-data="{visible:true}" class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3 2xl:grid-cols-5 3xl:grid-cols-6 gap-3 lg:gap-4 3xl:gap-5 px-5 md:px-8 lg:px-10 3xl:px-16">
    @foreach($items as $item)
        
        @foreach($items as $item)
            @php
                $item = $item->withFakes();
                $link = url('/v/'.$item->slug);
            @endphp
            @include('theme::partials.video_card')
        @endforeach
    @endforeach
        @if($items->hasMorePages())
            <div  x-data="{
                    observe () {
                        let observer = new IntersectionObserver((entries) => {
                            entries.forEach(entry => {
                                if (entry.isIntersecting) {
                                    @this.call('addMore')
                                }
                            })
                        }, {
                            root: null
                        })

                        observer.observe(this.$el)
                    }
                }" x-init="observe" wire:loading class="swiper-slide group cursor-pointer mb-8 " style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-[#222327] animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
            <div wire:loading class="swiper-slide group cursor-pointer mb-8 aspect-video" style="width: 100%;height: 100%;flex-shrink: 0;display: block;">
                <div class="rounded-md overflow-hidden relative bg-white animate-pulse" style="aspect-ratio: 1 / 1.47;">
                </div>
            </div>
        @endif
</div>
