{if isset($et_MenuCategory.mainCategory)}
    {block name='et-menu-category-mobile'}
        <div class="et-menu-item et-menu-category col-12{if $et_BaseWidget.cssClass !== ''} {$et_BaseWidget.cssClass}{/if}" id="et-menu-mobile-item-{$et_BaseWidget.id}" tabindex="0" role="button">
            {block name='et-menu-category-mobile-link'}
                <a class="et-menu-item-link no-style" title="{$et_MenuCategory.mainCategory->getName()|strip_tags|escape:'html'}"{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}>
                    <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->getName()}</span>
                        {else}
                            {$titleIcon}{include file="widgets/base/textfield.tpl" value=$et_MenuCategory.label type="span"}
                        {/if}
                    </div>
                    {if isset($et_MenuCategory.mainCategory) && $et_MenuCategory.showMainCategoryImage && $et_MenuCategory.mainCategory->hasImage() && $et_MenuCategory.mainCategory->getImage() !== null && $et_MenuCategory.mainCategory->getImage() !== $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                        <div class="et-menu-item-image">
                            {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"
                            }
                        </div>
                    {/if}
                </a>
            {/block}
            {if $et_MenuCategory.loadAsync && !$et_MenuCategory.isAjax}
                {block name='et-menu-category-mobile-content-loader'}
                    <div class="et-menu-item-content et-menu-category-mobile-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-mobile-content'}
                    <div class="et-menu-item-content et-menu-category-mobile-content d-none">
                        <div class="row">
                            <div class="col">
                                <div class="et-menu-item-content-show-all">
                                    <a href="{$et_MenuCategory.mainCategory->getURL()}" title="{$et_MenuCategory.mainCategory->getName()|strip_tags|escape:'html'}">{lang key='menuShow' printf=$et_MenuCategory.mainCategory->getName()}</a>
                                </div>
                                {if $et_MenuCategory.showMainCategoryTitle || $et_MenuCategory.showMainCategoryDescription || $et_MenuCategory.showMainCategoryImage}
                                    <div class="et-menu-category-main">
                                        {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}
                                            <div class="et-menu-category-main-image">
                                                    <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>
                                        {/if}
                                        {if $et_MenuCategory.showMainCategoryTitle || $et_MenuCategory.showMainCategoryDescription}
                                            <div class="et-menu-category-main-text">
                                                {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->getName()}</a>
                                                    </div>
                                                {/if}
                                                {if $et_MenuCategory.showMainCategoryDescription}
                                                    <div class="et-menu-category-main-description">
                                                        {$et_MenuCategory.mainCategory->getDescription()}
                                                    </div>
                                                {/if}
                                            </div>
                                        {/if}
                                    </div>
                                {/if}
                                {if count($et_MenuCategory.subCategories) > 0}
                                    <div class="et-menu-category-subcategories row">
                                        {foreach from=$et_MenuCategory.subCategories item='subCategory'}
                                            <div class="col-12 col-sm-6 et-menu-category-subcategory">
                                                <div class="et-menu-category-subcategory-title h4">
                                                    <a href="{$subCategory->getURL()}" class="link-discreet" title="{$subCategory->getName()|strip_tags|escape:'html'}">{$subCategory->getName()}</a>
                                                </div>
                                                {if $et_MenuCategory.showSubCategoryImage && $subCategory->getImage() !== null && $subCategory->getImage() !== $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                                                    <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|strip_tags|escape:'html'
                                                            sizes="auto"
                                                            }
                                                        </a>
                                                    </div>
                                                {/if}
                                                {if $et_MenuCategory.showSubCategoryDescription}
                                                    <div class="et-menu-category-subcategory-description">
                                                        {$subCategory->getDescription()}
                                                    </div>
                                                {/if}
                                                {if $subCategory->hasChildren() && $et_MenuCategory.maxSubSubCategories > 0}
                                                    <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'}
                                                            {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->getName()}</a>
                                                                </div>
                                                            {/if}
                                                        {/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>
                                                {/if}
                                            </div>
                                        {/foreach}
                                    </div>
                                {/if}
                            </div>
                        </div>
                    </div>
                {/block}
            {/if}
        </div>
    {/block}
{/if}