<?php
if(!($GLOBALS['lazyblock-slideshow-css'])) {
    $GLOBALS['lazyblock-slideshow-css'] = TRUE; ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css" integrity="sha512-eMxdaSf5XW3ZW1wZCrWItO2jZ7A9FhuZfjVdztr7ZsKNOmt6TUMTQgfpNoVRyfPE5S9BC0A4suXzsGSrAOWcoQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<?php } ?>
<?php
if(!($GLOBALS['lazyblock-slideshow-home-css'])) {
    $GLOBALS['lazyblock-slideshow-home-css'] = TRUE; ?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/assets/css/block-slideshow.css"/>
<?php } ?>

<div class="ADS_slideshow_home ADS_slideshow_<?php echo$attributes['blockId'] ?>">
    <?php foreach($attributes['slide'] as $item):?>
        <div class="ADS_slide">
            <div class="container">
                <div class="ADS_slide_text">
                    <h4><?php echo $item['sottotitolo'] ?></h4>
                    <h3><?php echo $item['titolo'] ?></h3>
                    <a href="<?php echo $item['link'] ?>"><?php echo $item['testo-pulsante'] ?></a>
                </div>
            </div>
            <div class="ADS_slide_overlay_img" style="background-image:url('<?php  echo $item['img']['url']; ?>');"></div>            
            <div class="ADS_slide_shape_1"></div>
            <div class="ADS_slide_shape_2"></div>
            <div class="ADS_slide_shape_3"></div>
            <div class="ADS_slide_shape_4"></div>
            <div class="ADS_slide_shape_5"></div>
        </div>
    <?php endforeach; ?>
</div>
<?php
if(!($GLOBALS['lazyblock-slideshow-js'])) { 
    $GLOBALS['lazyblock-slideshow-js'] = TRUE; ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js" integrity="sha512-j+F4W//4Pu39at5I8HC8q2l1BNz4OF3ju39HyWeqKQagW6ww3ZF9gFcu8rzUbyTDY7gEo/vqqzGte0UPpo65QQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<?php } ?>
<script>
    const slider_<?php echo $attributes['blockId'] ?> = tns({
		container: '.ADS_slideshow_<?php echo$attributes['blockId'] ?>',
		loop: true,
		controls:true,
		items: 1,
		nav: false,
		autoplay: true,
        controlsText: ['<i class="icon-right-arrow"></i><span>PREV</span>','<span>NEXT</span><i class="icon-right-arrow"></i>'],
		speed: 900,
        autoplayTimeout: 4500,
		autoplayButtonOutput: false,
		mouseDrag: true,
		lazyload: true
	});
</script>