<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

<?php if ($this->message) : ?>
    <p class="alert <?php echo $this->type; ?> message"><?php echo $this->message; ?></p>
<?php endif; ?>


<?php if (!empty($this->products)) : ?>
    <div class="product-slider--wrapper mt-3">
        <div class="swiper product-slider product-slider_<?= $this->id; ?>">
            <div class="swiper-wrapper">
                <!-- Slides -->
                <?php foreach ($this->products as $product) : ?>
                    <div<?php echo $product['cssID']; ?> class="swiper-slide <?php echo $product['class']; ?>">
                        <?php echo $product['html']; ?>
                    </div>
                <?php endforeach; ?>
                <?php foreach ($this->products as $product) : ?>
                    <div<?php echo $product['cssID']; ?> class="swiper-slide <?php echo $product['class']; ?>">
                        <?php echo $product['html']; ?>
                    </div>
                <?php endforeach; ?>
                <?php foreach ($this->products as $product) : ?>
                    <div<?php echo $product['cssID']; ?> class="swiper-slide <?php echo $product['class']; ?>">
                        <?php echo $product['html']; ?>
                    </div>
                <?php endforeach; ?>
                <?php foreach ($this->products as $product) : ?>
                    <div<?php echo $product['cssID']; ?> class="swiper-slide <?php echo $product['class']; ?>">
                        <?php echo $product['html']; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="product-slider_<?= $this->id; ?> swiper-button-prev"></div>
        <div class="product-slider_<?= $this->id; ?> swiper-button-next"></div>
    </div>

<?php endif; ?>

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

                const swiper_<?php echo $this->id; ?> = new Swiper('.swiper.product-slider_<?= $this->id;?>', {
                    navigation: {
                        nextEl: '.product-slider_<?= $this->id;?>.swiper-button-next',
                        prevEl: '.product-slider_<?= $this->id;?>.swiper-button-prev',
                    },

                    direction: 'horizontal',
                    loop: true,
                    preloadImages: true,
                    slidesPerView: 1,
                    breakpoints: {
                        600: {
                            slidesPerView: 2,
                            spaceBetween: 50,
                        },

                        992: {
                            slidesPerView: <?= $this->iso_cols;?>,
                            spaceBetween: 50,
                        },

                        1400: {
                            slidesPerView: 4,
                            spaceBetween: 50,
                        },

                    }
                });
            }
        }, {passive: true})
    </script>

<?php $this->endblock(); ?>