{extends file='parent:frontend/plugins/advanced_menu/index.tpl'}


{block name="frontend_plugins_advanced_menu_main_container"}
    <div class="button-container">
        {block name="frontend_plugins_advanced_menu_button_category"}
            <a href="{$link|escapeHtml}" class="button--category" title="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}">{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name}<i class="icon--arrow-right"></i></a>
        {/block}

        {block name="frontend_plugins_advanced_menu_button_close"}
            <span class="button--close"><i class="icon--cross"></i></span>
        {/block}
    </div>
    {if $hasCategories || $hasTeaser}
        <div class="content--wrapper{if $hasCategories} has--content{/if}{if $hasTeaser} has--teaser{/if}{if !empty($mainCategory.attribute.adv_menu_gallery)} has--gallery{/if}">
            {if $hasCategories}
                {block name="frontend_plugins_advanced_menu_sub_categories"}
                    {call name="categories_top" categories=$mainCategory.sub}
                {/block}
            {/if}

            {if $hasTeaser}
                {block name="frontend_plugins_advanced_menu_teaser"}
                    {if $hasCategories}
                        <div class="menu--delimiter" style="right: {$columnAmount * 25}%;"></div>
                    {/if}
                    <div class="menu--teaser"{if $hasCategories} style="width: {3 * 25}%;"{else} style="width: 100%;"{/if}>

                        {if !empty($mainCategory.media) && empty($mainCategory.attribute.adv_menu_gallery) }
                            <a href="{$link|escapeHtml}" title="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}" class="teaser--image" style="background-image: url({link file={$mainCategory.media.path}});"></a>
                        {/if}

                        {if !empty($mainCategory.cmsHeadline)}
                            <div class="teaser--headline">{$mainCategory.cmsHeadline}</div>
                        {/if}

                        {if !empty($mainCategory.cmsText)}
                            <div class="teaser--text">
                                {$mainCategory.cmsText|unescape:'html'}
                            </div>
                        {/if}
                        {if !empty($mainCategory.attribute.adv_menu_gallery)}
                            <div class="teaser--gallery">
                                {$mainCategory.attribute.adv_menu_gallery|unescape:'html'}
                            </div>
                        {/if}
                    </div>
                {/block}
            {/if}
        </div>
    {/if}
{/block}
