{% extends "views/components/cards/default.htm" %}
{% load i18n %}


{% 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()}, event: {
        mousedown: function(d, e) {
            e.stopPropagation();
            selectGroupCard();
        }
    }">
        <!-- ko if: !card.isFuncNode() -->
        <i class="fa fa-file-o" role="presentation" data-bind="css:{'filtered': card.highlight(), 'has-provisional-edits fa-file': card.doesChildHaveProvisionalEdits()}"></i>
        <!-- /ko -->
        <!-- ko if: card.isFuncNode() -->
        <i class="fa fa-code" role="presentation" data-bind="css:{'filtered': card.highlight(), 'has-provisional-edits fa-file': card.doesChildHaveProvisionalEdits()}"></i>
        <!-- /ko -->
        <span style="padding-right: 5px;" data-bind="text: card.model.name"></span>
        <!-- ko if: card.canAdd() -->
        <i class="fa fa-plus-circle add-new-tile" role="presentation" data-bind="css:{'jstree-clicked': card.selected}" data-toggle="tooltip" data-original-title="$root.translations.addNew"></i>
        <!-- /ko -->
    </a>
    <ul class="jstree-children" aria-expanded="true">
        <!-- ko foreach: {data: sortedWidgetIds, as: 'nodeId'} -->
        <!-- ko let: $parent.getDataForDisplay(nodeId) -->
        <!-- ko if: widget.visible -->
        <!-- the let statement above returns an object of the form {widget: null, tile: null: tileData: null, card: null} -->
            <li role="treeitem" class="jstree-node" data-bind="css: {'jstree-open': (card.cards.length > 0 && expanded), 'jstree-closed' : (card.cards.length > 0 && !expanded()), 'jstree-leaf': card.cards.length === 0, 'hide-background': !self.showGrid()}">
                <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 () { $parent.selectGroupCard()}, css:{'jstree-clicked': card.selected, 'child-selected': card.selected(), 'filtered-leaf': card.highlight()}">
                    <i class="fa fa-file" role="presentation" data-bind="css:{'has-provisional-edits': tile.hasprovisionaledits()}"></i>
                    <strong style="margin-right: 10px;">
                        {% block editor_tree_node_content %}
                        <!-- ko if: card.widgets().length > 0 && card.widgets()[0].visible -->
                        <span data-bind="text: card.widgets()[0].label || card.model.name"></span>:
                        <div style="display: inline;" data-bind="component: {
                            name: self.form.widgetLookup[widget.widget_id()].name,
                            params: {
                                tile: tile,
                                node: self.form.nodeLookup[widget.node_id()],
                                config: widget.configJSON,
                                label: widget.label(),
                                value: tile.data[widget.node_id()],
                                type: 'resource-editor',
                                state: 'display_value',
                                disabled: !self.card.isWritable && !self.preview
                            }
                        }"></div>
                        <!-- /ko -->
                        <!-- ko if: card.widgets().length === 0 || !card.widgets()[0].visible -->
                        <span data-bind="text: card.model.name"></span>
                        <!-- /ko -->
                        {% endblock editor_tree_node_content %}
                    </strong>
                </a>
                <!-- ko if: card.cards.length > 0 -->
                <ul class="jstree-children" aria-expanded="true" data-bind="foreach: {
                        data: card.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>
        <!-- /ko -->
        <!-- /ko -->
        <!-- /ko -->
    </ul>
</li>
{% endblock editor_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 style="padding-right: 5px;" data-bind="text: self.card.model.name"></span>
    </a>

    <!-- ko if: self.card.cards().length > 0 || self.card.widgets().length > 0 -->
    <ul data-bind="sortable: {
                data: sortedWidgetIds,
                as: 'nodeId',
                beforeMove: self.beforeMove,
                afterMove: self.afterMove
            }" class="jstree-children card-designer-tree" aria-expanded="true">
        <div>
            <!-- ko let: {widget:$parent.widgetInstanceDataLookup[nodeId]} -->
            <li role="treeitem" class="jstree-node jstree-leaf" data-bind="css: {
                    'jstree-last': $index() === (card.widgets().length - 1) && 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(d, e) {widget.selected(true); e.stopPropagation(); }, 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>
                    </strong>
                </a>
            </li>
            <!-- /ko -->
        </div>

    </ul>
    <!-- /ko -->
