{if $smarty.const.NAVIGATION_CONTENT_BLOCK}
{content block_id=$smarty.const.NAVIGATION_CONTENT_BLOCK}
{assign var=navigation_content value=$_content_{$smarty.const.NAVIGATION_CONTENT_BLOCK}}
{/if}

{if $_categories}
{if $smarty.const.NAVIGATION_COMBINE_CATEGORIES eq 'true'}
{assign var=categories value=[['categories_name' => $smarty.const.TEXT_XGX_BARE_ASSORTMENT,'categories_link' => '#','sub' => $_categories]]}
{else}
{assign var=categories value=$_categories}
{/if}

<div class="mega-menu-wrapper">
    <div class="mega-menu {if $smarty.const.NAVIGATION_POSITION eq 'top'}is-sticky is-shown{/if}">
        <div class="navigation-wrapper">
            <ul class="navigation clearfix hidden-xs hidden-sm flickity-enabled" data-flickity='{ "cellAlign": "{$smarty.const.NAVIGATION_ORIENTATION}", "contain": true, "draggable": false, "pageDots": false, "groupCells": true }' tabindex="0">
                {foreach $categories as $category}
                <li class="navigation-enter">
                    <a class="navigation-link link-no-td" href="{$category.categories_link}" {if $category.categories_link eq '#'}onclick="event.preventDefault();"{/if}>{$category.categories_name}</a>
                </li>
                {/foreach}

                {if $navigation_content}
                {foreach $navigation_content as $content}
                <li class="navigation-enter">
                    <a class="navigation-link link-no-td" href="{$content.link}" {if $content.link eq '#'}onclick="event.preventDefault();"{/if}>{$content.content_title}</a>
                </li>
                {/foreach}
                {/if}
            </ul>
        </div>

        <div class="mega-menu-list">
            {foreach $categories as $category}
            <div class="mega-menu-item">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mega-menulist-wrapper">
                                <button class=" btn btn-primary mega-menu-close"><i class="fa fa-times" aria-hidden="true"></i></button>

                                <div class="navigations-link-more">
                                    {if $smarty.const.NAVIGATION_COMBINE_CATEGORIES neq 'true'}
                                    <a href="{$category.categories_link}" class="link-no-td">
                                        <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> {txt key=TEXT_MORE_DETAILS}: <span class="text-primary">{$category.categories_name}</span>
                                    </a>
                                    {/if}
                                </div>

                                {if $smarty.const.MEGAMENU_CATEGORIES_IMAGE eq 'true' && $smarty.const.MEGAMENU_CATEGORIES_IMAGE_ORIENTATION eq 'top' && $category.categories_image}
                                <div class="navigations-img-top">
                                    <a href="{$category.categories_link}">
                                        {img img=$category.categories_image type=m_category_1140x class="img-responsive" alt=$category.categories_name}
                                    </a>
                                </div>
                                {/if}

                                <div class="mega-menulist-inner">
                                    <div class="row">
                                        {if $smarty.const.MEGAMENU_CATEGORIES_IMAGE eq 'true' && $smarty.const.MEGAMENU_CATEGORIES_IMAGE_ORIENTATION neq 'top'}
                                        <div class="mega-menulist-entries {if $smarty.const.MEGAMENU_CATEGORIES_IMAGE_ORIENTATION eq 'left'}pull-right{/if}">
                                            <div class="row">
                                        {/if}
                                                {if !empty($category.sub)}
                                                <ul class="mega-menu-itemlist">
                                                    {foreach $category.sub as $sub_category}
                                                    {if empty($sub_category.sub)}
                                                    <li class="mega-nav-item">
                                                        <div class="mega-nav-listitem-drop">
                                                            <a href="{$sub_category.categories_link}" class="mega-nav-listitem">{$sub_category.categories_name}</a>
                                                            <a href="{$sub_category.categories_link}" class="mega-nav-listitem-down"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
                                                        </div>
                                                    </li>
                                                    {else}
                                                    <li class="mega-nav-item">
                                                        <div class="mega-nav-listitem-drop">
                                                            <a href="{$sub_category.categories_link}" class="mega-nav-listitem">{$sub_category.categories_name}</a>
                                                            <a href="#" class="mega-nav-listitem-down dropdown-toggle" id="megamenu-cat{$sub_category.categories_id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa" aria-hidden="true"></i></a>
                                                            <ul class="dropdown-menu dropdown-megamenu" aria-labelledby="megamenu-cat{$sub_category.categories_id}">
                                                                {foreach $sub_category.sub as $subsub_category}
                                                                <li><a href="{$subsub_category.categories_link}">{$subsub_category.categories_name}</a></li>
                                                                {/foreach}
                                                                <li role="separator" class="divider"></li>
                                                                <li><a href="{$sub_category.categories_link}" class="dropdown-in-mega-linkmore"><i class="fa fa-chevron-right" aria-hidden="true"></i> {txt key=TEXT_XGX_BARE_SHOW_MORE} </a></li>
                                                            </ul>
                                                        </div>
                                                    </li>
                                                    {/if}
                                                    {/foreach}
                                                </ul>
                                                {/if}
                                        {if $smarty.const.MEGAMENU_CATEGORIES_IMAGE eq 'true' && $smarty.const.MEGAMENU_CATEGORIES_IMAGE_ORIENTATION neq 'top'}
                                            </div>
                                        </div>
                                        {/if}

                                        {if $smarty.const.MEGAMENU_CATEGORIES_IMAGE eq 'true' && $smarty.const.MEGAMENU_CATEGORIES_IMAGE_ORIENTATION neq 'top' && $category.categories_image}
                                        <div class="mega-menulist-img">
                                            <a href="{$category.categories_link}">
                                                {if $smarty.const.MEGAMENU_CATEGORIES_IMAGE_SIZE eq '3'}
                                                {$catSize = 250}
                                                {elseif $smarty.const.MEGAMENU_CATEGORIES_IMAGE_SIZE eq '6'}
                                                {$catSize = 540}
                                                {elseif $smarty.const.MEGAMENU_CATEGORIES_IMAGE_SIZE eq '9'}
                                                {$catSize = 810}
                                                {/if}

                                                {img img=$category.categories_image type="m_category_{$catSize}x" class="img-responsive" alt=$category.categories_name}
                                            </a>
                                        </div>
                                        {/if}

                                    </div>

                                    {if $smarty.const.MEGAMENU_CATEGORIES_DESCRIPTION_SHORT eq 'true' && $category.categories_description}
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="categorie-box-mega">
                                                <p class="categorie-head">{$category.categories_name}</p>
                                                <div class="categorie-description"><p>{$category.categories_description}</p></div>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}

            {if $navigation_content}
            {foreach $navigation_content as $content}
            <div class="mega-menu-item">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mega-menulist-wrapper">
                                <button class=" btn btn-primary mega-menu-close"><i class="fa fa-times" aria-hidden="true"></i></button>

                                <div class="navigations-link-more">
                                    <a href="{$content.link}" class="link-no-td">
                                        <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> {txt key=TEXT_MORE_DETAILS}: <span class="text-primary">{$content.content_title}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
            {/if}
        </div>
    </div>
</div>
<div class="navbar-mega-overlay modal-backdrop fade hidden-float-breakpoint"></div>
{/if}