<f:variable name="defaultGrid-{data.uid}"><f:if condition="{data.grid} == 0 || !{data}"><f:then>1</f:then><f:else>{data.grid}</f:else></f:if></f:variable>
<f:variable name="defaultGridLg-{data.uid}"><f:if condition="{data.grid_lg} == 0 || !{data}"><f:then>1</f:then><f:else>{data.grid_lg}</f:else></f:if></f:variable>

<f:switch expression="{data.grid_gutter}">
    <f:case value="no-gutters"><f:variable name="gridGutters">0</f:variable></f:case>
    <f:case value="bordered-gutters"><f:variable name="gridGutters">1</f:variable></f:case>
    <f:case value="thin-gutters"><f:variable name="gridGutters">5</f:variable></f:case>
    <f:case value="small-gutters"><f:variable name="gridGutters">15</f:variable></f:case>
    <f:defaultCase><f:variable name="gridGutters">30</f:variable></f:defaultCase>
</f:switch>

<f:variable name="autoplay"><f:if condition="{data.carousel_options.autoplay}"><f:then>{data.carousel_options.autoplay}</f:then><f:else>false</f:else></f:if></f:variable>
<f:variable name="transitionSpeed"><f:if condition="{data.carousel_options.transitionSpeed}"><f:then>{data.carousel_options.transitionSpeed}</f:then><f:else>1000</f:else></f:if></f:variable>
<f:variable name="loop"><f:if condition="{data.carousel_options.loop}"><f:then>true</f:then><f:else>false</f:else></f:if></f:variable>
<f:variable name="direction"><f:if condition="{direction}"><f:then>{direction}</f:then><f:else>horizontal</f:else></f:if></f:variable>
<f:variable name="effect"><f:if condition="{data.carousel_options.effect}"><f:then>{data.carousel_options.effect}</f:then><f:else>fade</f:else></f:if></f:variable>
<f:variable name="thumbs">true</f:variable>
<f:asset.script identifier="swiper-lib" src="EXT:ncn_basic/Resources/Public/Vendor/swiper/package/js/swiper.min.js" />
<f:asset.script identifier="swiper-init-{data.uid}">

    // Initialize Swiper when document is ready
    document.addEventListener("DOMContentLoaded", function() {
        var carouselElement = document.querySelector("#carousel-<f:format.raw>{data.uid}</f:format.raw> .gallery-wrapper");
        var thumbsElement = document.querySelector(".swiper-thumbs-container");

        if (carouselElement) {
            // Initialize Swiper for Thumbnails
            var swiperThumbs = new Swiper(thumbsElement, {
                slidesPerView: 4,
                spaceBetween: 10,
                freeMode: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            });

            // Initialize Main Swiper
            var swiper = new Swiper('.swiper-container-<f:format.raw>{data.uid}</f:format.raw>', {
                slidesPerView: <f:format.raw>{defaultGrid-{data.uid}}</f:format.raw>,
                spaceBetween: <f:format.raw>{gridGutters}</f:format.raw>,
                direction: '<f:format.raw>{direction}</f:format.raw>',
                slidesPerGroup: 1,
                loop: <f:format.raw>{loop}</f:format.raw>,
                autoHeight: false,
                effect: '<f:format.raw>{effect}</f:format.raw>',
                speed: <f:format.raw>{transitionSpeed}</f:format.raw>,
                grabCursor: true,
                keyboard: {
                    enabled: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                },
                thumbs: {
                    swiper: swiperThumbs,
                },
                breakpoints: {
                    992: {
                        slidesPerView: <f:format.raw>{defaultGridLg-{data.uid}}</f:format.raw>,
                        spaceBetween: <f:format.raw>{gridGutters}</f:format.raw>,
                    }
                }
            });

            // Clone the thumbs container
            if (thumbsElement) {
                var clonedThumbs = thumbsElement.cloneNode(true);
                clonedThumbs.classList.add("cloned-thumbs-container");
                carouselElement.parentNode.insertBefore(clonedThumbs, carouselElement.nextSibling);

                // Initialize Swiper for the cloned thumbs
                new Swiper(clonedThumbs, {
                    slidesPerView: 4,
                    spaceBetween: 10,
                    freeMode: true,
                    watchSlidesVisibility: true,
                    watchSlidesProgress: true,
                });
            }
        }
    });

</f:asset.script>