{% load i18n %}
<!-- ko foreach: { data: [$data], as: 'self' } -->

<!-- ko if: state === 'editor-tree' && self.card.model.visible() -->
{% block editor_tree %}
<li role="treeitem card-treeitem" class="jstree-node" data-bind="css: {'jstree-open': (card.tiles().length > 0 && card.expanded()), 'jstree-closed' : (card.tiles().length > 0 && !card.expanded()), 'jstree-leaf': card.tiles().length === 0, 'hide-background': !self.showGrid()}, scrollTo: card.scrollTo, container: '.resource-editor-tree'">
    <i class="jstree-icon" role="presentation" data-bind="click: function(){card.expanded(!card.expanded())}, css: {'jstree-ocl': self.showGrid}"></i>
    <a class="jstree-anchor" href="#" tabindex="-1" data-bind="css:{'filtered': card.highlight(), 'jstree-clicked': card.selected, 'child-selected': card.isChildSelected(), 'func-node': card.isFuncNode(),'unsaved-edit': card.isDirty() === true}, event: {
        mousedown: function(d, e) {
            e.stopPropagation();
            self.card.canAdd() ? self.card.selected(true) : self.card.tiles()[0].selected(true);
        }
    }">
        <!-- ko if: !self.card.isFuncNode() -->
        <i class="fa fa-file-o" role="presentation" data-bind="css:{'filtered': self.card.highlight(), 'has-provisional-edits fa-file': self.card.doesChildHaveProvisionalEdits()}"></i>
        <!-- /ko -->
        <!-- ko if: self.card.isFuncNode() -->
        <i class="fa fa-code" role="presentation" data-bind="css:{'filtered': self.card.highlight(), 'has-provisional-edits fa-file': self.card.doesChildHaveProvisionalEdits()}"></i>
        <!-- /ko -->
        <span style="padding-right: 5px;" data-bind="text: self.card.model.name"></span>
        <!-- ko if: self.card.canAdd() -->
        <i class="fa fa-plus-circle add-new-tile" role="presentation" data-bind="css:{'jstree-clicked': self.card.selected}, click: function(){self.card.showForm(true);}, clickBubble: false" data-toggle="tooltip" data-original-title="$root.translations.addGnu"></i>
        <!-- /ko -->
    </a>
    <ul class="jstree-children" aria-expanded="true">
        <div data-bind="sortable: {
            data: self.card.tiles,
            options: {
                start: self.startDrag
            },
            beforeMove: self.beforeMove,
            afterMove: self.card.reorderTiles
        }">
            <li role="treeitem" class="jstree-node" data-bind="css: {'jstree-open': (cards.length > 0 && expanded), 'jstree-closed' : (cards.length > 0 && !expanded()), 'jstree-leaf': cards.length === 0, 'hide-background': !self.showGrid()}, event: {'dragstart': function () { console.log('dragging...') }}">
                <i class="jstree-icon" role="presentation" data-bind="click: function(){expanded(!expanded())}, css: {'jstree-ocl': self.showGrid}"></i>
                <a class="jstree-anchor" href="#" tabindex="-1" data-bind="click: function () { self.form.selection($data);}, css:{'jstree-clicked': selected, 'child-selected': isChildSelected(), 'filtered-leaf': card.highlight(), 'unsaved-edit': !!$data.dirty()}">
                    <i class="fa " role="presentation" data-bind="css:{'has-provisional-edits': doesChildHaveProvisionalEdits() || $data.hasprovisionaledits(),'fa-pencil':$data.dirty()===true,'fa-file':!$data.dirty()}"></i>
                    <strong style="margin-right: 10px;">
                        {% block editor_tree_node_content %}
                        <!-- ko if: self.card.widgets().length > 0 && self.card.widgets()[0].visible -->
                        <span data-bind="text: self.card.widgets()[0].label || self.card.model.name"></span>:
                        <div style="display: inline;" data-bind="component: {
                            name: self.form.widgetLookup[self.card.widgets()[0].widget_id()].name,
                            params: {
                                tile: $data,
                                node: self.form.nodeLookup[card.widgets()[0].node_id()],
                                config: self.form.widgetLookup[card.widgets()[0].widget_id()].config,
                                label: self.form.widgetLookup[card.widgets()[0].widget_id()].label,
                                inResourceEditor: self.inResourceEditor,
                                value: $data.data[card.widgets()[0].node_id()],
                                type: 'resource-editor',
                                state: 'display_value',
                                disabled: !self.card.isWritable && !self.preview
                            }
                        }"></div>
                        <!-- /ko -->
                        <!-- ko if: self.card.widgets().length === 0 || !self.card.widgets()[0].visible -->
                        <span data-bind="text: self.card.model.name"></span>
                        <!-- /ko -->
                        {% endblock editor_tree_node_content %}
                    </strong>
                </a>
                <!-- ko if: cards.length > 0 && self.card.expanded() -->
                <ul class="jstree-children" aria-expanded="true" data-bind="foreach: {
                        data: cards,
                        as: 'card'
                    }">
                    <!-- ko component: {
                        name: self.form.cardComponentLookup[card.model.component_id()].componentname,
                        params: {
                            state: 'editor-tree',
                            card: card,
                            tile: null,
                            loading: self.loading,
                            form: self.form,
                            pageVm: $root
                        }
                    } --> <!-- /ko -->
                </ul>
                <!-- /ko -->
            </li>
        </div>
    </ul>
