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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_SubCategories.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container,
                #{$et_BaseWidget.cssId} .et-sub-categories-wrapper-content {
                    {if !empty($et_SubCategories.colorBackground)}background-color:{$et_SubCategories.colorBackground};{/if}
                    {if !empty($et_SubCategories.colorFont)}color:{$et_SubCategories.colorFont};{/if}
                }
            </style>
        {/if}
    {/block}
        {block name="et-widget-container-inner"}
            {block name="et-sub-categories-headline"}
                {include file="widgets/base/textfield.tpl" value=$et_SubCategories.headline type="h2" asRow=true classes="et-widget-headline"}
            {/block}
            <div class="{block name="et-sub-categories-wrapper-class"}et-sub-categories-wrapper row et-sub-categories-{$et_SubCategories.displayType} et-align-title-{$et_SubCategories.titleAlignmentHorizontal}{if !$et_SubCategories.displayAsSlider} row-cols-{$et_SubCategories.categoriesPerRow.xs} row-cols-sm-{$et_SubCategories.categoriesPerRow.sm} row-cols-md-{$et_SubCategories.categoriesPerRow.md} row-cols-lg-{$et_SubCategories.categoriesPerRow.lg} row-cols-xl-{$et_SubCategories.categoriesPerRow.xl} et-align-horizontal-{$et_SubCategories.alignmentHorizontal}{/if}{/block}">
                {block name='et-sub-categories'}
                    {if $et_SubCategories.displayAsSlider}
                        {block name='et-sub-categories-slider-start'}
                            <div class="col{if $et_SubCategories.alignmentHorizontal !== 'center'} p-0{/if}">
                                <div class="et-subcategories-slider et-slider" data-slick='{
                                    "dots": {if $et_SubCategories.showNavigationBubbles}true{else}false{/if},
                                    {if $et_SubCategories.showNavigationBubbles}"appendDots": "#et-slider-bottom-nav-{$et_BaseWidget.id}",{/if}
                                    "infinite": true,
                                    "arrows": {if $et_SubCategories.showNavigationArrows}true{else}false{/if},
                                    "adaptiveHeight": true,
                                    "autoplay": {if $et_SubCategories.autoSlideInterval > 0}true{else}false{/if},
                                    {if $et_SubCategories.autoSlideInterval > 0}"autoplaySpeed": {$et_SubCategories.autoSlideInterval},{/if}
                                    {if $et_SubCategories.showNavigationArrows}"nextArrow": "#et-subcategories-slider-next-{$et_BaseWidget.id}",{/if}
                                    {if $et_SubCategories.showNavigationArrows}"prevArrow": "#et-subcategories-slider-prev-{$et_BaseWidget.id}",{/if}
                                    "slidesToShow": {if !empty($et_SubCategories.categoriesPerRow.xl) && $et_SubCategories.categoriesPerRow.xl > 0}{min(count($oUnterKategorien_arr), $et_SubCategories.categoriesPerRow.xl)}{else}{min(count($oUnterKategorien_arr), 5)}{/if},
                                    "slidesToScroll": {if !empty($et_SubCategories.slidesToScroll.xl) && $et_SubCategories.slidesToScroll.xl > 0}{$et_SubCategories.slidesToScroll.xl}{else}1{/if},
                                    "centerMode": {if $et_SubCategories.alignmentHorizontal === 'center'}true{else}false{/if},
                                    "responsive": [
                                            { "breakpoint": {$et_global.breakpoints.lgMax}, "settings": { "slidesToShow": {if !empty($et_SubCategories.categoriesPerRow.lg) && $et_SubCategories.categoriesPerRow.lg > 0}{min(count($oUnterKategorien_arr), $et_SubCategories.categoriesPerRow.lg)}{else}{min(count($oUnterKategorien_arr), 4)}{/if}, "slidesToScroll": {if !empty($et_SubCategories.slidesToScroll.lg) && $et_SubCategories.slidesToScroll.lg > 0}{$et_SubCategories.slidesToScroll.lg}{else}1{/if} }},
                                            { "breakpoint": {$et_global.breakpoints.mdMax}, "settings": { "slidesToShow": {if !empty($et_SubCategories.categoriesPerRow.md) && $et_SubCategories.categoriesPerRow.md > 0}{min(count($oUnterKategorien_arr), $et_SubCategories.categoriesPerRow.md)}{else}{min(count($oUnterKategorien_arr), 3)}{/if}, "slidesToScroll": {if !empty($et_SubCategories.slidesToScroll.md) && $et_SubCategories.slidesToScroll.md > 0}{$et_SubCategories.slidesToScroll.md}{else}1{/if} }},
                                            { "breakpoint": {$et_global.breakpoints.smMax}, "settings": { "slidesToShow": {if !empty($et_SubCategories.categoriesPerRow.sm) && $et_SubCategories.categoriesPerRow.sm > 0}{min(count($oUnterKategorien_arr), $et_SubCategories.categoriesPerRow.sm)}{else}{min(count($oUnterKategorien_arr), 2)}{/if}, "slidesToScroll": {if !empty($et_SubCategories.slidesToScroll.sm) && $et_SubCategories.slidesToScroll.sm > 0}{$et_SubCategories.slidesToScroll.sm}{else}1{/if} }},
                                            { "breakpoint": {$et_global.breakpoints.xsMax}, "settings": { "slidesToShow": {if !empty($et_SubCategories.categoriesPerRow.xs) && $et_SubCategories.categoriesPerRow.xs > 0}{min(count($oUnterKategorien_arr), $et_SubCategories.categoriesPerRow.xs)}{else}{min(count($oUnterKategorien_arr), 1)}{/if}, "slidesToScroll": {if !empty($et_SubCategories.slidesToScroll.xs) && $et_SubCategories.slidesToScroll.xs > 0}{$et_SubCategories.slidesToScroll.xs}{else}1{/if} }}
                                        ],
                                    "lazyload": "ondemand"
                                }' id="et-subcategories-slider-{$et_BaseWidget.id}">
                        {/block}
                    {/if}

                    {block name='et-sub-categories-list'}
                        {foreach from=$oUnterKategorien_arr item="subCategory" name="subcategories"}
                            {block name='et-sub-categories-subcategory'}
                                <div{if !$et_SubCategories.displayAsSlider} class="col"{/if}>
                                    <div class="et-sub-category">
                                        {$imgAlt = $subCategory->getAttribute('img_alt')}
                                        {if $et_SubCategories.displayType === 'text'
                                        || $subCategory->getImage() === null
                                        || $subCategory->getImage() === $smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN
                                        || $subCategory->getImage() === 'gfx/keinBild_kl.gif'
                                        || $subCategory->getImage() === $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                                            {block name='et-sub-categories-subcategory-no-image'}
                                                <a href="{$subCategory->getURL()}" class="link-discreet et-sub-category-link-wrapper" title="{$subCategory->getName()}">
                                                    <div class="et-sub-category-title et-subcategory-title-no-image h3">
                                                        {$subCategory->getName()}
                                                    </div>
                                                </a>
                                            {/block}
                                        {elseif $et_SubCategories.displayType === 'compact'}
                                            {block name='et-sub-categories-subcategory-display-compact'}
                                                <a href="{$subCategory->getURL()}" class="link-discreet et-sub-category-link-wrapper" title="{$subCategory->getName()}">
                                                    <div class="et-sub-category-image">
                                                        {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=true
                                                        src=$subCategory->getImage(\JTL\Media\Image::SIZE_XS)
                                                        alt="{if empty($imgAlt->cWert)}{$subCategory->getName()}{else}{$imgAlt->cWert}{/if}"}
                                                    </div>
                                                    <div class="et-sub-category-title h3">
                                                        {$subCategory->getName()}
                                                    </div>
                                                </a>
                                            {/block}
                                        {elseif $et_SubCategories.displayType === 'large' || $et_SubCategories.displayType === 'largeTitleBelowImage'}
                                            {block name='et-sub-categories-subcategory-display-large'}
                                                <a href="{$subCategory->getURL()}" class="link-discreet et-sub-category-link-wrapper" title="{$subCategory->getName()}">
                                                    <div class="et-sub-category-image">
                                                        {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=true
                                                        src=$subCategory->getImage(\JTL\Media\Image::SIZE_LG)
                                                        alt="{if empty($imgAlt->cWert)}{$subCategory->getName()}{else}{$imgAlt->cWert}{/if}"}
                                                        <div class="et-sub-category-positioner">
                                                            <div class="et-sub-category-backdrop">
                                                                <div class="et-sub-category-title et-sub-category-title-{if $et_SubCategories.displayType === 'large'}on-image{else}below-image{/if} h3">
                                                                    {$subCategory->getName()}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            {/block}
                                        {/if}
                                        {if $et_SubCategories.showDescription && !empty($subCategory->getDescription())}
                                            {block name='productlist-header-subcategories-description'}
                                                <div class="et-sub-category-description">
                                                    {$subCategory->getDescription()|strip_tags|truncate:100}
                                                </div>
                                            {/block}
                                        {/if}
                                        {if $et_SubCategories.showChildren}
                                            {if $subCategory->hasChildren()}
                                                {block name='productlist-header-subcategories-list'}
                                                    <div class="et-sub-category-children">
                                                        {foreach $subCategory->getChildren() as $subChild}
                                                            <div>
                                                                <a href="{$subChild->getURL()}" title="{$subChild->getName()}">{$subChild->getName()}</a>
                                                            </div>
                                                        {/foreach}
                                                    </div>
                                                {/block}
                                            {/if}
                                        {/if}
                                    </div>
                                </div>
                            {/block}
                        {/foreach}
                    {/block}

                    {if $et_SubCategories.displayAsSlider}
                        {block name='et-sub-categories-slider-end'}
                            </div>
                                {if $et_SubCategories.showNavigationArrows}
                                    {block name="et-subcategories-slider-navigation-arrows"}
                                        <div class="et-slider-nav" id="et-subcategories-slider-nav-{$et_BaseWidget.id}">
                                            <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-subcategories-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-subcategories-slider-next-{$et_BaseWidget.id}">
                                                <i class="{et_getIcon key='sliderNext'}"></i>
                                            </div>
                                        </div>
                                    {/block}
                                {/if}
                                {if $et_SubCategories.showNavigationBubbles}
                                    {block name="et-subcategories-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}