{extends file="widgets/base/widget.tpl"}

{strip}
    {block name="et-widget-container-inner"}
        {block name="et-image-slider-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_ImageSlider.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-image-slider-text-before"}
            {if !empty($et_ImageSlider.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_ImageSlider.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        <div class="et-image-slider-wrapper row">
            <div class="col p-0">
                {block name="et-image-slider"}
                    <div class="et-image-slider et-slider et-hover-style-{$et_ImageSlider.hoverStyle}{if $et_ImageSlider.noPadding} et-image-slider-nopadding{/if}" data-slick='{
                        "dots": {if $et_ImageSlider.showNavigationBubbles}true{else}false{/if},
                        "appendDots": "#et-slider-bottom-nav-{$et_BaseWidget.id}",
                        "infinite": true,
                        "arrows": {if $et_ImageSlider.showNavigationArrows}true{else}false{/if},
                        "adaptiveHeight": {if $et_ImageSlider.adaptiveHeight}true{else}false{/if},
                        "centerMode": {if $et_ImageSlider.centerMode}true{else}false{/if},
                        "autoplay": {if $et_ImageSlider.autoSlideInterval > 0}true{else}false{/if},
                        "autoplaySpeed": {$et_ImageSlider.autoSlideInterval},
                        "nextArrow": "#et-image-slider-next-{$et_BaseWidget.id}",
                        "prevArrow": "#et-image-slider-prev-{$et_BaseWidget.id}",
                        "slidesToShow": {if !empty($et_ImageSlider.slideCount.xl) && $et_ImageSlider.slideCount.xl > 0}{$et_ImageSlider.slideCount.xl}{else}5{/if},
                        "slidesToScroll": {if !empty($et_ImageSlider.slidesToScroll.xl) && $et_ImageSlider.slidesToScroll.xl > 0}{$et_ImageSlider.slidesToScroll.xl}{else}1{/if},
                        "responsive": [
                                { "breakpoint": {$et_global.breakpoints.lgMax}, "settings": { "slidesToShow": {if !empty($et_ImageSlider.slideCount.lg) && $et_ImageSlider.slideCount.lg > 0}{$et_ImageSlider.slideCount.lg}{else}4{/if}, "slidesToScroll": {if !empty($et_ImageSlider.slidesToScroll.lg) && $et_ImageSlider.slidesToScroll.lg > 0}{$et_ImageSlider.slidesToScroll.lg}{else}1{/if} }},
                                { "breakpoint": {$et_global.breakpoints.mdMax}, "settings": { "slidesToShow": {if !empty($et_ImageSlider.slideCount.md) && $et_ImageSlider.slideCount.md > 0}{$et_ImageSlider.slideCount.md}{else}3{/if}, "slidesToScroll": {if !empty($et_ImageSlider.slidesToScroll.md) && $et_ImageSlider.slidesToScroll.md > 0}{$et_ImageSlider.slidesToScroll.md}{else}1{/if} }},
                                { "breakpoint": {$et_global.breakpoints.smMax}, "settings": { "slidesToShow": {if !empty($et_ImageSlider.slideCount.sm) && $et_ImageSlider.slideCount.sm > 0}{$et_ImageSlider.slideCount.sm}{else}2{/if}, "slidesToScroll": {if !empty($et_ImageSlider.slidesToScroll.sm) && $et_ImageSlider.slidesToScroll.sm > 0}{$et_ImageSlider.slidesToScroll.sm}{else}1{/if} }},
                                { "breakpoint": {$et_global.breakpoints.xsMax}, "settings": { "slidesToShow": {if !empty($et_ImageSlider.slideCount.xs) && $et_ImageSlider.slideCount.xs > 0}{$et_ImageSlider.slideCount.xs}{else}1{/if}, "slidesToScroll": {if !empty($et_ImageSlider.slidesToScroll.xs) && $et_ImageSlider.slidesToScroll.xs > 0}{$et_ImageSlider.slidesToScroll.xs}{else}1{/if} }}
                            ],
                        "lazyload": "ondemand"
                    }' id="et-image-slider-{$et_BaseWidget.id}">
                        {foreach from=$et_ImageSlider.slides item=imageLink}
                            {block name="et-image-slider-slide"}
                                <div class="et-image-slider-slide et-slider-slide">
                                    {block name="et-image-slider-slide-wrapper"}
                                        <div class="et-image-slider-slide-image-wrapper">
                                            {if isset($imageLink.link, $imageLink.link.href) && $imageLink.link.href !== ''}<a href="{$imageLink.link.href}" title="{$imageLink.link.title}" class="et-image-slider-slide-link"{if $imageLink.link.external} rel="noreferrer noopener" target="_blank"{/if}>{/if}
                                                {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($imageLink.image.srcWebP)
                                                src=$imageLink.image.src
                                                alt=$imageLink.image.alt|escape
                                                class="et-image-slider-slide-image"
                                                }
                                            {if isset($imageLink.link, $imageLink.link.href) && $imageLink.link.href !== ''}</a>{/if}
                                        </div>
                                    {/block}
                                </div>
                            {/block}
                        {/foreach}
                    </div>
                {/block}

                {if count($et_ImageSlider.slides) > 1}
                    {if $et_ImageSlider.showNavigationArrows}
                        {block name="et-image-slider-navigation-arrows"}
                            <div class="et-slider-nav" id="et-image-slider-nav-{$et_BaseWidget.id}">
                                <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-image-slider-prev-{$et_BaseWidget.id}">
                                    <i class="{et_getIcon key='sliderPrevious'}"></i>
                                </div>
                                <div class="et-slider-nav-next enabled slick-arrow slick-hidden" id="et-image-slider-next-{$et_BaseWidget.id}">
                                    <i class="{et_getIcon key='sliderNext'}"></i>
                                </div>
                            </div>
                        {/block}
                    {/if}
                    {if $et_ImageSlider.showNavigationBubbles}
                        {block name="et-image-slider-navigation-dots"}
                            <div class="et-slider-bottom-nav" id="et-slider-bottom-nav-{$et_BaseWidget.id}"></div>
                        {/block}
                    {/if}
                {/if}
            </div>
        </div>
        {block name="et-image-slider-text-after"}
            {if !empty($et_ImageSlider.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_ImageSlider.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-image-slider-related-link"}
            {if !empty($et_ImageSlider.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="image_slider" link=$et_ImageSlider.link label=$et_ImageSlider.linkLabel displayMode=$et_ImageSlider.linkDisplayMode alignmentHorizontal=$et_ImageSlider.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}