</li>
{% endblock editor_tree %}
<!-- /ko -->

<!-- ko if: state === 'designer-tree' -->
{% block designer_tree %}
<li role="treeitem card-treeitem" class="jstree-node" data-bind="css: {'jstree-open': ((card.cards().length > 0 || card.widgets().length > 0) && card.expanded()), 'jstree-closed' : ((card.cards().length > 0 || card.widgets().length > 0) && !card.expanded()), 'jstree-leaf': card.cards().length === 0 && card.widgets().length === 0, 'hide-background': !self.showGrid()}, scrollTo: card.scrollTo, container: '.designer-card-tree'">
    <i class="jstree-icon" role="presentation" data-bind="click: function(){card.expanded(!card.expanded())}, css: {'jstree-ocl': self.showGrid}"></i>
    <a class="jstree-anchor" href="#" tabindex="-1" data-bind="css:{'filtered': card.highlight(), 'jstree-clicked': card.selected, 'child-selected': card.isChildSelected(), 'func-node': card.isFuncNode()}, click: function () { card.selected(true) },">
        <i class="fa fa-file-o" role="presentation"></i>
        <span data-bind="text: card.model.name"></span>
        <!-- ko if: card.showIds -->
        <span style="font-weight:bold" data-bind="text: ': ' + card.model.nodegroup_id()"></span>
        <!-- /ko -->
    </a>
    <!-- ko if: (card.cards().length > 0 || card.widgets().length > 0) && card.expanded()  -->
    <ul class="jstree-children card-designer-tree" aria-expanded="true">
        <div data-bind="sortable: {
                data: card.widgets,
                as: 'widget',
                beforeMove: self.beforeMove,
                afterMove: function() { card.model.save() }
            }">
            <li role="treeitem" class="jstree-node jstree-leaf" data-bind="css: {
                    'jstree-last': $index() === (card.widgets().length - 1) && $parent.card.cards().length === 0, 'hide-background': !self.showGrid()
                }">
                <i class="jstree-icon" role="presentation" data-bind="css: {'jstree-ocl': self.showGrid}"></i>
                <a class="jstree-anchor" href="#" tabindex="-1" data-bind="click: function() { widget.selected(true) }, css:{'jstree-clicked': widget.selected, 'hover': widget.hovered}, event: { mouseover: function(){ widget.hovered(true) }, mouseout: function(){ widget.hovered(null) } }">
                    <i data-bind="css: widget.datatype.iconclass" role="presentation"></i>
                    <strong style="margin-right: 10px;" >
                        <span data-bind="text: !!(widget.label()) ? widget.label() : widget.node.name"></span>
                        <!-- ko if: $parent.showIds -->
                        <span style="font-weight:bold" data-bind="text: ': ' + (!!(widget.label()) ? widget.node.nodeid : '')"></span>
                        <!-- /ko -->
                    </strong>
                </a>
            </li>
        </div>
        <div data-bind="sortable: {
                data: card.cards,
                as: 'childCard',
                beforeMove: self.beforeMove,
                afterMove: function() {
                    card.reorderCards();
                }
            }">
            <div data-bind="css: {
                    'jstree-last': ($index() === ($parent.card.cards().length - 1))
                }">
                <!-- ko component: {
                        name: self.form.cardComponentLookup[childCard.model.component_id()].componentname,
                        params: {
                        state: 'designer-tree',
                        card: childCard,
                        tile: null,
                        loading: self.loading,
                        form: self.form,
                        pageVm: $root,
                        showIds: childCard.showIds
                    }
                } --> <!-- /ko -->
            </div>
        </div>
    </ul>
    <!-- /ko -->
