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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_MainSlider.customColorsEnabled
            || (!$et_MainSlider.autoHeightEnabled
                && isset($et_MainSlider.customHeight)
                && (!empty($et_MainSlider.customHeight.xs) || !empty($et_MainSlider.customHeight.sm) || !empty($et_MainSlider.customHeight.md) || !empty($et_MainSlider.customHeight.lg) || !empty($et_MainSlider.customHeight.xl)))}
            <style type="text/css">
                {if $et_MainSlider.colorNavigationArrow !== ''}
                    #et-main-slider-nav-{$et_BaseWidget.id}, #et-slider-bottom-nav-{$et_BaseWidget.id} button { color:{$et_MainSlider.colorNavigationArrow}; border-color:{$et_MainSlider.colorNavigationArrow}; }
                    #et-slider-bottom-nav-{$et_BaseWidget.id} .slick-active button { background-color:{$et_MainSlider.colorNavigationArrow}; }
                {/if}
                {if $et_MainSlider.colorNavigationArrowHover !== ''}
                    #et-main-slider-nav-{$et_BaseWidget.id}:hover, #et-slider-bottom-nav-{$et_BaseWidget.id}:hover button { color:{$et_MainSlider.colorNavigationArrowHover}; border-color:{$et_MainSlider.colorNavigationArrowHover}; }
                    #et-slider-bottom-nav-{$et_BaseWidget.id}:hover .slick-active button { background-color:{$et_MainSlider.colorNavigationArrowHover}; }
                {/if}
                {if !$et_MainSlider.autoHeightEnabled && isset($et_MainSlider.customHeight)}
                    {if !empty($et_MainSlider.customHeight.xs)}@media (max-width:{$et_global.breakpoints.xsMax}px) { #{$et_BaseWidget.cssId} .et-main-slider-slide-content { height: {$et_MainSlider.customHeight.xs}px; } }{/if}
                    {if !empty($et_MainSlider.customHeight.sm)}@media (min-width:{$et_global.breakpoints.smMin}px) and (max-width:{$et_global.breakpoints.smMax}px) { #{$et_BaseWidget.cssId} .et-main-slider-slide-content { height: {$et_MainSlider.customHeight.sm}px; } }{/if}
                    {if !empty($et_MainSlider.customHeight.md)}@media (min-width:{$et_global.breakpoints.mdMin}px) and (max-width:{$et_global.breakpoints.mdMax}px) { #{$et_BaseWidget.cssId} .et-main-slider-slide-content { height: {$et_MainSlider.customHeight.md}px; } }{/if}
                    {if !empty($et_MainSlider.customHeight.lg)}@media (min-width:{$et_global.breakpoints.lgMin}px) and (max-width:{$et_global.breakpoints.lgMax}px) { #{$et_BaseWidget.cssId} .et-main-slider-slide-content { height: {$et_MainSlider.customHeight.lg}px; } }{/if}
                    {if !empty($et_MainSlider.customHeight.xl)}@media (min-width:{$et_global.breakpoints.xlMin}px) { #{$et_BaseWidget.cssId} .et-main-slider-slide-content { height: {$et_MainSlider.customHeight.xl}px; } }{/if}
                {/if}
            </style>
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        {block name='et-main-slider-headline'}
            {include file="widgets/base/textfield.tpl" value=$et_MainSlider.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-main-slider-text-before"}
            {if !empty($et_MainSlider.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_MainSlider.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        {block name='et-main-slider-wrapper'}
            <div class="et-main-slider-wrapper row et-main-slider-size-{$et_BaseWidget.size} et-main-slider-{if $et_MainSlider.autoHeightEnabled}auto-height{else}fixed-height{/if}{if $et_MainSlider.showTimer && $et_MainSlider.autoSlideInterval > 0} et-main-slider-with-timer{/if}{if $et_MainSlider.noPadding || $et_BaseWidget.size === 'fullsize'} et-main-slider-no-padding{/if}{if !empty($et_MainSlider.slideAnimation)} et-slider-animation-{$et_MainSlider.slideAnimation}{/if}">
                <div class="col-12{if $et_MainSlider.noPadding || $et_BaseWidget.size === 'fullsize'} p-0{/if}">
                    <div class="et-main-slider et-slider" data-slick='{block name='et-main-slider-slider-config'}{
                        "dots": {if $et_MainSlider.showNavigationBubbles}true{else}false{/if},
                        "appendDots": "#et-slider-bottom-nav-{$et_BaseWidget.id}",
                        "infinite": true,
                        "arrows": {if $et_MainSlider.showNavigationArrows}true{else}false{/if},
                        "adaptiveHeight": false,
                        "autoplay": {if $et_MainSlider.autoSlideInterval > 0}true{else}false{/if},
                        "autoplaySpeed": {$et_MainSlider.autoSlideInterval},
                        "nextArrow": "#et-slider-next-{$et_BaseWidget.id}",
                        "prevArrow": "#et-slider-prev-{$et_BaseWidget.id}",
                        "slidesToShow": 1,
                        "slidesToScroll": 1,
                        "fade": {if $et_MainSlider.slideEffect === 'fade'}true{else}false{/if},
                        "lazyload": "ondemand"
                    }{/block}' id="et-main-slider-{$et_BaseWidget.id}" data-slider-id="{$et_BaseWidget.id}">
                        {foreach from=$et_MainSlider.slides item=slide}
                            {block name='et-main-slider-slide'}
                                <div class="et-main-slider-slide et-slider-slide et-align-horizontal-{$slide.contentAlignmentHorizontal} et-align-vertical-{$slide.contentAlignmentVertical}{if !empty($slide.cssClass)} {$slide.cssClass}{/if}">
                                    {if $slide.linkWholeSlide && isset($slide.link) && !empty($slide.link.href)}<a href="{$slide.link.href}" class="no-style" title="{$slide.link.title}"{if $slide.link.external} target="_blank" rel="noreferrer noopener"{/if}>{/if}
                                    <div class="et-main-slider-slide-content">
                                        {block name='et-main-slider-slide-image'}
                                            {if !empty($slide.image.src)}
                                                {image fluid=false lazy=$et_BaseWidget.lazyLoadImages webp=!empty($slide.image.srcWebP)
                                                    src=$slide.image.src
                                                    alt=$slide.image.alt|escape
                                                    class="et-main-slider-slide-image"
                                                }
                                            {/if}
                                        {/block}

                                        {if $et_BaseWidget.size === 'fullsizeImage'}
                                            <div class="et-main-slider-slide-container-wrapper">
                                                <div class="et-main-slider-slide-container">
                                        {/if}
                                        {block name='et-main-slider-slide-positioner'}
                                            <div class="et-main-slider-slide-positioner"{if $slide.customColorsEnabled && $slide.colorFont !==''} style="color:{$slide.colorFont};"{/if}>
                                                {if $slide.useCustomContent}
                                                    {block name='et-main-slider-slide-custom-content'}{$slide.customContent}{/block}
                                                {else}
                                                    {block name='et-main-slider-slide-backdrop'}
                                                        <div class="et-main-slider-slide-backdrop et-backdrop-{if $slide.showTextBackdrop}visible{else}transparent{/if}"{if $slide.customColorsEnabled} style="{if $slide.colorBackdrop !==''}background-color:{$slide.colorBackdrop};{/if}{if $slide.colorFont !== ''}color:{$slide.colorFont};{/if}"{/if}>
                                                            {if !empty($slide.logo.src)}
                                                                {block name='et-main-slider-slide-logo'}
                                                                    <div class="et-main-slider-slide-logo">
                                                                        {image fluid=false lazy=$et_BaseWidget.lazyLoadImages webp=!empty($slide.logo.srcWebP)
                                                                            src=$slide.logo.src
                                                                            alt=$slide.logo.alt|escape
                                                                            class="et-main-slider-slide-logo-img"
                                                                        }
                                                                    </div>
                                                                {/block}
                                                            {/if}

                                                            {block name='et-main-slider-slide-text'}
                                                                <div class="et-main-slider-slide-text">
                                                                    {include file="widgets/base/textfield.tpl" value=$slide.headline1 typeClass='h4'}
                                                                    {include file="widgets/base/textfield.tpl" value=$slide.headline2 typeClass='h2'}
                                                                    {include file="widgets/base/textfield.tpl" value=$slide.description type='p'}
                                                                </div>
                                                            {/block}

                                                            {if isset($slide.link) && !empty($slide.link.href)}
                                                                {block name='et-main-slider-slide-cta'}
                                                                    <div class="et-main-slider-slide-cta">
                                                                        {capture name='slideLabel'}{include file="widgets/base/textfield.tpl" value=$slide.buttonLabel type='span'}{/capture}
                                                                        {if trim($smarty.capture.slideLabel) !== ''}
                                                                            {if $slide.linkWholeSlide}
                                                                                {include file='widgets/base/button.tpl' variant="{$slide.buttonType}" label="{$smarty.capture.slideLabel}"}
                                                                            {else}
                                                                                {include file='widgets/base/button.tpl' variant="{$slide.buttonType}" label="{$smarty.capture.slideLabel}" href="{$slide.link.href}" isExternal="{$slide.link.external}" title="{$slide.link.title}"}
                                                                            {/if}
                                                                        {/if}
                                                                        {capture name='secondarySlideLabel'}{include file="widgets/base/textfield.tpl" value=$slide.secondaryButtonLabel type='span'}{/capture}
                                                                        {if trim($smarty.capture.secondarySlideLabel) !== ''}
                                                                            {if $slide.linkWholeSlide}
                                                                                {include file='widgets/base/button.tpl' variant="{$slide.secondaryButtonType}" label="{$smarty.capture.secondarySlideLabel}"}
                                                                            {else}
                                                                                {include file='widgets/base/button.tpl' variant="{$slide.secondaryButtonType}" label="{$smarty.capture.secondarySlideLabel}" href="{$slide.secondaryLink.href}" isExternal="{$slide.secondaryLink.external}" title="{$slide.secondaryLink.title}"}
                                                                            {/if}
                                                                        {/if}
                                                                    </div>
                                                                {/block}
                                                            {/if}
                                                        </div>
                                                    {/block}
                                                {/if}
                                            </div>
                                        {/block}
                                        {if $et_BaseWidget.size === 'fullsizeImage'}
                                                </div>
                                            </div>
                                        {/if}
                                    </div>
                                    {if $slide.linkWholeSlide && isset($slide.link) && !empty($slide.link.href)}</a>{/if}
                                </div>
                            {/block}
                        {/foreach}
                    </div>
                    {if count($et_MainSlider.slides) > 1}
                        {if $et_MainSlider.showNavigationArrows}
                            {block name='et-main-slider-navigation-arrows'}
                                <div class="et-slider-nav" id="et-main-slider-nav-{$et_BaseWidget.id}">
                                    <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-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-slider-next-{$et_BaseWidget.id}">
                                        <i class="{et_getIcon key='sliderNext'}"></i>
                                    </div>
                                </div>
                            {/block}
                        {/if}
                        {if $et_MainSlider.showNavigationBubbles}
                            {block name='et-main-slider-navigation-dots'}
                                <div class="et-slider-bottom-nav et-main-slider-bottom-nav" id="et-slider-bottom-nav-{$et_BaseWidget.id}"></div>
                            {/block}
                        {/if}
                    {/if}
                </div>

                {block name='et-main-slider-progress-bar'}
                    <div class="col-12{if $et_MainSlider.noPadding || $et_BaseWidget.size === 'fullsize'} p-0{/if}">
                        {if $et_MainSlider.showTimer && $et_MainSlider.autoSlideInterval > 0}
                            <div class="et-slider-timer progress" id="et-slider-timer-{$et_BaseWidget.id}" aria-hidden="true">
                                <div class="progress-bar" role="progressbar" style="width: 0;"></div>
                            </div>
                        {/if}
                    </div>
                {/block}
            </div>
        {/block}
        {block name="et-main-slider-text-after"}
            {if !empty($et_MainSlider.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_MainSlider.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-main-slider-related-link"}
            {if !empty($et_MainSlider.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="main_slider" link=$et_MainSlider.link label=$et_MainSlider.linkLabel displayMode=$et_MainSlider.linkDisplayMode alignmentHorizontal=$et_MainSlider.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}