<?php

/*

type: layout

name: Default

description: Default

*/

?>
    <style>
        .slick-gallery img {
            padding: 0 6px;
        }

        .slick-gallery .slick-next {
            right: 45px;
            z-index: 99;
        }

        .slick-gallery .slick-prev {
            left: 45px;
            z-index: 99;
        }
    </style>
    <script>
        /* ###################### Slick   ###################### */
        $(document).ready(function () {
            if ($('<?php print '#' . $params['id']; ?> .slick-gallery').length > 0) {
                $('<?php print '#' . $params['id']; ?> .slick-gallery').each(function () {
                    var el = $(this);
                    el.slick({
                        centerMode: true,
                        centerPadding: '0px',
                        slidesToShow: 4,
                        arrows: false,
                        autoplay: true,
                        speed: 10000,
                        cssEase: 'linear',
                        autoplaySpeed: 0,
                        dots: false,
                        pauseOnFocus: true,
                        responsive: [
                            {
                                breakpoint: 1200,
                                settings: {
                                    arrows: false,
                                    centerMode: true,
                                    centerPadding: '0px',
                                    slidesToShow: 3
                                }
                            }, {
                                breakpoint: 768,
                                settings: {
                                    arrows: true,
                                    centerMode: true,
                                    centerPadding: '0px',
                                    slidesToShow: 2,
                                    autoplaySpeed: 3000,
                                    speed: 300,

                                }
                            }, {
                                breakpoint: 480,
                                settings: {
                                    arrows: true,
                                    centerMode: true,
                                    centerPadding: '0px',
                                    slidesToShow: 1,
                                    autoplaySpeed: 3000,
                                    speed: 300,
                                }
                            }
                        ]
                    });
                });
            }
        });

    </script>
<?php if (is_array($data)): ?>
    <?php $rand = uniqid(); ?>


    <div class="slick-gallery">
        <?php $count = -1;
        foreach ($data as $item): ?>
            <?php $count++; ?>
            <div class="slide item pictures picture-<?php print $item['id']; ?>" onclick="mw.gallery(gallery<?php print $rand; ?>, <?php print $count; ?>);return false;">
                <img src="<?php print thumbnail($item['filename'], 500, 500, true); ?>" alt="">
                <?php if (isset($item['image_options']['caption'])): ?>
                    <br/>
                    <p><?php echo $item['image_options']['caption']; ?></p>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    </div>
    <script>
        gallery<?php print $rand; ?> = [
                <?php foreach($data  as $item): ?>{image: "<?php print thumbnail($item['filename'], 900); ?>", description: "<?php print $item['title']; ?>"},
            <?php endforeach;  ?>
        ];
    </script>
<?php endif; ?>