</li>
{% endblock designer_tree %}
<!-- /ko -->


<!-- ko if: state === 'permissions-tree' -->
{% block permissions_tree %}
<li role="treeitem card-treeitem" class="jstree-node" data-bind="css: {'jstree-open': ((card.cards().length > 0 || card.widgets().length > 0) && card.expanded()), 'jstree-closed' : ((card.cards().length > 0 || card.widgets().length > 0) && !card.expanded()), 'jstree-leaf': card.cards().length === 0 && card.widgets().length === 0, 'hide-background': !self.showGrid()}">
    <i class="jstree-icon" role="presentation" data-bind="click: function(){card.expanded(!card.expanded())}, css: {'jstree-ocl': self.showGrid}"></i>
    <a class="jstree-anchor permissions-card" href="#" tabindex="-1" data-bind="css:{'jstree-clicked': card.selected, 'child-selected': card.isChildSelected(), 'filtered': card.highlight()}, click: function () { card.selectChildCards() },">
        <i class="fa fa-file-o" role="presentation"></i>
        <span style="padding-right: 5px;" data-bind="text: card.model.name">
        </span>
        <span class="node-permissions">
            <!-- ko if: card.perms -->
            <!-- ko foreach: card.perms() -->
            <i class="node-permission-icon" data-bind="css: $data.icon"></i>
            <!-- /ko -->
            <!-- /ko -->
        </span>
    </a>
    <!-- ko if: (card.cards().length > 0 || card.widgets().length > 0) && card.expanded() -->
    <ul class="jstree-children card-designer-tree" aria-expanded="true">
        {% block designer_tree_widgets %}
        <div data-bind="sortable: {
                data: card.widgets,
                as: 'widget',
                beforeMove: self.beforeMove,
                afterMove: function() { card.model.save() }
            }">
            <li role="treeitem" class="jstree-node jstree-leaf" data-bind="css: {
                    'jstree-last': $index() === (card.widgets().length - 1) && $parent.card.cards().length === 0,
                    'hide-background': !self.showGrid()
                }">
                <i class="jstree-icon" role="presentation" data-bind="css: {'jstree-ocl': self.showGrid}"></i>
                <a class="jstree-anchor permissions-widget" href="#" tabindex="-1">
                    <i class="fa fa-file" role="presentation" ></i>
                    <strong style="margin-right: 10px;" >
                        <span data-bind="text: !!(widget.label()) ? widget.label() : widget.node.name"></span>
                    </strong>
                </a>
            </li>
        </div>
        {% endblock designer_tree_widgets %}
        {% block designer_tree_cards %}
        <div data-bind="foreach: {
                data: card.cards,
                as: 'card'
            }">
            <div data-bind="css: {
                    'jstree-last': ($index() === ($parent.card.cards().length - 1))
                }">
                <!-- ko component: {
                    name: self.form.cardComponentLookup[card.model.component_id()].componentname,
                    params: {
                    state: 'permissions-tree',
                    card: card,
                    tile: null,
                    loading: self.loading,
                    form: self.form,
                    multiselect: true,
                    pageVm: $root
                }
            } --> <!-- /ko -->
            </div>
        </div>
        {% endblock designer_tree_cards %}
    </ul>
    <!-- /ko -->
