<treecontrol ng-if="$root.keysTree.length > 0 && $ctrl.isEnabled" 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" ng-mouseover="$ctrl.hover({node})" ng-mouseleave="node.show = false">

        <span 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.hover({node})" ng-mouseleave="node.showTree = 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>
                <span class="p3xr-main-tree-node-label">{{node.label}}</span><span class="p3xr-main-tree-node-count" ng-if="node.type === 'folder'">{{$root.p3xr.settings.redisTreeDivider}}* <span style="opacity: 0.5;">({{node.childCount}})</span></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.showTree" style="position: relative; top: -1px;">
                            <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>
        <span ng-show="node.show" style="position: relative; top: -1px; ">
                <span ng-if="node.type === 'folder'">
                    <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 ng-if="node.type === 'element'">
                    <md-tooltip md-direction="right">{{ $root.p3xr.strings.intention.delete }}</md-tooltip>
                    <md-icon ng-click="$ctrl.delete({event: $event, key: node.key })"
                             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>


    </span>


</treecontrol>