<div class="p-8 m-auto w-[78%] xl:w-[63%] overflow-visible z-60 h-fit">
    <div class="w-16 p-4 text-white cursor-pointer z-20 relative" x-on:click="gallery=false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current">
            <path class="svg-c1"
                  d="M16.4 14.85l-4.488-4.488L16.4 5.874a1.1 1.1 0 0 0 0-1.552 1.1 1.1 0 0 0-1.552 0L10.36 8.8 5.873 4.322a1.1 1.1 0 0 0-1.552 0 1.1 1.1 0 0 0 0 1.552l4.488 4.488L4.32 14.85a1.1 1.1 0 0 0 0 1.552 1.1 1.1 0 0 0 1.552 0l4.488-4.488 4.488 4.488a1.1 1.1 0 0 0 1.552 0 1.1 1.1 0 0 0 0-1.552z">
            </path>
        </svg>
    </div>
    <div class="swiper swiper-gallery" x-data="{hover:false}" x-on:mouseover="hover=true" x-on:mouseleave="hover=false">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper" wire:ignore>
            @foreach($this->video->slides as $slide)
                <div class="swiper-slide">
                    <div class="rounded-xl overflow-hidden">
                        <img class="w-full" src="{{$url.$slide->url}}" alt="{{$slide->title}}"/>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="absolute z-10 swiper-gallery-prev xl:w-[20%] w-[11%] h-full top-0 right-0 flex justify-center items-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="#fff" class="w-12">
            <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 class="absolute z-10 swiper-gallery-next xl:w-[20%] w-[11%] h-full top-0 left-0 flex justify-center items-center">
        <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 60 60" fill="#fff" class="rotate-180 w-12">
            <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>
    <script>
        new Swiper(".swiper-gallery", {
            // Optional parameters
            // direction: 'vertical',
            // spaceBetween: 20,
            slidesPerView: 1,
            speed: 600,
            loop: true,
            parallax: false,
            // If we need pagination
            // pagination: {
            //     el: '.swiper-pagination',
            // },

            // // Navigation arrows
            navigation: {
                nextEl: ".swiper-gallery-next",
                prevEl: ".swiper-gallery-prev"
            },

            // // And if we need scrollbar
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },
        });
    </script>
</div>