</li>
{% endblock permissions_tree %}
<!-- /ko -->


<!-- ko if: state === 'form' -->
{% block form %}
<div class="card-component" data-bind="css: card.model.cssclass">

    <!-- ko if: reviewer && provisionalTileViewModel.selectedProvisionalEdit() -->
    <div class="edit-message-container provisional-editor">
        <span data-bind="text: $root.translations.showingEditsBy"></span>
        <span class="edit-message-container-user" data-bind="text: provisionalTileViewModel.selectedProvisionalEdit().username() + '.'"></span>
        <!-- ko if: !provisionalTileViewModel.tileIsFullyProvisional() -->
        <a class="reset-authoritative" href='' data-bind="click: function(){provisionalTileViewModel.resetAuthoritative();}">
            <span data-bind="text: $root.translations.returnToApprovedEdits"></span>
        </a>
        <!-- /ko-->
        <!-- ko if: provisionalTileViewModel.selectedProvisionalEdit().isfullyprovisional -->
            <span data-bind="text: $root.translations.newProvisionalContribution"></span>
        <!-- /ko-->
    </div>
    <!-- /ko-->

    <!-- ko if: reviewer && provisionalTileViewModel.provisionaledits().length > 0 && !provisionalTileViewModel.selectedProvisionalEdit()-->
    <div class="edit-message-container approved">
        <div>
            <span data-bind="text: $root.translations.showingRecentApprovedEdits"></span>
        </div>
    </div>
    <!-- /ko-->



    <div class="new-provisional-edit-card-container">
        <!-- ko if: reviewer && provisionalTileViewModel.provisionaledits().length > 0 -->
        <!-- ko if: !provisionalTileViewModel.tileIsFullyProvisional() -->
        <div class='new-provisional-edits-list'>
            <div class='new-provisional-edits-header'>
                <div class='new-provisional-edits-title'>
                    <span data-bind="text: $root.translations.provisionalEdits"></span>
                </div>
                <div
                    class="btn btn-shim btn-danger btn-labeled btn-xs fa fa-trash new-provisional-edits-delete-all"
                    style="padding: 3px;"
                    data-bind="click: function(){provisionalTileViewModel.deleteAllProvisionalEdits()}"
                >
                    <span data-bind="text: $root.translations.deleteAllEdits"></span>
                </div>
            </div>
            <!-- ko foreach: { data: provisionalTileViewModel.provisionaledits(), as: 'pe' } -->
            <div class='new-provisional-edit-entry' data-bind="css: {'selected': pe === $parent.provisionalTileViewModel.selectedProvisionalEdit()}, click: function(){$parent.provisionalTileViewModel.selectProvisionalEdit(pe)}">
                <div class='title'>
                    <div class='field'>
                        <span data-bind="text : pe.username"></span>
                    </div>
                    <a href='' class='field fa fa-times-circle new-delete-provisional-edit' data-bind="click : function(){$parent.provisionalTileViewModel.rejectProvisionalEdit(pe)}"></a>
                </div>
                <div class="field timestamp">
                    <span data-bind="text : pe.displaydate">@</span>
                    <span data-bind="text : pe.displaytimestamp"></span>
                </div>
            </div>
            <!-- /ko -->
        </div>
        <!-- /ko-->
        <!-- /ko-->


        <div class="card">
            {% block form_header %}
            <div style="display: flex;">
                <h4 class="card-title" data-bind="text: card.model.name()"></h4>

                <!-- ko if: card.model.helpenabled -->
                <span>
                    <a data-bind="click: function () {card.model.get('helpactive')(true) }" style="cursor:pointer;">
                        <span data-bind="text: $root.translations.help"></span>
                        <i class="fa fa-question-circle"></i>
                    </a>
                </span>
                <!-- /ko -->
            </div>
            <!-- ko if: card.model.instructions -->
            <h5 class="card-instructions" data-bind="text: card.model.instructions"></h5>
            <!-- /ko -->

            <!-- ko if: card.isFuncNode && card.isFuncNode()  -->
            <h4 class="is-function-node" data-bind="text: card.isFuncNode()"></h4>
            <!-- /ko -->

            {% endblock form_header %}
            <!-- ko if: card.showSummary() === false -->
            <!-- ko if: card.widgets().length > 0 -->
            {% block form_widgets %}
            <form class="widgets" style="margin-bottom: 20px;">
                <div data-bind="foreach: {
                        data:card.widgets, as: 'widget'
                    }">
                    <div data-bind='component: {
                        name: self.form.widgetLookup[widget.widget_id()].name,
                        params: {
                            widget: widget,
                            formData: self.tile.formData,
                            tile: self.tile,
                            form: self.form,
                            config: widget.configJSON,
                            label: widget.label(),
                            inResourceEditor: self.inResourceEditor,
                            value: self.tile.data[widget.node_id()],
                            node: self.form.nodeLookup[widget.node_id()],
                            expanded: self.expanded,
                            graph: self.form.graph,
                            type: "resource-editor",
                            disabled: !self.card.isWritable && !self.preview
                        }
                    }, css:{ "active": widget.selected, "hover": widget.hovered, "widget-preview": self.preview
                }, click: function(data, e) { if (!widget.selected() && self.preview) {widget.selected(true);}
            }, event: { mouseover: function(){ if (self.preview){widget.hovered(true) } },
            mouseout: function(){ if (self.preview){widget.hovered(null)} } }, visible: widget.visible,
            class: self.componentCssClasses(widget)'></div>
                </div>
            </form>
            {% endblock form_widgets %}
            <!-- /ko -->
            <!-- ko if: showChildCards -->
            {% block form_cards %}
            <ul class="card-summary-section" data-bind="css: {disabled: !tile.tileid}">
                <!-- ko foreach: { data: tile.cards, as: 'card' } -->
                <li class="card-summary" data-bind="visible: card.model.visible()">
                    <a href="javascript:void(0)" data-bind="click: function () {
                        if (card.parent.tileid) {
                            card.canAdd() ? card.selected(true) : card.tiles()[0].selected(true);
                        }
                    }">
                        <h4 class="card-summary-name" style='color: #2f527a'>
                            <span data-bind="text: card.model.name"></span>
                            <i class="fa fa-plus-circle card-summary-add" data-bind="click: function(){$parent.createParentAndChild($parent.tile, card)}"></i>
                        </h4>
                    </a>
                    <ul class="tile-summary-item" data-bind="foreach: {
                            data: card.tiles,
                            as: 'tile'
                        }">
                        <li class="tile-summary">
                            <a href="#" data-bind="click: function () { tile.selected(true) }">
                                <!-- ko if: card.widgets().length > 0 -->
                                <span data-bind="text: card.widgets()[0].label || card.model.name" class="tile-summary-label"></span>:
                                <div style="display: inline;" data-bind="component: {
                                    name: self.form.widgetLookup[card.widgets()[0].widget_id()].name,
                                    params: {
                                        tile: tile,
                                        node: self.form.nodeLookup[card.widgets()[0].node_id()],
                                        config: self.form.widgetLookup[card.widgets()[0].widget_id()].config,
                                        inResourceEditor: self.inResourceEditor,
                                        label: self.form.widgetLookup[card.widgets()[0].widget_id()].label,
                                        value: tile.data[card.widgets()[0].node_id()],
                                        type: 'resource-editor',
                                        state: 'display_value'
                                    }
                                }"></div>
                                <!-- /ko -->
                                <!-- ko if: card.widgets().length === 0 -->
                                <span data-bind="text: card.model.name"></span>
                                <!-- /ko -->
                            </a>
                        </li>
                    </ul>
                </li>
                <!-- /ko -->
            </ul>
            {% endblock form_cards %}
            <!-- /ko -->
            {% block form_buttons %}
            <div class="install-buttons">
                <!-- ko if: tile.tileid && self.deleteTile -->
                <button
                    class="btn btn-shim btn-labeled btn-lg fa fa-trash"
                    data-bind="click: self.deleteTile, css: {disabled: (!card.isWritable && !self.preview), 'btn-warning': card.isWritable }"
                >
                    <span data-bind="text: $root.translations.deleteThisRecord"></span>
                </button>
                <!-- /ko -->

                <!-- ko if: tile.dirty() -->
                    <!-- ko if: provisionalTileViewModel && !provisionalTileViewModel.tileIsFullyProvisional() && card.isWritable -->
                    <button class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-times" data-bind="click: tile.reset">
                        <span data-bind="text: $root.translations.cancelEdit"></span>
                    </button>
                    <!-- /ko -->

                    <!-- ko if: tile.tileid -->
                    <button class="btn btn-shim btn-labeled btn-lg fa fa-plus" data-bind="click: self.saveTile, css: {disabled: (!card.isWritable && !self.preview), 'btn-mint': card.isWritable }">
                        <span data-bind="text: $root.translations.saveEdit"></span>
                    </button>
                    <!-- /ko -->
                <!-- /ko -->

                <!-- ko if: !tile.tileid && !showChildCards() -->
                <button class="btn btn-shim btn-labeled btn-lg fa fa-plus" data-bind="click: self.saveTile, css: {disabled: (!card.isWritable && !self.preview), 'btn-mint': card.isWritable }">
                    <span data-bind="text: $root.translations.add"></span>
                </button>
                <!-- /ko -->
            </div>
            {% endblock form_buttons %}
            <!-- /ko -->
            <!-- ko if: card.showSummary() === true -->
            {% block card_summary %}
            {% include 'views/components/cards/default-card-report.htm' %}
            <button class="btn btn-shim btn-labeled btn-lg fa fa-plus btn-primary" data-bind="click: function(){card.showForm(true)}">
                <span data-bind="text: $root.translations.new"></span>
            </button>
            {% endblock card_summary %}
            <!-- /ko -->

            <aside id="card-help-panel" class="card-help-panel" style="display: none;" data-bind="visible: card.model.get('helpactive')">
                <div class="relative">
                    <a id="add-basemap-wizard-help-close" href="#" class="help-close fa fa-times fa-lg" style="" data-bind="click: function () { card.model.get('helpactive')(false) }"></a>
                </div>
                <div id="add-basemap-wizard-help-content">
                    <div>
                        <div class="panel-heading">
                            <h3 class="panel-title help-panel-title" style="">
                                <span data-bind="html: card.model.get('helptitle')"></span>
                            </h3>
                        </div>
                        <div class="panel-body" style="padding: 10px 10px 15px 10px;" data-bind="html: card.model.get('helptext')">
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>
{% endblock form %}
<!-- /ko -->

<!-- ko if: state === 'report' && card.model.visible() -->
{% block report %}
{% include 'views/components/cards/default-card-report.htm' %}
{% endblock report %}
<!-- /ko -->

<!-- ko if: state === 'config' -->
{% block config %}
{% endblock config %}
<!-- /ko -->

<!-- /ko -->
