<div class="Megamenu">
	<ul class="TopItems" ng-mouseover="a()" ng-mouseleave="a(true)">
        <li id="tab{{$index}}" ng-repeat="item in vm.topItems | orderBy:'sortOrder' track by item.id"
            ng-class="::{EnableHover:vm.enableHoverOnTopLinks}"
            class="TopElement"
            ng-mouseover="vm.overTopItemV2(item, $index);"
            ng-mouseleave="vm.leaveTopItemV2()"
            aria-haspopup="true">
            <div id="tab-button-{{$index}}" class="tab-button-container" wizdom-include='::item.templatePath'></div>
        </li>
	</ul>
    <!--ng-class="{EnableHover:vm.enableHoverOnTopLinks, active:topItem == vm.currentTopItem}"-->
	<div ng-if="!vm.loading" class="FoldOutContainer" ng-class="::{fullWidth:vm.fullWidth}" ng-mouseover="vm.overFoldOutContainer();" ng-mouseleave="vm.leavingFoldOutContainer();">
        <div id="tab{{$index}}Section" ng-class="::{fullWidth:vm.fullWidth}" class="navigationTree FoldOut navigationTreeV2 tab-popup-container" ng-repeat="item in ::vm.topItems">    
            <h3>{{::(item.translatedTitle || item.title)}}</h3>
            <ul>
                <li class="topLink">
					<div tabindex="-1" wizdom-include='::item.templatePath'></div>
                </li>
                <li ng-repeat="section in ::item.children | orderBy:'sortOrder'" class="Column">                    
                    <ul>
                        <li ng-repeat="item in ::section.children | orderBy:'sortOrder'">
                            <div tabindex="0" class="tab-popup-item" wizdom-include='::item.templatePath'></div>                            
                        </li>
                    </ul>
                </li>
            </ul>
		</div>
	</div>
</div>

