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

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

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