{block name='snippets-product-slider'}
    {strip}
    {if isset($productlist) && (count($productlist) > 0 || !empty($infoBoxes))}

        {* Set default options if needed *}
        {$tplscope=$tplscope|default:'slider'}
        {$lazyLoadImages=$lazyLoadImages|default:true}
        {$isOPC=$isOPC|default:false}
        {$slidesToScroll=$slidesToScroll|default:[]}
        {$infoBoxes=$infoBoxes|default:[]}
        {$sliderId=$sliderId|default:md5(microtime())}
        {$autoSlideInterval=$autoSlideInterval|default:0}

        {if isset($et_global.breakpoints)}
            {$etBreakpoints=$et_global.breakpoints}
        {else}
            {et_getBreakpoints assign='etBreakpoints'}
        {/if}
        
        {* Box Slider, ie. only one Slide Box visible *}
        {if $tplscope === 'box'}
            {block name='snippets-product-slider-box'}
                <div class="card {if $tplscope === 'box'} box box-slider{/if}{if !empty($class)} {$class}{/if}" id="{if !empty($id)}{$id}{/if}">
                    <div class="card-body">
                    {if !empty($title)}
                        {block name='snippets-product-slider-box-title'}
                            <div class="productlist-filter-headline">
                                {$title}
                                {if !empty($moreLink)}
                                    <a class="more float-right" href="{$moreLink}" title="{$moreTitle}" data-toggle="tooltip" data-placement="auto right" aria-label="{$moreTitle}">
                                        <i class="{et_getIcon key="navigationNext"}"></i>
                                    </a>
                                {/if}
                            </div>
                        {/block}
                    {/if}
                    {block name='snippets-product-slider-box-products'}
                        <div class="slick-slider-mb slick-smooth-loading carousel carousel-arrows-inside slick-lazy slick-type-box {if count($productlist) < 3}slider-no-preview{/if}"
                            data-slick-type="{block name='product-box-slider-class'}box-slider{/block}">
                            {include file='snippets/slider_items.tpl'
                                items=$productlist
                                type='product'
                                lazyLoadImages=$lazyLoadImages
                                infoBoxes=$infoBoxes
                            }
                        </div>
                    {/block}
                    </div>
                </div>
            {/block}
        {* Other slider types, ie. normal product slider *}
        {else}
            {block name='snippets-product-slider-other'}
                <div class="slick-slider-other{if !$isOPC} is-not-opc{/if}{if !empty($class)} {$class}{/if}"{if !empty($id)} id="{$id}"{/if}>
                    {* The Product Slider Widget does not use a title atm, but for compatability reasons we keep this option :) *}
                    {if !empty($title)}
                        {block name='snippets-product-slider-other-title'}
                            {if $titleContainer|default:false}<div class="container slick-slider-other-container">{/if}
                                <div class="h2 slick-slider-other-title">
                                    {if !empty($moreLink)}
                                        <a class="text-decoration-none-util" href="{$moreLink}" title="{$moreTitle}" data-toggle="tooltip" data-placement="auto right" aria-label="{$moreTitle}">
                                            {$title}
                                        </a>
                                    {else}
                                        {$title}
                                    {/if}
                                </div>
                        {if $titleContainer|default:false}</div>{/if}
                        {/block}
                    {/if}

                    {* Product Slider *}
                    {block name='snippets-product-slider-other-products'}
                        <div class="et-product-slider-slider et-slider carousel slick-smooth-loading slider-no-preview {if $tplscope === 'half'}slick-type-half{else}slick-type-product{/if}"
                            id="et-product-slider-{$sliderId}"
                            data-slick='{block name="snippets-product-slider-other-products-slick-config"}{
                                "nextArrow": "#et-product-slider-next-{$sliderId}",
                                "prevArrow": "#et-product-slider-prev-{$sliderId}",
                                {if isset($slidesToShow, $slidesToShow.xl) && $slidesToShow.xl > 0}
                                    "slidesToShow": {json_encode($slidesToShow.xl)},
                                {else}
                                    "slidesToShow": 4,
                                {/if}
                                {if $autoSlideInterval && $autoSlideInterval > 0}
                                    "autoplay": true,
                                    "autoplaySpeed": {json_encode($autoSlideInterval)},
                                {else}
                                    "autoplay": false,
                                {/if}
                                "slidesToScroll": {if !empty($slidesToScroll.xl) && $slidesToScroll.xl > 0}{$slidesToScroll.xl}{else}1{/if},
                                "adaptiveHeight": true,
                                "responsive": [
                                    { "breakpoint": {$etBreakpoints.lgMax}, "settings": { "slidesToShow": {if isset($slidesToShow, $slidesToShow.lg) && $slidesToShow.lg > 0}{json_encode($slidesToShow.lg)}{else}4{/if}, "slidesToScroll": {if !empty($slidesToScroll.lg) && $slidesToScroll.lg > 0}{$slidesToScroll.lg}{else}1{/if} }},
                                    { "breakpoint": {$etBreakpoints.mdMax}, "settings": { "slidesToShow": {if isset($slidesToShow, $slidesToShow.md) && $slidesToShow.md > 0}{json_encode($slidesToShow.md)}{else}3{/if}, "slidesToScroll": {if !empty($slidesToScroll.md) && $slidesToScroll.md > 0}{$slidesToScroll.md}{else}1{/if} }},
                                    { "breakpoint": {$etBreakpoints.smMax}, "settings": { "slidesToShow": {if isset($slidesToShow, $slidesToShow.sm) && $slidesToShow.sm > 0}{json_encode($slidesToShow.sm)}{else}2{/if}, "slidesToScroll": {if !empty($slidesToScroll.sm) && $slidesToScroll.sm > 0}{$slidesToScroll.sm}{else}1{/if} }},
                                    { "breakpoint": {$etBreakpoints.xsMax}, "settings": { "slidesToShow": {if isset($slidesToShow, $slidesToShow.xs) && $slidesToShow.xs > 0}{json_encode($slidesToShow.xs)}{else}2{/if}, "slidesToScroll": {if !empty($slidesToScroll.xs) && $slidesToScroll.xs > 0}{$slidesToScroll.xs}{else}1{/if} }}
                                ],
                                "lazyload": "ondemand"
                            }{/block}'>
                                {block name='snippets-product-slider-other-products-slider-items'}
                                    {include file='snippets/slider_items.tpl'
                                        items=$productlist
                                        type='product'
                                        lazyLoadImages=$lazyLoadImages
                                        infoBoxes=$infoBoxes
                                    }
                                {/block}
                        </div>

                        {* Product Slider Navigation *}
                        {block name="snippets-product-slider-other-products-navigation-arrows"}
                            <div class="et-slider-nav" id="et-product-slider-nav-{$sliderId}">
                                {block name="snippets-product-slider-other-products-navigation-arrows-prev"}
                                    <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-product-slider-prev-{$sliderId}">
                                        <i class="{et_getIcon key='sliderPrevious'}"></i>
                                    </div>
                                {/block}

                                {block name="snippets-product-slider-other-products-navigation-arrows-next"}
                                    <div class="et-slider-nav-next enabled slick-arrow slick-hidden" id="et-product-slider-next-{$sliderId}">
                                        <i class="{et_getIcon key='sliderNext'}"></i>
                                    </div>
                                {/block}
                            </div>
                        {/block}
                    {/block}
                </div>
            {/block}
        {/if}
    {/if}
    {/strip}
{/block}
