<?php header('Access-Control-Allow-Origin: *'); ?>

<?php if (TL_MODE == 'FE') {
    $GLOBALS['TL_CSS'][] = 'files/base/layout/css/elements/custom-elements/ce_rsce_videoslider.min.css|static';
}
?>


    <div <?php echo $this->cssID; ?> class="content--element <?php echo $this->class; ?>">
        <div class="ce--inner ">
            <?php if ($this->headline || $this->subline || $this->topline) : ?>
            <div class="ce--headline"
                 data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
                <div class="container">
                    <?php if ($this->topline) : ?>
                        <span class="ce--topline"><?php echo $this->topline; ?></span>
                    <?php endif; ?>
                    <?php if ($this->headline) : ?>
                    <<?php echo($this->hl); ?>>
                    <?php echo($this->headline); ?>
                </<?php echo($this->hl); ?>>
                <?php endif; ?>
                <?php if ($this->subline) : ?>
                    <span class="ce--subline"><?php echo $this->subline; ?></span>
                <?php endif; ?>
            </div>
        </div>
        <?php endif; ?>
        <div class="ce--videoslider"
             data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">

            <div class="ce--inner <?php if (!$this->fullwidth) : ?>container <?php endif; ?>">

                <div class="video-slider video-slider_<?= $this->id; ?> swiper custom">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper ">
                        <!-- Slides -->
                        <?php foreach ($this->elements as $slide) : ?>
                            <div class="swiper-slide"
                            >


                                <?php if ($slide->video_type == "inline"): ?>
                                    <div class="video_container">
                                        <embed data-source="//www.youtube-nocookie.com/embed/<?php echo $slide->video_id; ?>"
                                               title="<?php echo $slide->text; ?>" frameborder="0"
                                               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                               allowfullscreen>
                                    </div>
                                <?php else: ?>

                                    <a <?php if ($slide->video_type == "new_tab"): ?> target="_blank" <?php else : ?> class="video-link cboxElement" data-lightbox <?php endif; ?>
                                            href='//www.youtube-nocookie.com/watch?v=<?php echo $slide->video_id; ?>'>
                                        <img class="swiper-lazy"
                                             data-src="<?= Image::get(FilesModel::findByUuid($slide->image)->path, null, null, null); ?>">
                                    </a>
                                <?php endif; ?>


                                <?php if ($slide->text) : ?>
                                    <span class="slide-caption"><?php echo $slide->text; ?></span>
                                <?php endif; ?>


                                <?php if ($slide->longtext) : ?>
                                    <span class="slide-description"><?php echo $slide->longtext; ?></span>
                                <?php endif; ?>

                            </div>
                        <?php endforeach ?>

                    </div>

                </div>
                <?php if (count($this->elements) > 1) : ?>
                    <div class="video-slider_<?= $this->id; ?> swiper-pagination"></div>
                    <div class="video-slider_<?= $this->id; ?> swiper-button-prev"></div>
                    <div class="video-slider_<?= $this->id; ?> swiper-button-next"></div>
                <?php endif; ?>

            </div>

        </div>
    </div>
    </div>

<?php if (TL_MODE == 'FE'): ?>
    <script>
        window.addEventListener('load', function () {
            if ($('.swiper.video-slider_<?= $this->id;?>').length) {

                const swiper_<?php echo $this->id; ?> = new Swiper('.swiper.video-slider_<?php echo $this->id; ?>', {
                    direction: 'horizontal',

                    <?php if (count($this->elements) > 1) : ?>
                    navigation: {
                        nextEl: '.video-slider_<?= $this->id;?>.swiper-button-next',
                        prevEl: '.video-slider_<?= $this->id;?>.swiper-button-prev',
                    },

                    pagination: {
                        el: '.video-slider_<?php echo $this->id; ?>.swiper-pagination',
                        clickable: true,
                    },

                    loop: true,
                    <?php endif; ?>

                    preloadImages: false,
                    lazy: {
                        loadPrevNext: true,
                    },
                    slidesPerView: 1,
                    spaceBetween: 10,
                    checkInView: true,
                    // Responsive breakpoints
                    breakpoints: {
                        320: {
                            slidesPerView: 1,
                            spaceBetween: <?php echo $this->gutter; ?>
                        },
                        480: {
                            slidesPerView: 2,
                            spaceBetween: <?php echo $this->gutter; ?>
                        },
                        <?php if ($this->columns == 6) : ?>
                        768: {
                            slidesPerView: 3,
                            spaceBetween: <?php echo $this->gutter; ?>
                        },
                        992: {
                            slidesPerView: 4,
                            spaceBetween: <?php echo $this->gutter; ?>
                        },
                        1200: {
                            slidesPerView: 5,
                            spaceBetween: <?php echo $this->gutter; ?>
                        },
                        1400: {
                            slidesPerView: 6,
                            spaceBetween: <?php echo $this->gutter; ?>
                        },
                        <?php else : ?>
                        992: {
                            slidesPerView: <?php echo $this->columns; ?>,
                            spaceBetween: <?php echo $this->gutter; ?>
                        }
                        <?php endif; ?>
                    }
                });
            }
        }, {passive: true})
    </script>
<?php endif; ?>