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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_Categories.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container,
                #{$et_BaseWidget.cssId} .et-categories-wrapper-content {
                    {if !empty($et_Categories.colorBackground)}background-color:{$et_Categories.colorBackground};{/if}
                    {if !empty($et_Categories.colorFont)}color:{$et_Categories.colorFont};{/if}
                }
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {block name="et-categories-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_Categories.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        <div class="{block name="et-categories-wrapper-class"}et-categories-wrapper row et-categories-{$et_Categories.displayType} et-align-title-{$et_Categories.titleAlignmentHorizontal}{if !$et_Categories.displayAsSlider} row-cols-{$et_Categories.categoriesPerRow.xs} row-cols-sm-{$et_Categories.categoriesPerRow.sm} row-cols-md-{$et_Categories.categoriesPerRow.md} row-cols-lg-{$et_Categories.categoriesPerRow.lg} row-cols-xl-{$et_Categories.categoriesPerRow.xl} et-align-horizontal-{$et_Categories.alignmentHorizontal}{/if}{/block}">
            {block name='et-categories'}
                {if $et_Categories.displayAsSlider}
                    {block name='et-categories-slider-start'}
                        <div class="col{if $et_Categories.alignmentHorizontal !== 'center'} p-0{/if}">
                        <div class="et-categories-slider et-slider" data-slick='{
                                        "dots": {if $et_Categories.showNavigationBubbles}true{else}false{/if},
                                        {if $et_Categories.showNavigationBubbles}"appendDots": "#et-slider-bottom-nav-{$et_BaseWidget.id}",{/if}
                                        "infinite": true,
                                        "arrows": {if $et_Categories.showNavigationArrows}true{else}false{/if},
                                        "adaptiveHeight": true,
                                        "autoplay": {if $et_Categories.autoSlideInterval > 0}true{else}false{/if},
                                        {if $et_Categories.autoSlideInterval > 0}"autoplaySpeed": {$et_Categories.autoSlideInterval},{/if}
                                        {if $et_Categories.showNavigationArrows}"nextArrow": "#et-categories-slider-next-{$et_BaseWidget.id}",{/if}
                                        {if $et_Categories.showNavigationArrows}"prevArrow": "#et-categories-slider-prev-{$et_BaseWidget.id}",{/if}
                                        "slidesToShow": {if !empty($et_Categories.categoriesPerRow.xl) && $et_Categories.categoriesPerRow.xl > 0}{min(count($et_Categories.categories), $et_Categories.categoriesPerRow.xl)}{else}{min(count($et_Categories.categories), 5)}{/if},
                                        "slidesToScroll": {if !empty($et_Categories.slidesToScroll.xl) && $et_Categories.slidesToScroll.xl > 0}{$et_Categories.slidesToScroll.xl}{else}1{/if},
                                        "centerMode": {if $et_Categories.alignmentHorizontal === 'center'}true{else}false{/if},
                                        "responsive": [
                                                { "breakpoint": {$et_global.breakpoints.lgMax}, "settings": { "slidesToShow": {if !empty($et_Categories.categoriesPerRow.lg) && $et_Categories.categoriesPerRow.lg > 0}{min(count($et_Categories.categories), $et_Categories.categoriesPerRow.lg)}{else}{min(count($et_Categories.categories), 4)}{/if}, "slidesToScroll": {if !empty($et_Categories.slidesToScroll.lg) && $et_Categories.slidesToScroll.lg > 0}{$et_Categories.slidesToScroll.lg}{else}1{/if} }},
                                                { "breakpoint": {$et_global.breakpoints.mdMax}, "settings": { "slidesToShow": {if !empty($et_Categories.categoriesPerRow.md) && $et_Categories.categoriesPerRow.md > 0}{min(count($et_Categories.categories), $et_Categories.categoriesPerRow.md)}{else}{min(count($et_Categories.categories), 3)}{/if}, "slidesToScroll": {if !empty($et_Categories.slidesToScroll.md) && $et_Categories.slidesToScroll.md > 0}{$et_Categories.slidesToScroll.md}{else}1{/if} }},
                                                { "breakpoint": {$et_global.breakpoints.smMax}, "settings": { "slidesToShow": {if !empty($et_Categories.categoriesPerRow.sm) && $et_Categories.categoriesPerRow.sm > 0}{min(count($et_Categories.categories), $et_Categories.categoriesPerRow.sm)}{else}{min(count($et_Categories.categories), 2)}{/if}, "slidesToScroll": {if !empty($et_Categories.slidesToScroll.sm) && $et_Categories.slidesToScroll.sm > 0}{$et_Categories.slidesToScroll.sm}{else}1{/if} }},
                                                { "breakpoint": {$et_global.breakpoints.xsMax}, "settings": { "slidesToShow": {if !empty($et_Categories.categoriesPerRow.xs) && $et_Categories.categoriesPerRow.xs > 0}{min(count($et_Categories.categories), $et_Categories.categoriesPerRow.xs)}{else}{min(count($et_Categories.categories), 1)}{/if}, "slidesToScroll": {if !empty($et_Categories.slidesToScroll.xs) && $et_Categories.slidesToScroll.xs > 0}{$et_Categories.slidesToScroll.xs}{else}1{/if} }}
                                            ],
                                        "lazyload": "ondemand"
                                    }' id="et-categories-slider-{$et_BaseWidget.id}">
                    {/block}
                {/if}
                {block name="et-categories-list"}
                    {foreach from=$et_Categories.categories item="category" name="categories"}
                        {block name='et-categories-category'}
                            <div{if !$et_Categories.displayAsSlider} class="col"{/if}>
                                <div class="et-category">
                                    {$imgAlt = $category->getAttribute('img_alt')}
                                    {if $et_Categories.displayType === 'text'
                                    || $category->getImage() === null
                                    || $category->getImage() === $smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN
                                    || $category->getImage() === 'gfx/keinBild_kl.gif'
                                    || $category->getImage() === $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                                        {block name='et-categories-category-no-image'}
                                            <a href="{$category->getURL()}" class="link-discreet et-category-link-wrapper" title="{$category->getName()}">
                                                <h3 class="et-category-title et-category-title-no-image">
                                                    {$category->getName()}
                                                </h3>
                                            </a>
                                        {/block}
                                    {elseif $et_Categories.displayType === 'compact'}
                                        {block name='et-categories-category-display-compact'}
                                            <a href="{$category->getURL()}" class="link-discreet et-category-link-wrapper" title="{$category->getName()}">
                                                <div class="et-category-image">
                                                    {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=true
                                                    src=$category->getImage(\JTL\Media\Image::SIZE_XS)
                                                    alt="{if empty($imgAlt->cWert)}{$category->getName()}{else}{$imgAlt->cWert}{/if}"}
                                                </div>
                                                <h3 class="et-category-title">
                                                    {$category->getName()}
                                                </h3>
                                            </a>
                                        {/block}
                                    {elseif $et_Categories.displayType === 'large' || $et_Categories.displayType === 'largeTitleBelowImage'}
                                        {block name='et-categories-category-display-large'}
                                            <a href="{$category->getURL()}" class="link-discreet et-category-link-wrapper" title="{$category->getName()}">
                                                <div class="et-category-image">
                                                    {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=true
                                                    src=$category->getImage(\JTL\Media\Image::SIZE_LG)
                                                    alt="{if empty($imgAlt->cWert)}{$category->getName()}{else}{$imgAlt->cWert}{/if}"}
                                                    <div class="et-category-positioner">
                                                        <div class="et-category-backdrop">
                                                            <h3 class="et-category-title et-category-title-{if $et_Categories.displayType === 'large'}on-image{else}below-image{/if}">
                                                                {$category->getName()}
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        {/block}
                                    {/if}
                                    {if $et_Categories.showDescription && !empty($category->getDescription())}
                                        {block name='et-categories-description'}
                                            <div class="et-category-description">
                                                {$category->getDescription()|strip_tags|truncate:100}
                                            </div>
                                        {/block}
                                    {/if}
                                    {if $et_Categories.showChildren}
                                        {if $category->hasChildren()}
                                            {block name='et-categories-subcategory-list'}
                                                <div class="et-categories-subcategory-list">
                                                    {foreach $category->getChildren() as $child}
                                                        <div>
                                                            <a href="{$child->getURL()}" title="{$child->getName()}">{$child->getName()}</a>
                                                        </div>
                                                    {/foreach}
                                                </div>
                                            {/block}
                                        {/if}
                                    {/if}
                                </div>
                            </div>
                        {/block}
                    {/foreach}
                {/block}
                {if $et_Categories.displayAsSlider}
                    {block name='et-categories-slider-end'}
                            </div>
                            {if $et_Categories.showNavigationArrows}
                                {block name="et-categories-slider-navigation-arrows"}
                                    <div class="et-slider-nav" id="et-categories-slider-nav-{$et_BaseWidget.id}">
                                        <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-categories-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-categories-slider-next-{$et_BaseWidget.id}">
                                            <i class="{et_getIcon key='sliderNext'}"></i>
                                        </div>
                                    </div>
                                {/block}
                            {/if}
                            {if $et_Categories.showNavigationBubbles}
                                {block name="et-categories-slider-navigation-dots"}
                                    <div class="et-slider-bottom-nav" id="et-slider-bottom-nav-{$et_BaseWidget.id}"></div>
                                {/block}
                            {/if}
                        </div>
                    {/block}
                {/if}
            {/block}
        </div>
    {/block}
{/strip}