<?php
/**
 * Copyright © 2015-2017 Ihor Vansach (ihor@magefan.com). All rights reserved.
 * See LICENSE.txt for license details (http://opensource.org/licenses/osl-3.0.php).
 *
 * Glory to Ukraine! Glory to the heroes!
 */
?>
<?php
/**
 * Blog post media gallery images template
 *
 * @var $block \Magefan\Blog\Block\Post\View\Gallery
 */
?>

<?php
    $post = $block->getPost();
    $galleryImages = $post->getGalleryImages();
    $widget = ['themewidgets' => [
        'codazon.slider' => ['sliderConfig' => [
            'responsive' => [
                0       => ['items' => 2],
                320     => ['items' => 2],
                480     => ['items' => 3],
                768     => ['items' => 3],
                980     => ['items' => 4],
                1280    => ['itens' => 4],
                1420    => ['items' => 4],
                1600    => ['items' => 4],
                1900    => ['items' => 5],
            ],
            'margin' => 20,
            'dots' => true,
            'nav'   => true
        ]]
    ]];
?>

<?php if (count($galleryImages)) { ?>
    <div class="post-gallery clearfix">
        <div class="list items owl-carousel" data-mage-init='<?= json_encode($widget) ?>'>
            <?php foreach ($galleryImages as $image) : ?>
            <div class="item">
                <a class="gallery-image-hld" data-fancybox="gallery" href="<?php echo $block->escapeHtml($image) ?>">
                    <img class="gallery-image" src="<?php echo $block->escapeHtml($image->resize(200)) ?>" alt="" />
                </a>
            </div>
            <?php endforeach ?>
        </div>
    </div>
    <script>
    require(['jquery', 'domReady!'], function($){
        /* Deferer fancybox css loading */
        $("head").append($("<link rel='stylesheet' href='<?php echo $block->getViewFileUrl("Magefan_Blog::css/jquery.fancybox.min.css") ?>' type='text/css' media='screen' />"));
        /* Deferer fancybox js loading */
        require(['Magefan_Blog/js/jquery.fancybox.min'], function(){});
    });
</script>
<?php } ?>