<div class="Megamenu">
    <ul class="TopItems" ng-mouseover="a()" ng-mouseleave="a(true)">
        <li id="tab{{$index}}" ng-repeat="topItem in vm.topItems" ng-mouseover="vm.overTopItemV2(topItem, $index);" ng-mouseleave="vm.leaveTopItemV2()">
            <a class="TopItem" 
               ng-attr-target="{{vm.getTranslatedText(topItem, 'openInNewWindow') ? '_blank' : undefined}}" 
               ng-href="{{vm.getTranslatedText(topItem, 'href')}}" 
               ng-class="{EnableHover:vm.enableHoverOnTopLinks, active:topItem == vm.currentTopItem}"
               aria-haspopup="true">{{vm.getTranslatedText(topItem, "title")}}</a>
        </li>
    </ul>

    <div class="FoldOutContainer" ng-if="!vm.loading" 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" ng-repeat="topItem in vm.topItems">
            <h3>{{vm.getTranslatedText(topItem, "title")}}</h3>
            <ul>
                <li class="topLink">
                    <a ng-href="{{vm.getTranslatedText(topItem, 'href')}}" ng-click="vm.clickTopItem(vm.getTranslatedText(topItem, 'href'), topItem, $event);">{{vm.getTranslatedText(topItem, "title")}}</a>
                </li>
                <li ng-repeat="foldoutColumn in topItem.children | orderBy:'sortOrder'" class="Column">

                    <ul>
                        <li ng-repeat="item in foldoutColumn.children | orderBy:'sortOrder'" ng-switch="item.contentType">
                            <div ng-switch-when="Text" class="Item Heading">{{vm.getTranslatedText(item,'title')}}</div>
                            <a ng-switch-when="Link" class="Item Link" ng-class="{EnableHover:vm.enableHoverOnLinks}" ng-href="{{vm.getTranslatedText(item,'href')}}" ng-attr-target="{{vm.getTranslatedText(item,'openInNewWindow') ? '_blank' : undefined}}">{{vm.getTranslatedText(item,'title')}}</a>
                            <div ng-switch-when="Html" class="Item Html fr-view" ng-class="{EnableHover:vm.enableHoverOnHtml}" ng-bind-html="vm.getTranslatedText(item,'html') | wizdom365TrustHtml"></div>
                        </li>
                    </ul>
                </li>
            </ul>

        </div>

    </div>
</div>
