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

{strip}
    {block name="et-widget-container-inner"}
        {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
        {block name="et-brand-slider-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_BrandSlider.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-brand-slider-text-before"}
            {if !empty($et_BrandSlider.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_BrandSlider.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        <div class="et-brand-slider-wrapper row">
            <div class="col p-0">
                <div class="et-brand-slider et-slider et-hover-style-{$et_BrandSlider.hoverStyle}" data-slick='{block name="et-brand-slider-slick-config"}{
                 "nextArrow": "#et-brand-slider-next-{$et_BaseWidget.id}",
                 "prevArrow": "#et-brand-slider-prev-{$et_BaseWidget.id}",
                 "slidesToShow": {if !empty($et_BrandSlider.visibleElements.xl) && $et_BrandSlider.visibleElements.xl > 0}{$et_BrandSlider.visibleElements.xl}{else}5{/if},
                 "slidesToScroll": {if !empty($et_BrandSlider.slidesToScroll.xl) && $et_BrandSlider.slidesToScroll.xl > 0}{$et_BrandSlider.slidesToScroll.xl}{else}1{/if},
                 "responsive": [
                    { "breakpoint": {$et_global.breakpoints.lgMax}, "settings": { "slidesToShow": {if !empty($et_BrandSlider.visibleElements.lg) && $et_BrandSlider.visibleElements.lg > 0}{$et_BrandSlider.visibleElements.lg}{else}4{/if}, "slidesToScroll": {if !empty($et_BrandSlider.slidesToScroll.lg) && $et_BrandSlider.slidesToScroll.lg > 0}{$et_BrandSlider.slidesToScroll.lg}{else}1{/if} }},
                    { "breakpoint": {$et_global.breakpoints.mdMax}, "settings": { "slidesToShow": {if !empty($et_BrandSlider.visibleElements.md) && $et_BrandSlider.visibleElements.md > 0}{$et_BrandSlider.visibleElements.md}{else}3{/if}, "slidesToScroll": {if !empty($et_BrandSlider.slidesToScroll.md) && $et_BrandSlider.slidesToScroll.md > 0}{$et_BrandSlider.slidesToScroll.md}{else}1{/if} }},
                    { "breakpoint": {$et_global.breakpoints.smMax}, "settings": { "slidesToShow": {if !empty($et_BrandSlider.visibleElements.sm) && $et_BrandSlider.visibleElements.sm > 0}{$et_BrandSlider.visibleElements.sm}{else}2{/if}, "slidesToScroll": {if !empty($et_BrandSlider.slidesToScroll.sm) && $et_BrandSlider.slidesToScroll.sm > 0}{$et_BrandSlider.slidesToScroll.sm}{else}1{/if} }},
                    { "breakpoint": {$et_global.breakpoints.xsMax}, "settings": { "slidesToShow": {if !empty($et_BrandSlider.visibleElements.xs) && $et_BrandSlider.visibleElements.xs > 0}{$et_BrandSlider.visibleElements.xs}{else}1{/if}, "slidesToScroll": {if !empty($et_BrandSlider.slidesToScroll.xs) && $et_BrandSlider.slidesToScroll.xs > 0}{$et_BrandSlider.slidesToScroll.xs}{else}1{/if} }}
                    ],
                 "lazyload": "ondemand"
                 }{/block}' id="et-brand-slider-{$et_BaseWidget.id}">
                    {foreach from=$et_BrandSlider.manufacturers item=manufacturer}
                        <div class="et-brand-slider-slide et-slider-slide">
                            <a href="{if $shopIsAtLeast52}{$manufacturer->getURL(JTL\Shop::getLanguageID())}{else}{$manufacturer->cURL}{/if}" title="{if $shopIsAtLeast52}{$manufacturer->getMetaTitle()|escape:'html'}{else}{$manufacturer->cMetaTitle|escape:'html'}{/if}">
                                {image fluid=true lazy=$et_BaseWidget.lazyLoadImages
                                src="{if $shopIsAtLeast52}{if $manufacturer->getImage(JTL\Media\Image::SIZE_MD) !== null}{$manufacturer->getImage(JTL\Media\Image::SIZE_MD)}{else}{$manufacturer->getImageURLNormal()}{/if}{else}{$manufacturer->cBildURLNormal}{/if}"
                                alt=$manufacturer->getName()|escape:'html'
                                class="et-brand-slider-slide-image"
                                }
                            </a>
                        </div>
                    {/foreach}
                </div>
                {block name="et-brand-slider-navigation-arrows"}
                    <div class="et-brand-slider-nav et-slider-nav" id="et-brand-slider-nav-{$et_BaseWidget.id}">
                        <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-brand-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-brand-slider-next-{$et_BaseWidget.id}">
                            <i class="{et_getIcon key='sliderNext'}"></i>
                        </div>
                    </div>
                {/block}
            </div>
        </div>
        {block name="et-brand-slider-text-after"}
            {if !empty($et_BrandSlider.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_BrandSlider.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-brand-slider-related-link"}
            {if !empty($et_BrandSlider.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="brand_slider" link=$et_BrandSlider.link label=$et_BrandSlider.linkLabel displayMode=$et_BrandSlider.linkDisplayMode alignmentHorizontal=$et_BrandSlider.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}
