{if isset($et_MenuCategory.mainCategory)}
    {block name='et-menu-category-main'}
        <div class="et-menu-item et-menu-category col-auto{if $et_MenuCategory.alignRight} et-menu-item-align-right{/if}{if $et_BaseWidget.cssClass !== ''} {$et_BaseWidget.cssClass}{/if}" id="et-menu-main-item-{$et_BaseWidget.id}" data-menu-size="{$et_MenuCategory.size}" data-menu-navigate="true" role="menuitem" aria-expanded="false" tabindex="0"{if !empty($et_MenuCategory.image.src)} style="background-image: url('{if !empty($et_MenuCategory.image.srcWebP)}{$et_MenuCategory.image.srcWebP}{else}{$et_MenuCategory.image.src}{/if}');"{/if}>
        {block name='et-menu-category-main-link'}
            <a class="et-menu-item-link no-style" href="{$et_MenuCategory.mainCategory->getURL()}" title="{$et_MenuCategory.mainCategory->getName()|strip_tags|escape:'html'}">
                {block name='et-menu-category-main-title'}
                    <div class="et-menu-item-title">
                        {assign var="titleIcon" value="{if !empty($et_MenuCategory.icon)}<i class=\"{$et_MenuCategory.icon}\"></i>{/if}"}
                        {if empty($et_MenuCategory.label.value)}
                            {$titleIcon}<span>{$et_MenuCategory.mainCategory->getShortName()}</span>
                        {else}
                            {$titleIcon}{include file="widgets/base/textfield.tpl" value=$et_MenuCategory.label type="span"}
                        {/if}
                    </div>
                {/block}
            </a>
        {/block}
        {if $et_MenuCategory.loadAsync && !$et_MenuCategory.isAjax}
            {block name='et-menu-category-main-content-loader'}
                <div class="et-menu-item-content et-menu-category-main-content d-none" data-et-menu-async-load="{$et_BaseWidget.id}">
                    <div class="et-menu-async-loader"><i class="et-icon-spin {et_getIcon key="loading"}"></i></div>
                </div>
            {/block}
        {else}
            {block name='et-menu-category-main-content'}
                <div class="et-menu-item-content et-menu-category-main-content d-none">
                    <div class="row">
                        <div class="col-12">
                            {if $et_MenuCategory.showMainCategoryTitle || $et_MenuCategory.showMainCategoryDescription || $et_MenuCategory.showMainCategoryImage}
                                {block name='et-menu-category-main-content-header'}
                                    <div class="et-menu-category-main et-align-image-{$et_MenuCategory.mainCategoryImagePosition} row">
                                        {if $et_MenuCategory.showMainCategoryImage && $et_MenuCategory.mainCategory->hasImage() && $et_MenuCategory.mainCategory->getImage() !== null && $et_MenuCategory.mainCategory->getImage() !== $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                                            {block name='et-menu-category-main-content-image'}
                                                <div class="et-menu-category-main-image {if $et_MenuCategory.mainCategoryImagePosition === 'center'}col-12{else}col-4{/if}">
                                                    <a class="no-style" href="{$et_MenuCategory.mainCategory->getURL()}" title="{$et_MenuCategory.mainCategory->getName()|strip_tags|escape:'html'}">
                                                        {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=true center=false
                                                        src="{$et_MenuCategory.mainCategory->getImage(\JTL\Media\Image::SIZE_LG)}"
                                                        srcset="{$et_MenuCategory.mainCategory->getImage(\JTL\Media\Image::SIZE_XS)} {$Einstellungen.bilder.bilder_kategorien_mini_breite}w,
                                                                {$et_MenuCategory.mainCategory->getImage(\JTL\Media\Image::SIZE_SM)} {$Einstellungen.bilder.bilder_kategorien_klein_breite}w,
                                                                {$et_MenuCategory.mainCategory->getImage(\JTL\Media\Image::SIZE_MD)} {$Einstellungen.bilder.bilder_kategorien_breite}w,
                                                                {$et_MenuCategory.mainCategory->getImage(\JTL\Media\Image::SIZE_LG)} {$Einstellungen.bilder.bilder_kategorien_gross_breite}w"
                                                        alt=$et_MenuCategory.mainCategory->getDescription()|strip_tags|truncate:50|strip_tags|escape:'html'
                                                        sizes="auto"
                                                        }
                                                    </a>
                                                </div>
                                            {/block}
                                        {/if}
                                        {if $et_MenuCategory.showMainCategoryTitle || $et_MenuCategory.showMainCategoryDescription}
                                            {block name='et-menu-category-main-content-text'}
                                                <div class="et-menu-category-main-text {if !$et_MenuCategory.showMainCategoryImage || !$et_MenuCategory.mainCategory->hasImage() || $et_MenuCategory.mainCategoryImagePosition === 'center'}col-12{else}col-8{/if}">
                                                    {if $et_MenuCategory.showMainCategoryTitle}
                                                        <div class="et-menu-category-main-title h3">
                                                            <a class="link-discreet" href="{$et_MenuCategory.mainCategory->getURL()}" title="{$et_MenuCategory.mainCategory->getName()|strip_tags|escape:'html'}">{$et_MenuCategory.mainCategory->getShortName()}</a>
                                                        </div>
                                                    {/if}
                                                    {if $et_MenuCategory.showMainCategoryDescription}
                                                        <div class="et-menu-category-main-description">
                                                            {$et_MenuCategory.mainCategory->getDescription()}
                                                        </div>
                                                    {/if}
                                                </div>
                                            {/block}
                                        {/if}
                                    </div>
                                {/block}
                            {/if}
                            {if is_array($et_MenuCategory.subCategories) && count($et_MenuCategory.subCategories) > 0}
                                {block name='et-menu-category-main-content-subcategories'}
                                    <div class="et-menu-category-subcategories row">
                                        {foreach from=$et_MenuCategory.subCategories item='subCategory'}
                                            {block name='et-menu-category-main-content-subcategory-item'}
                                                <div class="col-3 et-menu-category-subcategory">
                                                    {block name='et-menu-category-main-content-subcategory-title'}
                                                        <div class="et-menu-category-subcategory-title h4">
                                                            <a href="{$subCategory->getURL()}" class="link-discreet" title="{$subCategory->getName()|strip_tags|escape:'html'}">{$subCategory->getShortName()}</a>
                                                        </div>
                                                    {/block}

                                                    {if $et_MenuCategory.showSubCategoryImage && $subCategory->getImage() !== null && $subCategory->getImage() !== $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                                                        {block name='et-menu-category-main-content-subcategory-image'}
                                                            <div class="et-menu-category-subcategory-image">
                                                                <a href="{$subCategory->getURL()}" class="no-style" title="{$subCategory->getName()|strip_tags|escape:'html'}">
                                                                    {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=true center=false
                                                                    src="{$subCategory->getImage(\JTL\Media\Image::SIZE_LG)}"
                                                                    srcset="{$subCategory->getImage(\JTL\Media\Image::SIZE_XS)} {$Einstellungen.bilder.bilder_kategorien_mini_breite}w,
                                                                            {$subCategory->getImage(\JTL\Media\Image::SIZE_SM)} {$Einstellungen.bilder.bilder_kategorien_klein_breite}w,
                                                                            {$subCategory->getImage(\JTL\Media\Image::SIZE_MD)} {$Einstellungen.bilder.bilder_kategorien_breite}w,
                                                                            {$subCategory->getImage(\JTL\Media\Image::SIZE_LG)} {$Einstellungen.bilder.bilder_kategorien_gross_breite}w"
                                                                    alt=$subCategory->getDescription()|strip_tags|truncate:50|escape:'html'
                                                                    sizes="auto"
                                                                    }
                                                                </a>
                                                            </div>
                                                        {/block}
                                                    {/if}
                                                    {if $et_MenuCategory.showSubCategoryDescription}
                                                        {block name='et-menu-category-main-content-subcategory-description'}
                                                            <div class="et-menu-category-subcategory-description">
                                                                {$subCategory->getDescription()}
                                                            </div>
                                                        {/block}
                                                    {/if}
                                                    {if $subCategory->hasChildren() && $et_MenuCategory.maxSubSubCategories > 0}
                                                        {block name='et-menu-category-main-content-subcategory-children'}
                                                            <div class="et-menu-category-subcategory-children">
                                                                {$showMoreSubSubCategoriesXs = false}
                                                                {$showMoreSubSubCategoriesSm = false}
                                                                {$showMoreSubSubCategoriesMd = false}
                                                                {$showMoreSubSubCategoriesLg = false}
                                                                {$showMoreSubSubCategoriesXl = false}
                                                                {$subSubCategoriesTotal = 0}
                                                                {if $subCategory->getChildren() !== null}
                                                                    {$subSubCategoriesTotal = count($subCategory->getChildren())}
                                                                {/if}
                                                                {foreach from=$subCategory->getChildren() item='subSubCategory' name='subsubcategory'}
                                                                    {block name='et-menu-category-main-content-subcategory-child'}
                                                                        {if $smarty.foreach.subsubcategory.index < $et_MenuCategory.maxSubSubCategories}
                                                                            {$hiddenXs = false}
                                                                            {$hiddenSm = false}
                                                                            {$hiddenMd = false}
                                                                            {$hiddenLg = false}
                                                                            {$hiddenXl = false}
                                                                            {if !empty($et_MenuCategory.moreSubSubCategoriesLimit.xs) && ($subSubCategoriesTotal - 1) > $et_MenuCategory.moreSubSubCategoriesLimit.xs && $smarty.foreach.subsubcategory.iteration > $et_MenuCategory.moreSubSubCategoriesLimit.xs}{$hiddenXs = true}{$showMoreSubSubCategoriesXs = true}{/if}
                                                                            {if !empty($et_MenuCategory.moreSubSubCategoriesLimit.sm) && ($subSubCategoriesTotal - 1) > $et_MenuCategory.moreSubSubCategoriesLimit.sm && $smarty.foreach.subsubcategory.iteration > $et_MenuCategory.moreSubSubCategoriesLimit.sm}{$hiddenSm = true}{$showMoreSubSubCategoriesSm = true}{/if}
                                                                            {if !empty($et_MenuCategory.moreSubSubCategoriesLimit.md) && ($subSubCategoriesTotal - 1) > $et_MenuCategory.moreSubSubCategoriesLimit.md && $smarty.foreach.subsubcategory.iteration > $et_MenuCategory.moreSubSubCategoriesLimit.md}{$hiddenMd = true}{$showMoreSubSubCategoriesMd = true}{/if}
                                                                            {if !empty($et_MenuCategory.moreSubSubCategoriesLimit.lg) && ($subSubCategoriesTotal - 1) > $et_MenuCategory.moreSubSubCategoriesLimit.lg && $smarty.foreach.subsubcategory.iteration > $et_MenuCategory.moreSubSubCategoriesLimit.lg}{$hiddenLg = true}{$showMoreSubSubCategoriesLg = true}{/if}
                                                                            {if !empty($et_MenuCategory.moreSubSubCategoriesLimit.xl) && ($subSubCategoriesTotal - 1) > $et_MenuCategory.moreSubSubCategoriesLimit.xl && $smarty.foreach.subsubcategory.iteration > $et_MenuCategory.moreSubSubCategoriesLimit.xl}{$hiddenXl = true}{$showMoreSubSubCategoriesXl = true}{/if}
                                                                            <div class="et-menu-category-subcategory-child{if $hiddenXs} et-hidden-xs-only{/if}{if $hiddenSm} et-hidden-sm-only{/if}{if $hiddenMd} et-hidden-md-only{/if}{if $hiddenLg} et-hidden-lg-only{/if}{if $hiddenXl} et-hidden-xl-only{/if}">
                                                                                <a href="{$subSubCategory->getURL()}" class="link-discreet" title="{$subSubCategory->getName()|strip_tags|escape:'html'}">{$subSubCategory->getShortName()}</a>
                                                                            </div>
                                                                        {/if}
                                                                    {/block}
                                                                {/foreach}
                                                                <div onclick="$(this).hide().closest('.et-menu-category-subcategory-children').find('.et-menu-category-subcategory-child').show();"
                                                                     class="et-menu-category-show-subsubcategories{if !$showMoreSubSubCategoriesXs} et-hidden-xs-only{/if}{if !$showMoreSubSubCategoriesSm} et-hidden-sm-only{/if}{if !$showMoreSubSubCategoriesMd} et-hidden-md-only{/if}{if !$showMoreSubSubCategoriesLg} et-hidden-lg-only{/if}{if !$showMoreSubSubCategoriesXl} et-hidden-xl-only{/if}">
                                                                    {lang key='more' section='global'}
                                                                </div>
                                                            </div>
                                                        {/block}
                                                    {/if}
                                                </div>
                                            {/block}
                                        {/foreach}
                                    </div>
                                {/block}
                            {/if}
                        </div>
                    </div>
                </div>
            {/block}
        {/if}
        </div>
    {/block}
{/if}