{% load i18n %}
{% load webpack_static from webpack_loader %}

<!-- ko foreach: { data: [$data], as: 'graphTree' } -->
<div 
    style="height: 100%; display: flex; flex-direction: column;"
    class="jstree jstree-default"
>
    <div class="header" >
        <!-- Layer Filter -->
        <div class="list-filter" data-bind="">
            <input type="text" class="form-control" style="width: 100%;" placeholder="{% trans 'Find a node, datatype, card...' %}" data-bind="textInput: graphTree.filter, event: {keypress: graphTree.filterEnterKeyHandler}">

            <!-- Clear Search -->
            <span class="clear-node-search" data-bind="visible: graphTree.filter().length > 0, click: function() { graphTree.filter(''); }"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="tools">
            <a class="tree-display-tool" data-bind="click: expandAll"><i class="ion-plus"></i>{% trans ' Expand' %}</a>
            <a class="tree-display-tool" data-bind="click: collapseAll"><i class="ion-minus"></i>{% trans ' Collapse' %}</a>
            <a class="tree-display-tool" data-bind="click: toggleGrid"><i class="fa fa-ellipsis-v"></i>{% trans ' Grid' %}</a>
            <!--ko ifnot: graphTree.showIds -->
            <a class="tree-display-tool" data-bind="click: graphTree.toggleIds"><i class="ion-information-circled"></i>{% trans ' Show IDs' %}</a>
            <!--/ko-->
            <!--ko if: graphTree.showIds -->
            <a class="tree-display-tool" data-bind="click: graphTree.toggleIds"><i class="ion-information-circled"></i>{% trans ' Hide IDs' %}</a>
            <!--/ko-->
        </div>
    </div>
    <div class="left-panel-overflow graph-designer-node-tree">
        <ul class="jstree-container-ul jstree-children jstree-striped" aria-expanded="true">
            <div class="" data-bind="template: {
                name: 'graph-tree',
                foreach: graphTree.graphModel.tree,
                as: 'node'
            }"></div>
        </ul>
    </div>
</div>
<!-- /ko -->

<template id="graph-tree">
    <li role="treeitem" class="jstree-node" data-bind="css: {'jstree-open': (node.childNodes().length > 0 && node.expanded), 'jstree-closed' : (node.childNodes().length > 0 && !node.expanded()), 'jstree-leaf': node.childNodes().length === 0, 'hide-background': !graphTree.showGrid()}, scrollTo: graphTree.scrollTo() == node, container: '.graph-designer-node-tree'">
        <i class="jstree-icon" role="presentation" data-bind="{click: function(){node.expanded(!node.expanded())}, css: {'jstree-ocl': graphTree.showGrid}}"></i>
        <a class="jstree-anchor" href="#" tabindex="-1" data-bind="click: graphTree.selectItem.bind(graphTree), css:{'jstree-clicked': node.selected, 'child-selected': graphTree.isChildSelected(node), 'func-node': graphTree.isFuncNode(node), 'filtered': graphTree.filter().length > 0 && !node.filtered()}">
            <span class="spacer"></span>
            <i data-bind="css: 'node.iconclass'" role="presentation"></i>

            <!-- ko if: node.exportable -->
            <i class="jstree-leading-icon fa fa-download" role="presentation" data-toggle="tooltip" data-placement="top" data-container="body" data-original-title="{% trans 'Node is exportable in search' %}"></i>
            <!-- /ko -->
            <span class="" data-bind="{text: graphTree.getDisplayName(node)}"></span>
            <!-- ko if: graphTree.showIds -->
            <span style="font-weight:bold;" data-bind="text: ': ' + node.nodeid"></span>
            <!-- /ko -->
            <span class="spacer"></span>
            <i class="jstree-node-action-icon ion-ios-copy-outline" role="presentation" data-bind="visible: graphTree.showIds(), clipboard: {value: node.nodeid, tooltip: true, beforeCopiedText: graphTree.translations.copyNodeIdToClipboard, afterCopiedText: graphTree.translations.copiedNodeIdToClipboard}" data-toggle="tooltip" data-placement="auto" data-container="body"></i>
            <!--ko if: graphTree.restrictedNodegroups.includes(node.nodeGroupId()) === false -->
            <i class="jstree-node-action-icon fa fa-plus-circle" role="presentation" data-bind="click: graphTree.addChildNode.bind(graphTree)" data-toggle="tooltip" data-placement="auto" data-container="body" data-original-title="{% trans "Add Child Node" %}"></i>
            <i class="jstree-node-action-icon ion-merge" role="presentation" data-bind="click: graphTree.toggleBranchList.bind(graphTree)" data-toggle="tooltip" data-placement="auto" data-container="body" data-original-title="{% trans "Add Branch" %}"></i>
            <!-- /ko -->
            <!-- ko if: !node.istopnode -->
            <i class="jstree-node-action-icon fa" role="presentation" data-bind="{click: graphTree.exportBranch.bind(graphTree), css: {'fa-arrow-right': graphTree.activeLanguageDir() != 'rtl', 'fa-arrow-left': graphTree.activeLanguageDir() == 'rtl'}}" data-toggle="tooltip" data-placement="auto" data-container="body" data-original-title="{% trans "Export Branch" %}"></i>
            <!-- /ko -->
            <!-- ko if: !node.istopnode && graphTree.restrictedNodegroups.includes(node.nodeGroupId()) === false -->
                <i class="jstree-node-action-icon fa fa-trash" role="presentation" data-bind="click: graphTree.deleteNode.bind(graphTree)" data-toggle="tooltip" data-placement="auto" data-container="body" data-original-title="{% trans "Delete Node" %}"></i>
            <!-- /ko -->
            
        </a>
        <!-- ko if: node.expanded() -->
        <ul class="jstree-children" aria-expanded="true" data-bind="if: node.childNodes().length > 0">
            <div data-bind="sortable: {
                template: 'graph-tree',
                data: node.childNodes,
                as: 'node',
                beforeMove: graphTree.beforeMove,
                afterMove: graphTree.reorderNodes
            }">
            </div>
        </ul>
        <!-- /ko -->
    </li>
</template>

<script src="{% webpack_static 'node_modules/underscore/underscore-min.js' %}"></script>

