<ul class="umb-tree" ng-class="{'hide-options': hideoptions === 'true'}">

    <li ng-if="!tree.root.containsGroups">
        <div class="umb-tree-root" data-element="tree-root" ng-class="getNodeCssClass(tree.root)" ng-hide="hideheader === 'true'" on-right-click="altSelect(tree.root, $event)">
            <h5>
                <a ng-href="#/{{section}}" ng-click="select(tree.root, $event)" class="umb-tree-root-link umb-outline" data-element="tree-root-link">
                    <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(tree.root)"></i>
                    {{tree.name}}
                </a>
            </h5>
            <button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(tree.root, $event)" ng-swipe-right="options(tree.root, $event)">
                <i></i><i></i><i></i>
            </button>
        </div>
        <umb-tree-item class="umb-animated"
                       ng-repeat="child in tree.root.children"
                       enablelistviewexpand="{{enablelistviewexpand}}"
                       node="child"
                       current-node="currentNode"
                       tree="this"
                       is-dialog="isdialog"
                       section="{{section}}">
        </umb-tree-item>
    </li>

    <!-- REPEAT for each group in the tree -->
    <li ng-if="tree.root.containsGroups"
        ng-repeat="group in tree.root.children">

        <div class="umb-tree-root" data-element="tree-root" ng-class="getNodeCssClass(group)" ng-hide="hideheader === 'true'" on-right-click="altSelect(group, $event)">
            <h5>
                <a ng-href="#/{{section}}" ng-click="select(group, $event)" class="umb-tree-root-link umb-outline" data-element="tree-root-link">
                    <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(group)"></i>
                    {{group.name}}
                </a>
            </h5>
            <button data-element="tree-item-options" class="umb-options umb-outline btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-hide="group.isContainer || !group.menuUrl" ng-click="options(group, $event)" ng-swipe-right="options(group, $event)">
                <i></i><i></i><i></i>
            </button>
        </div>

        <umb-tree-item class="umb-animated"
                       ng-repeat="child in group.children"
                       enablelistviewexpand="{{enablelistviewexpand}}"
                       node="child"
                       current-node="currentNode"
                       tree="this"
                       is-dialog="isdialog"
                       section="{{section}}">
        </umb-tree-item>
    </li>
    <!-- END REPEAT -->
</ul>
