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

            <!-- Clear Search -->
            <span class="clear-node-search" data-bind="visible: filter().length > 0, click: function() { 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>
            <a class="tree-display-tool" data-bind="click: selectAllCards"><i class="ion-checkmark"></i>{% trans ' Select All' %}</a>
            <a class="tree-display-tool" data-bind="click: clearSelection"><i class="ion-close"></i>{%  trans ' Clear All' %}</a>
        </div>
    </div>
    <div class="left-panel-overflow designer-tree designer-permission-tree">
        <ul class="jstree-container-ul jstree-children jstree-striped" aria-expanded="true">
            <li role="treeitem" class="jstree-node" data-bind="css: {'jstree-open': rootExpanded, 'jstree-closed' : !rootExpanded(), 'hide-background': !graphTree.showGrid()}">
                <i class="jstree-icon" role="presentation" data-bind="{click: function(){rootExpanded(!rootExpanded())}, css: {'jstree-ocl': graphTree.showGrid}}"></i>
                <a class="jstree-anchor" href="#" tabindex="-1">
                    <strong>
                        <i data-bind="css: graphiconclass" role="presentation"></i>
                        <span data-bind="text: graphname"></span>
                    </strong>
                </a>
                <!-- ko foreach: { data: [$data], as: 'self' } -->
                <ul class="jstree-children" aria-expanded="true" data-bind="foreach: {
                    data: topCards,
                    as: 'card'
                }">
                    <!-- ko component: {
                        name: self.cardComponentLookup[card.model.component_id()].componentname,
                        params: {
                            state: 'permissions-tree',
                            card: card,
                            tile: null,
                            loading: self.loading,
                            form: self,
                            pageVm: $root
                        }
                    } --> <!-- /ko -->
                </ul>
                <!-- /ko -->
            </li>
        </ul>
    </div>
</div>
<!-- /ko -->
