<treecontrol ng-if="$root.keysTree.length > 0" class="{{ $ctrl.getTreeTheme() }} p3xr-main-tree"
             tree-model="$root.keysTree" options="$ctrl.keysTreeOptions" expanded-nodes="$root.expandedNodes"
             on-selection="$ctrl.selectTreeNode(node, selected, $parentNode, $index, $first, $middle, $last, $odd, $even, $path)"
             on-node-toggle="$ctrl.showToggle(node, expanded, $parentNode, $index, $first, $middle, $last, $odd, $even, $path)">


    <span in-view="$ctrl.displayNode(node, $inview)" ng-if="!node.$inview" style="display: inline-block; width: 89%; margin-left: auto; margin-right: auto; background-color: rgba(128, 128, 128, 0.5); height: 2px; margin-bottom: 10px; margin-top: 10px;"></span>
    <span ng-if="node.$inview" data-p3xr-tree-key="{{$ctrl.extractNodeKey(node)}}">
        <md-tooltip md-direction="top">{{ $ctrl.extractNodeTooltip(node) }}</md-tooltip>
        <label class="p3xr-main-tree-node" ng-mouseover="$ctrl.treeHover({node})" ng-mouseleave="node.show = false">

            <span ng-switch="node.keysInfo.type">
                <i ng-switch-when="hash" class="p3xr-main-treecontrol-node-icon fas fa-hashtag" aria-hidden="true"></i>
                <i ng-switch-when="list" class="p3xr-main-treecontrol-node-icon fas fa-list-ol" aria-hidden="true"></i>
                <i ng-switch-when="set" class="p3xr-main-treecontrol-node-icon fas fa-list" aria-hidden="true"></i>
                <i ng-switch-when="string" class="p3xr-main-treecontrol-node-icon fas fa-ellipsis-h" aria-hidden="true"></i>
                <i ng-switch-when="zset" class="p3xr-main-treecontrol-node-icon fas fa-chart-line" aria-hidden="true"></i>
                <i ng-switch-when="stream" class="p3xr-main-treecontrol-node-icon fas fa-stream" aria-hidden="true"></i>
            </span>
            {{node.label}}
            <span class="p3xr-main-tree-node-count" ng-if="node.type === 'folder'">{{$root.p3xr.settings.redisTreeDivider}}* ({{node.childCount}})</span>
            <span class="p3xr-main-tree-node-count"
                  ng-if="node.type !== 'folder' && node.keysInfo.type !== 'string' && node.keysInfo !== undefined">({{node.keysInfo.length}})</span>
            <span ng-if="node.type === 'folder'" ng-show="node.show" style="position: relative; top: -1px;">
                        <span>
                            <md-tooltip md-direction="right">{{ $root.p3xr.strings.confirm.deleteAllKeys({key: node.key}) }}</md-tooltip>
                            <md-icon ng-click="$ctrl.deleteTree({event: $event, node: node})"
                                     class="md-warn p3xr-main-treecontrol-folder-icon">close</md-icon>
                        </span>
                        <span  style="position: relative; top: -1px;">
                            <md-tooltip md-direction="right">{{ $root.p3xr.strings.intention.addKey }}</md-tooltip>
                            <md-icon ng-click="$ctrl.addKey({event: $event, node: node})"
                                     md-theme="{{ $root.p3xr.state.themeCommon }}"
                                     class="md-warn p3xr-main-treecontrol-folder-icon">add</md-icon>
                        </span>
                    </span>
        </label>
    </span>

</treecontrol>