{block name='et-menu-columns-mobile'}
    <div class="et-menu-item et-menu-columns 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-columns-mobile-link'}
            <a class="et-menu-item-link no-style"{if !empty($et_MenuColumns.image.src)} style="background-image: url('{if !empty($et_MenuColumns.image.srcWebP)}{$et_MenuColumns.image.srcWebP}{else}{$et_MenuColumns.image.src}{/if}');"{/if}>
                <div class="et-menu-item-title">
                    {if !empty($et_MenuColumns.icon)}<i class="{$et_MenuColumns.icon}"></i>{/if}{include file="widgets/base/textfield.tpl" value=$et_MenuColumns.label type="span"}
                </div>
            </a>
        {/block}
        {if $et_MenuColumns.loadAsync && !$et_MenuColumns.isAjax}
            {block name='et-menu-columns-mobile-content-loader'}
                <div class="et-menu-item-content et-menu-columns-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-columns-mobile-content'}
                <div class="et-menu-item-content et-menu-columns-mobile-content d-none">
                    <div class="row">
                        {if isset($et_MenuColumns.link) && $et_MenuColumns.link.href !== '' && !empty($et_MenuColumns.label.value)}
                            <div class="col-12">
                                <div class="et-menu-item-content-show-all">
                                    <a href="{$et_MenuColumns.link.href}"{if isset($et_MenuColumns.link) && $et_MenuColumns.link.title !== ''} title="{$et_MenuColumns.link.title}"{/if}{if isset($et_MenuColumns.link) && $et_MenuColumns.link.external} target="_blank" rel="noreferrer noopener"{/if}>{lang key='menuShow' printf=$et_MenuColumns.label.value}</a>
                                </div>
                            </div>
                        {/if}
                        {foreach from=$et_MenuColumns.columns item='column' name='columns'}
                            {block name='et-menu-columns-mobile-column'}
                                <div class="col-12 col-sm-6 et-menu-columns-mobile-column">
                                    {block name='et-menu-columns-mobile-column-link'}
                                        {if !empty($column.link.href)}
                                            <a class="link-discreet" href="{$column.link.href}"{if !empty($column.link.title)} title="{$column.link.title}"{/if}{if $column.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                                {/if}
                                                {include file='widgets/base/textfield.tpl' value=$column.headline typeClass="h3"}
                                                {if !empty($column.link.href)}
                                            </a>
                                        {/if}
                                    {/block}

                                    {foreach from=$column.items item='item'}
                                        {block name='et-menu-columns-mobile-column-item'}
                                            <div class="et-menu-columns-mobile-item et-menu-columns-mobile-item-type-{$item.displayType} {if $item.showAsHeadline} et-menu-columns-mobile-item-headline{/if}">
                                                {if !empty($item.link.href)}
                                                <a class="link-discreet" href="{$item.link.href}"{if !empty($item.link.title)} title="{$item.link.title}"{/if}{if $item.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                                    {/if}
                                                    {if $item.displayType === 'iconText' || $item.displayType === 'text'}
                                                        {if $item.showAsHeadline}
                                                            {include file='widgets/base/textfield.tpl' value=$item.text typeClass='h4' prepend="{if $item.icon !== '' && $item.displayType === 'iconText'}<i class=\"{$item.icon}\"></i>{/if}"}
                                                        {else}
                                                            {include file='widgets/base/textfield.tpl' value=$item.text type='div' prepend="{if $item.icon !== '' && $item.displayType === 'iconText'}<i class=\"{$item.icon}\"></i>{/if}"}
                                                        {/if}
                                                    {elseif $item.displayType === 'imageText'}
                                                        {if !empty($item.image.src)}
                                                            {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($item.image.srcWebP)
                                                            src=$item.image.src
                                                            alt=$item.image.alt|escape
                                                            class="et-menu-columns-mobile-item-image"
                                                            }
                                                        {/if}
                                                        {if $item.showAsHeadline}
                                                            {include file='widgets/base/textfield.tpl' value=$item.text typeClass='h4'}
                                                        {else}
                                                            {include file='widgets/base/textfield.tpl' value=$item.text type='div'}
                                                        {/if}
                                                    {elseif $item.displayType === 'image'}
                                                        {if !empty($item.image.src)}
                                                            {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($item.image.srcWebP)
                                                            src=$item.image.src
                                                            alt=$item.image.alt|escape
                                                            class="et-menu-columns-mobile-item-image"
                                                            }
                                                        {/if}
                                                    {/if}
                                                    {if !empty($item.link.href)}
                                                </a>
                                                {/if}
                                            </div>
                                        {/block}
                                    {/foreach}
                                </div>
                            {/block}
                        {/foreach}
                    </div>
                </div>
            {/block}
        {/if}
    </div>
{/block}