@if(count($teams))
<div class="m-auto text-white px-5 md:px-10 mb-10">
    <h3 class="text-lg font-bold mb-5">{{__('theme-ekmal::lang.crew_team')}} {{__("serial::lang.vod_types.$video->vod_type")}} {{$video->title}}</h3>
    <div class="swiper z-0" x-on:mouseover="hover=true" x-on:mouseleave="hover=false" x-data="{
                    swiperMain: false,
                    hover:false,
                    init() {
                        this.swiperMain = new Swiper(this.$el, {
                            spaceBetween: 30,
                            slidesPerView: 3,
                            slidesPerGroup: 3,
                            breakpoints: {
                                512: {
                                    slidesPerView: 4,
                                    slidesPerGroup: 4,
                                    spaceBetween: 15,

                                },
                                1024: {
                                    slidesPerView: 5,
                                    slidesPerGroup: 5,
                                    spaceBetween: 40,
                                },
                                1280: {
                                    slidesPerView: 7,
                                    slidesPerGroup: 7,
                                    spaceBetween: 20,
                                },
                                1536: {
                                    slidesPerView: 7,
                                    slidesPerGroup: 7,
                                    spaceBetween: 30,
                                },
                                1919: {
                                    slidesPerView: 9,
                                    slidesPerGroup: 9,
                                    spaceBetween: 20,
                                },
                            },
                            speed: 600,
                            loop: true,
                            parallax: true,

                            // Navigation arrows
                            navigation: {
                                nextEl: $refs.next,
                                prevEl: $refs.prev
                            },

                        })
                    }
                }">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper" wire:ignore>
            @foreach($teams as $crew)
                @include('theme::partials.card.team')
            @endforeach
        </div>

        <!-- If we need navigation buttons -->
        <div x-ref="next" class="absolute z-10 swiper-team-prev w-11 h-full bg-gradient-to-l from-[#121212] from-0% top-0 right-0 flex items-center"
             x-show="hover">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="#fff">
                <path
                    d="M27.1 20.5c-.7-.7-1.9-.7-2.6 0s-.7 1.9 0 2.6l7.1 7.1-7.1 7.1c-.7.7-.7 1.9 0 2.6.4.4.8.5 1.3.5s.9-.2 1.3-.5l8.4-8.4c.3-.3.5-.8.5-1.3s-.2-.9-.5-1.3l-8.4-8.4z">
                </path>
            </svg>
        </div>
        <div x-ref="prev" class="absolute z-10 swiper-team-next w-11 h-full bg-gradient-to-r from-[#121212] from-0% top-0 left-0 flex items-center"
             x-show="hover">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="#fff" class="rotate-180">
                <path
                    d="M27.1 20.5c-.7-.7-1.9-.7-2.6 0s-.7 1.9 0 2.6l7.1 7.1-7.1 7.1c-.7.7-.7 1.9 0 2.6.4.4.8.5 1.3.5s.9-.2 1.3-.5l8.4-8.4c.3-.3.5-.8.5-1.3s-.2-.9-.5-1.3l-8.4-8.4z">
                </path>
            </svg>
        </div>
    </div>
</div>
@endif
