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

{strip}
    {block name="et-widget-container-inner"}
        {block name="et-content-boxes-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_ContentBoxes.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-content-boxes-text-before"}
            {if !empty($et_ContentBoxes.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_ContentBoxes.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        {block name="et-content-boxes-general-link-above"}
            {if !empty($et_ContentBoxes.generalLink) && !empty($et_ContentBoxes.generalLinkPosition) && $et_ContentBoxes.generalLinkPosition === 'aboveBoxes'}
                {if !empty($et_ContentBoxes.generalLinkLabel)}
                    <div class="et-content-boxes-general-link et-position-above-boxes et-align-horizontal-{$et_ContentBoxes.generalLinkAlignmentHorizontal}">
                        {capture name='generalLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_ContentBoxes.generalLinkLabel type='span'}{/capture}
                        {include file='widgets/base/button.tpl' variant="{($et_ContentBoxes.generalLinkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.generalLinkLabel}" href="{$et_ContentBoxes.generalLink.href}" isExternal="{$et_ContentBoxes.generalLink.external}" title="{$et_ContentBoxes.generalLink.title}"}
                    </div>
                {/if}
            {/if}
        {/block}
        {block name="et-content-boxes-wrapper"}
            <div class="et-content-boxes-wrapper et-hover-style-{$et_ContentBoxes.hoverStyle}{if $et_ContentBoxes.noPadding} et-content-boxes-nopadding{/if}" data-boxes-count="{count($et_ContentBoxes.boxes)}">
                <div class="row{if $et_ContentBoxes.noPadding} m-0{/if}">
                    {if $et_ContentBoxes.displayAsSlider}
                    <div class="col p-0">
                        <div class="et-content-boxes-slider et-slider{if $et_ContentBoxes.forceEqualHeightSlides} et-equal-height-slides{/if}" data-slick='{block name="et-content-boxes-slick-config"}{
                                "dots": {if $et_ContentBoxes.showNavigationBubbles}true{else}false{/if},
                                {if $et_ContentBoxes.showNavigationBubbles}"appendDots": "#et-slider-bottom-nav-{$et_BaseWidget.id}",{/if}
                                "infinite": true,
                                "arrows": {if $et_ContentBoxes.showNavigationArrows}true{else}false{/if},
                                "adaptiveHeight": true,
                                "centerMode": false,
                                "autoplay": {if $et_ContentBoxes.autoSlideInterval > 0}true{else}false{/if},
                                {if $et_ContentBoxes.autoSlideInterval > 0}"autoplaySpeed": {$et_ContentBoxes.autoSlideInterval},{/if}
                                {if $et_ContentBoxes.showNavigationArrows}"nextArrow": "#et-content-boxes-slider-next-{$et_BaseWidget.id}",{/if}
                                {if $et_ContentBoxes.showNavigationArrows}"prevArrow": "#et-content-boxes-slider-prev-{$et_BaseWidget.id}",{/if}
                                "slidesToShow": {if !empty($et_ContentBoxes.slideCount.xl) && $et_ContentBoxes.slideCount.xl > 0}{min(count($et_ContentBoxes.boxes), $et_ContentBoxes.slideCount.xl)}{else}{min(count($et_ContentBoxes.boxes), 5)}{/if},
                                "slidesToScroll": {if !empty($et_ContentBoxes.slidesToScroll.xl) && $et_ContentBoxes.slidesToScroll.xl > 0}{$et_ContentBoxes.slidesToScroll.xl}{else}1{/if},
                                "centerMode": false,
                                "responsive": [
                                        { "breakpoint": {$et_global.breakpoints.lgMax}, "settings": { "slidesToShow": {if !empty($et_ContentBoxes.slideCount.lg) && $et_ContentBoxes.slideCount.lg > 0}{min(count($et_ContentBoxes.boxes), $et_ContentBoxes.slideCount.lg)}{else}{min(count($et_ContentBoxes.boxes), 4)}{/if}, "slidesToScroll": {if !empty($et_ContentBoxes.slidesToScroll.lg) && $et_ContentBoxes.slidesToScroll.lg > 0}{$et_ContentBoxes.slidesToScroll.lg}{else}1{/if} }},
                                        { "breakpoint": {$et_global.breakpoints.mdMax}, "settings": { "slidesToShow": {if !empty($et_ContentBoxes.slideCount.md) && $et_ContentBoxes.slideCount.md > 0}{min(count($et_ContentBoxes.boxes), $et_ContentBoxes.slideCount.md)}{else}{min(count($et_ContentBoxes.boxes), 3)}{/if}, "slidesToScroll": {if !empty($et_ContentBoxes.slidesToScroll.md) && $et_ContentBoxes.slidesToScroll.md > 0}{$et_ContentBoxes.slidesToScroll.md}{else}1{/if} }},
                                        { "breakpoint": {$et_global.breakpoints.smMax}, "settings": { "slidesToShow": {if !empty($et_ContentBoxes.slideCount.sm) && $et_ContentBoxes.slideCount.sm > 0}{min(count($et_ContentBoxes.boxes), $et_ContentBoxes.slideCount.sm)}{else}{min(count($et_ContentBoxes.boxes), 2)}{/if}, "slidesToScroll": {if !empty($et_ContentBoxes.slidesToScroll.sm) && $et_ContentBoxes.slidesToScroll.sm > 0}{$et_ContentBoxes.slidesToScroll.sm}{else}1{/if} }},
                                        { "breakpoint": {$et_global.breakpoints.xsMax}, "settings": { "slidesToShow": {if !empty($et_ContentBoxes.slideCount.xs) && $et_ContentBoxes.slideCount.xs > 0}{min(count($et_ContentBoxes.boxes), $et_ContentBoxes.slideCount.xs)}{else}{min(count($et_ContentBoxes.boxes), 1)}{/if}, "slidesToScroll": {if !empty($et_ContentBoxes.slidesToScroll.xs) && $et_ContentBoxes.slidesToScroll.xs > 0}{$et_ContentBoxes.slidesToScroll.xs}{else}1{/if} }}
                                    ],
                                "lazyload": "ondemand"
                            }{/block}' id="et-content-boxes-slider-{$et_BaseWidget.id}">
                    {/if}
                    {foreach from=$et_ContentBoxes.boxes item='contentBox' name='contentBoxes'}
                        {block name="et-content-box"}
                            {block name="et-content-box-id"}
                                {$contentBoxId = "et-content-box-{$et_BaseWidget.id}-{$contentBox.id}"}
                            {/block}
                            <div class="{block name="et-content-box-classes"}et-content-box {if !$et_ContentBoxes.displayAsSlider}col-12{if count($et_ContentBoxes.boxes) > 1} col-sm-6 col-md-6{/if}{if count($et_ContentBoxes.boxes) > 2} col-lg-4{/if}{if count($et_ContentBoxes.boxes) > 3} col-xl-3{/if}{/if}{if $et_ContentBoxes.noPadding} p-0 m-0{/if} et-content-box-{$contentBox.displayType} et-content-box-{if $contentBox.layout === 'textOnImage' && (empty($contentBox.image) || empty($contentBox.image.src))}textOverImage{else}{$contentBox.layout}{/if} et-align-horizontal-{$contentBox.alignmentHorizontal} et-align-vertical-{$contentBox.alignmentVertical}{/block}" id="{$contentBoxId}">
                                {if (!$et_ContentBoxes.displayAsSlider &&
                                        (isset($contentBox.width.xs) && $contentBox.width.xs !== '' ||
                                        isset($contentBox.width.sm) && $contentBox.width.sm !== '' ||
                                        isset($contentBox.width.md) && $contentBox.width.md !== '' ||
                                        isset($contentBox.width.lg) && $contentBox.width.lg !== '' ||
                                        isset($contentBox.width.xl) && $contentBox.width.xl !== '')
                                    ) ||
                                    (!$et_ContentBoxes.forceEqualHeightSlides && $contentBox.imageDisplayMode !== 'native' &&
                                        (isset($contentBox.imageHeight.xs) && $contentBox.imageHeight.xs !== '' ||
                                        isset($contentBox.imageHeight.sm) && $contentBox.imageHeight.sm !== '' ||
                                        isset($contentBox.imageHeight.md) && $contentBox.imageHeight.md !== '' ||
                                        isset($contentBox.imageHeight.lg) && $contentBox.imageHeight.lg !== '' ||
                                        isset($contentBox.imageHeight.xl) && $contentBox.imageHeight.xl !== '')
                                    )
                                }
                                    {* Styling the width is done by changing flex-basis and max-width on the element in percentages - this is also how Bootstrap 4 does columns. *}
                                    {block name="et-content-box-styles"}
                                        <style type="text/css">
                                            {if !$et_ContentBoxes.displayAsSlider}
                                                {if isset($contentBox.width.xs) && $contentBox.width.xs !== ''}
                                                @media (max-width: {$et_global.breakpoints.xsMax}px) {
                                                    #{$contentBoxId} {
                                                        flex-basis: {$contentBox.width.xs}%;
                                                        max-width: {$contentBox.width.xs}%;
                                                    }
                                                }
                                                {/if}

                                                {if isset($contentBox.width.sm) && $contentBox.width.sm !== ''}
                                                @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                                                    #{$contentBoxId} {
                                                        flex-basis: {$contentBox.width.sm}%;
                                                        max-width: {$contentBox.width.sm}%;
                                                    }
                                                }
                                                {/if}

                                                {if isset($contentBox.width.md) && $contentBox.width.md !== '' }
                                                @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                                                    #{$contentBoxId} {
                                                        flex-basis: {$contentBox.width.md}%;
                                                        max-width: {$contentBox.width.md}%;
                                                    }
                                                }
                                                {/if}

                                                {if isset($contentBox.width.lg) && $contentBox.width.lg !== ''}
                                                @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                                                    #{$contentBoxId} {
                                                        flex-basis: {$contentBox.width.lg}%;
                                                        max-width: {$contentBox.width.lg}%;
                                                    }
                                                }
                                                {/if}

                                                {if isset($contentBox.width.xl) && $contentBox.width.xl !== '' }
                                                @media (min-width: {$et_global.breakpoints.xlMin}px) {
                                                    #{$contentBoxId} {
                                                        flex-basis: {$contentBox.width.xl}%;
                                                        max-width: {$contentBox.width.xl}%;
                                                    }
                                                }
                                                {/if}
                                            {/if}
                                            {if !$et_ContentBoxes.forceEqualHeightSlides && $contentBox.imageDisplayMode !== 'native'}
                                                {if isset($contentBox.imageHeight.xs) && $contentBox.imageHeight.xs !== ''}
                                                @media (max-width: {$et_global.breakpoints.xsMax}px) {
                                                    #{$contentBoxId} .et-content-box-image {
                                                        height: {$contentBox.imageHeight.xs}px;
                                                    }
                                                }
                                                {/if}
                                                {if isset($contentBox.imageHeight.sm) && $contentBox.imageHeight.sm !== ''}
                                                @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                                                    #{$contentBoxId} .et-content-box-image {
                                                        height: {$contentBox.imageHeight.sm}px;
                                                    }
                                                }
                                                {/if}
                                                {if isset($contentBox.imageHeight.md) && $contentBox.imageHeight.md !== ''}
                                                @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                                                    #{$contentBoxId} .et-content-box-image {
                                                        height: {$contentBox.imageHeight.md}px;
                                                    }
                                                }
                                                {/if}
                                                {if isset($contentBox.imageHeight.lg) && $contentBox.imageHeight.lg !== ''}
                                                @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                                                    #{$contentBoxId} .et-content-box-image {
                                                        height: {$contentBox.imageHeight.lg}px;
                                                    }
                                                }
                                                {/if}
                                                {if isset($contentBox.imageHeight.xl) && $contentBox.imageHeight.xl !== ''}
                                                @media (min-width: {$et_global.breakpoints.xlMin}px) {
                                                    #{$contentBoxId} .et-content-box-image {
                                                        height: {$contentBox.imageHeight.xl}px;
                                                    }
                                                }
                                                {/if}
                                            {/if}
                                        </style>
                                    {/block}
                                {/if}

                                {block name="et-content-box-content"}
                                    <div class="et-content-box-content"{if $contentBox.customColorsEnabled}{block name="et-content-box-content-style"} style="{if $contentBox.colorBackground !== ''}background-color:{$contentBox.colorBackground};{/if}{if $contentBox.colorFont !== ''}color:{$contentBox.colorFont};{/if}"{/block}{/if}>
                                        {if $contentBox.linkWholeBox && isset($contentBox.link)}
                                            <a href="{$contentBox.link.href}"{if $contentBox.link.title !== ''} title="{$contentBox.link.title|escape:'html'}"{/if}{if $contentBox.link.external} target="_blank" rel="noreferrer noopener"{/if} class="no-style">
                                        {/if}

                                        {block name="et-content-box-content-inner"}
                                            {if $contentBox.image && $contentBox.image.src !== '' && $contentBox.displayType !== 'product'}
                                                {block name="et-content-box-image"}
                                                    <div class="et-content-box-image et-image-{$contentBox.imageDisplayMode}">
                                                        {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($contentBox.image.srcWebP)
                                                            src="{$contentBox.image.src}"
                                                            alt="{$contentBox.image.alt}"
                                                            width={$contentBox.image.width}
                                                            height={$contentBox.image.height}
                                                            class="img-responsive"
                                                        }
                                                    </div>
                                                {/block}
                                            {/if}
                                            {if ($contentBox.displayType === 'structured' && (!empty($contentBox.textContent1.value) || !empty($contentBox.textContent2.value) || !empty($contentBox.textContent3.value) || (isset($contentBox.link) && !empty($contentBox.linkLabel.value))))
                                                || ($contentBox.displayType !== 'structured' && !empty($contentBox.content))}
                                                {block name="et-content-box-text-wrapper"}
                                                    <div class="et-content-box-text-wrapper">
                                                        {if $contentBox.displayType === 'structured'}
                                                            {block name="et-content-box-inner-type-structured"}
                                                                <div class="et-content-box-backdrop et-backdrop-{if $contentBox.showTextBackdrop}visible{else}transparent{/if}{if $contentBox.showTextShadow} et-text-shadow{/if}"{if $contentBox.customColorsEnabled} style="{if $contentBox.colorTextBackdrop !==''}background-color:{$contentBox.colorTextBackdrop};{/if}{if $contentBox.colorTextShadow !== ''}text-shadow:0 0 3px {$contentBox.colorTextShadow};{/if}"{/if}>
                                                                    {if !empty($contentBox.textContent1.value) || !empty($contentBox.textContent2.value) || !empty($contentBox.textContent3.value)}
                                                                        {block name="et-content-box-text"}
                                                                            <div class="et-content-box-text"{if $contentBox.customColorsEnabled && $contentBox.colorFont !== ''} style="color:inherit;"{/if}>{* Inherit forces the color to be taken from the parent style and is needed to override SCSS styles set for this element with custom configured color. *}
                                                                                {if !empty($contentBox.textContent1.value)}{include file="widgets/base/textfield.tpl" value=$contentBox.textContent1 type='h2'}{/if}
                                                                                {if !empty($contentBox.textContent2.value)}{include file="widgets/base/textfield.tpl" value=$contentBox.textContent2 type='p'}{/if}
                                                                                {if !empty($contentBox.textContent3.value)}{include file="widgets/base/textfield.tpl" value=$contentBox.textContent3 type='p'}{/if}
                                                                            </div>
                                                                        {/block}
                                                                    {/if}
                                                                    {if isset($contentBox.link) && !empty($contentBox.linkLabel.value)}
                                                                        {block name="et-content-box-cta"}
                                                                            <div class="et-content-box-cta{if empty($contentBox.textContent1.value) && empty($contentBox.textContent2.value) && empty($contentBox.textContent3.value)} mt-0{/if}">
                                                                                {capture name='contentBoxLabel'}{include file="widgets/base/textfield.tpl" value=$contentBox.linkLabel type='span'}{/capture}
                                                                                {if $contentBox.linkWholeBox}
                                                                                    {include file='widgets/base/button.tpl' variant="{($contentBox.linkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.contentBoxLabel}"}
                                                                                {else}
                                                                                    {include file='widgets/base/button.tpl' variant="{($contentBox.linkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.contentBoxLabel}" href="{$contentBox.link.href}" isExternal="{$contentBox.link.external}" title="{$contentBox.link.title}"}
                                                                                {/if}
                                                                            </div>
                                                                        {/block}
                                                                    {/if}
                                                                </div>
                                                            {/block}
                                                        {else}
                                                            {block name="et-content-box-inner-type-flexible"}
                                                                {$contentBox.content}
                                                            {/block}
                                                        {/if}
                                                    </div>
                                                {/block}
                                            {/if}
                                            {if $contentBox.displayType === 'product'}
                                                {block name="et-content-box-inner-type-product"}
                                                    <div class="et-content-box-product-inner" itemscope itemtype="https://schema.org/Product">
                                                        {$idPrefix = ''}
                                                        {if !$contentBox.productShowBasket || !$contentBox.productShowVariations}
                                                            {* We cannot use the idPrefix if the product can have variations because the variation reload will mess the ID up *}
                                                            {$idPrefix = "{$contentBoxId}-"}
                                                        {/if}
                                                        {include file='productlist/item_box.tpl'
                                                            idPrefix=$idPrefix
                                                            Artikel=$contentBox.product
                                                            showRatings=$contentBox.productShowRatings
                                                            showManufacturer=$contentBox.productShowManufacturer
                                                            showAvailability=$contentBox.productShowAvailability
                                                            showQuickview=false
                                                            showBasket=$contentBox.productShowBasket
                                                            showVariations=$contentBox.productShowVariations
                                                            maxVariations=$contentBox.productMaxVariations
                                                            maxVariationValues=$contentBox.productMaxVariationValues
                                                            lazyLoadImages=$et_BaseWidget.lazyLoadImages
                                                            tplscope='et-content-box'}
                                                    </div>
                                                    {block name="et-content-box-innter-type-product-js"}
                                                        {inline_script}
                                                        <script>
                                                            $(document).ready(function () {
                                                                $.evo.article().register("#{$idPrefix}result-wrapper_buy_form_{$contentBox.product->kArtikel}");
                                                            });
                                                        </script>
                                                        {/inline_script}
                                                    {/block}
                                                {/block}
                                            {/if}
                                        {/block}
                                        {if $contentBox.linkWholeBox && isset($contentBox.link)}
                                            </a>
                                        {/if}
                                    </div>
                                {/block}
                            </div>
                        {/block}
                    {/foreach}
                    {if $et_ContentBoxes.displayAsSlider}
                            </div>
                        </div>
                    {/if}
                </div>
                {if $et_ContentBoxes.showNavigationArrows && $et_ContentBoxes.displayAsSlider}
                    {block name="et-content-boxes-slider-navigation-arrows"}
                        <div class="et-slider-nav" id="et-content-boxes-slider-nav-{$et_BaseWidget.id}">
                            <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-content-boxes-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-content-boxes-slider-next-{$et_BaseWidget.id}">
                                <i class="{et_getIcon key='sliderNext'}"></i>
                            </div>
                        </div>
                    {/block}
                {/if}
                {if $et_ContentBoxes.showNavigationBubbles && $et_ContentBoxes.displayAsSlider}
                    {block name="et-content-boxes-slider-navigation-dots"}
                        <div class="et-slider-bottom-nav" id="et-slider-bottom-nav-{$et_BaseWidget.id}"></div>
                    {/block}
                {/if}
            </div>
        {/block}
        {block name="et-content-boxes-text-after"}
            {if !empty($et_ContentBoxes.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_ContentBoxes.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-content-boxes-general-link-below"}
            {if !empty($et_ContentBoxes.generalLink) && !empty($et_ContentBoxes.generalLinkPosition) && $et_ContentBoxes.generalLinkPosition === 'belowBoxes'}
                {if !empty($et_ContentBoxes.generalLinkLabel)}
                    <div class="et-content-boxes-general-link et-position-below-boxes et-align-horizontal-{$et_ContentBoxes.generalLinkAlignmentHorizontal}">
                        {capture name='generalLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_ContentBoxes.generalLinkLabel type='span'}{/capture}
                        {include file='widgets/base/button.tpl' variant="{($et_ContentBoxes.generalLinkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.generalLinkLabel}" href="{$et_ContentBoxes.generalLink.href}" isExternal="{$et_ContentBoxes.generalLink.external}" title="{$et_ContentBoxes.generalLink.title}"}
                    </div>
                {/if}
            {/if}
        {/block}
    {/block}
{/strip}