{block name='et-menu-columns-main'}
    <div class="et-menu-item et-menu-columns col-auto{if $et_MenuColumns.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_MenuColumns.size}" data-menu-navigate="{if isset($et_MenuColumns.link) && $et_MenuColumns.link.href !== ''}true{else}false{/if}" role="menuitem" aria-expanded="false" tabindex="0"{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}>
        {block name='et-menu-columns-main-link'}
            <a class="et-menu-item-link no-style"
                    {if isset($et_MenuColumns.link) && $et_MenuColumns.link.href !== ''} href="{$et_MenuColumns.link.href}"{/if}
                    {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}>
                <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-main-content-loader'}
                <div class="et-menu-item-content et-menu-columns-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-columns-main-content'}
                <div class="et-menu-item-content et-menu-columns-main-content d-none">
                    {if isset($et_MenuColumns.columns)}
                        {$columnsCount = count($et_MenuColumns.columns)}
                        {else}
                        {$columnsCount = 0}
                    {/if}
                    <div class="row row-cols-{min($et_MenuColumns.columnsPerRow.xs, $columnsCount)} row-cols-sm-{min($et_MenuColumns.columnsPerRow.sm, $columnsCount)} row-cols-md-{min($et_MenuColumns.columnsPerRow.md, $columnsCount)} row-cols-lg-{min($et_MenuColumns.columnsPerRow.lg, $columnsCount)} row-cols-xl-{min($et_MenuColumns.columnsPerRow.xl, $columnsCount)}">
                        {foreach from=$et_MenuColumns.columns item='column' name='columns'}
                            {block name='et-menu-columns-main-column'}
                                <div class="col">
                                    {block name='et-menu-columns-main-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-main-column-item'}
                                            <div class="et-menu-columns-main-item et-menu-columns-main-item-type-{$item.displayType} {if $item.showAsHeadline} et-menu-columns-main-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-main-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-main-item-image"
                                                        }
                                                    {/if}
                                                {/if}
                                                {if !empty($item.link.href)}
                                                    </a>
                                                {/if}
                                            </div>
                                        {/block}
                                    {/foreach}
                                </div>
                            {/block}
                        {/foreach}
                    </div>
                </div>
            {/block}
        {/if}
    </div>
{/block}