</li>
{% endblock designer_tree %}


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

    <!-- ko if: reviewer && provisionalTileViewModel.selectedProvisionalEdit() -->
    <div class="edit-message-container">
        <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">
        <span data-bind="text: $root.translations.showingMostRecentApprovedEdits"></span>
    </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.isFuncNode && card.isFuncNode()  -->
                <h4 data-bind="text: card.isFuncNode()"></h4>
                <!-- /ko -->
                <!-- 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>
            <h5 data-bind="text: card.model.instructions"></h5>
            {% endblock form_header %}
            <!-- ko if: card.widgets().length > 0 && !saving() -->
            {% block form_widgets %}
            <div data-bind="foreach: {data: sortedWidgetIds, as: 'nodeId'}">
                <form class="widgets" style="margin-bottom: 20px;">
                    <div data-bind="foreach: {
                            data:$parent.widgetInstanceDataLookup[nodeId], as: 'widget'
                        }">
                        <div data-bind='component: {
                            name: self.form.widgetLookup[widget.widget_id()].name,
                            params: {
                                formData: self.getTile(widget.card.id).formData,
                                tile: self.getTile(widget.card.id),
                                form: self.form,
                                config: widget.configJSON,
                                label: widget.label(),
                                value: self.getTile(widget.card.id).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
                    }, class: self.componentCssClasses(widget), 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'></div>
                    </div>
                </form>
            </div>
            {% 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">
                    <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">
                            <span data-bind="text: card.model.name"></span>
                            <!-- ko if: card.canAdd() && card.parent.tileid -->
                            <i class="fa fa-plus-circle card-summary-add"></i>
                            <!-- /ko -->
                        </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,
                                        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: previouslySaved() && self.deleteTiles -->
                    <button class="btn btn-shim btn-labeled btn-lg fa fa-trash" data-bind="click: deleteTiles, css: {disabled: (!card.isWritable && !self.preview), 'btn-warning': card.isWritable }">
                        <span data-bind="text: $root.translations.deleteThisRecord"></span>
                    </button>
                <!-- /ko -->
                <!-- ko if: 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: resetTiles">
                            <span data-bind="text: $root.translations.cancelEdit"></span>
                        </button>
                    <!-- /ko -->
                    <!-- ko if: previouslySaved -->
                        <button class="btn btn-shim btn-labeled btn-lg fa fa-plus" data-bind="click: saveTiles, css: {disabled: (!card.isWritable && !self.preview), 'btn-mint': card.isWritable }">
                            <span data-bind="text: $root.translations.saveEdit"></span>
                        </button>
                    <!-- /ko -->
                <!-- /ko -->
                <!-- ko if: !previouslySaved()-->
                    <button class="btn btn-shim btn-labeled btn-lg fa fa-plus" data-bind="click: saveTiles, css: {disabled: (!card.isWritable && !self.preview), 'btn-mint': card.isWritable }">
                        <span data-bind="text: $root.translations.add"></span>
                    </button>
                <!-- /ko -->
            </div>
            {% endblock form_buttons %}

            <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 %}

{% block report %}
<div data-bind="css: {'print-hide': !reportExpanded()}">
    <!-- ko if: showHeaderLine--><hr class="rp-tile-separator"><!-- /ko -->
    <div class="rp-card-section" data-bind="css: card.model.cssclass, visible: card.fullyProvisional() !== 'fullyprovisional'">
            <span class="rp-tile-title" data-bind="text: card.model.get('name')"></span>
            <!-- ko if: hasTiles -->
            <i class="fa report-expander print-hide" data-bind="css: {'fa-angle-down': reportExpanded(), 'fa-angle-right': !reportExpanded()}, click: function () { reportExpanded(!reportExpanded()) }"></i>
            <!-- ko if: reportExpanded() -->
            <!-- ko foreach: { data: sortedWidgetIds, as: 'nodeId' } -->
            <!-- ko let: $parent.getDataForDisplay(nodeId) -->
            <!-- the let statement above returns an object of the form {widget: null, tile: null: tileData: null, card: null} -->
                <div class="rp-card-section" data-bind="css: {'provisional': ko.unwrap(tile.provisionaledits) !== null && tile.userisreviewer === false, 'fullyprovisional': tile.isfullyprovisional()}">

                    {% block report_widgets %}
                        <div class="rp-report-tile" data-bind="attr: { id: tile.tileid }">
                            <!-- ko if: ko.unwrap(tile.provisionaledits) !== null && tile.userisreviewer === false -->
                            <div class="report-card-provisional-flag">
                                <span data-bind="text: $root.translations.pendingProvisionalData"></span>
                            </div>
                            <!-- /ko-->
                            <dl class="dl-horizontal" data-bind="css: {'provisional': ko.unwrap(tile.provisionaledits) !== null && tile.userisreviewer === false}">
                                <!-- ko if: widget.visible -->
                                <!-- ko component: {
                                    name: widget.widgetLookup[widget.get("widget_id")()].name,
                                    params: {
                                        config: widget.configJSON,
                                        label: widget.get("label")(),
                                        node: widget.node,
                                        value: tile.data[widget.node.nodeid],
                                        state: "report"
                                    }
                                } --><!-- /ko -->
                                <!-- /ko -->
                            </dl>
                        </div>
                    {% endblock report_widgets %}

                    {% block report_cards %}
                    <div class="rp-report-container-tile" data-bind="visible: card.cards().length > 0">
                        <!-- ko foreach: { data: self.preview ? card.cards : tile.cards, as: 'card' } -->
                                <!-- ko component: {
                                    name: card.model.cardComponentLookup[card.model.component_id()].componentname,
                                    params: {
                                        state: 'report',
                                        preview: self.preview,
                                        card: card,
                                        showHeaderLine: self.card.model.get("widgets")().length > 0 || $index !== 0,
                                        pageVm: $root
                                    }
                                } --> <!-- /ko -->
                        <!-- /ko -->
                    </div>
                    {% endblock report_cards %}
                </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->

        <!-- ko if: !hasTiles && !self.preview -->
        <div class="row rp-report-tile rp-no-data">
            <!-- ko ifnot: card.model.get('cardid') -->
                <span data-bind="text: $root.translations.noAccessInformation"></span>
            <!-- /ko -->
            <!-- ko if: card.model.get('cardid') -->
            <span data-bind="text: $root.translations.noDataAddedYet"></span>
            <span data-bind="text: card.model.get('name')"></span>
            <!-- /ko -->
        </div>
        <!-- /ko -->
    </div>
</div>
{% endblock report %}

{% block config %}
<div>
    <select
        class="resources"
        multiple
        data-bind="
            placeholder: $root.translations.chooseASiblingCard + '...',
            selectedOptions: groupedCardIds,
            options: siblingCards,
            optionsText: 'name',
            optionsValue: 'id',
            chosen: {multiple: true, disable_search_threshold: 10, width: '100%'}
        "
    ></select>
</div>
{% endblock config %}
