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