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

{% block tabs %}
<div class="workbench-card-sidebar-tab" data-bind="click: function() {
    toggleTab('editor');
}, css: {
    'active': activeTab() === 'editor'
}">
    <i class="fa fa-pencil"></i>
    <span class="map-sidebar-text" data-bind="text: $root.translations.edit"></span>
</div>
{{ block.super }}
{% endblock tabs %}

{% block sidepanel %}
<!--ko if: activeTab() === 'editor' -->
    <div class="workbench-card-sidepanel-header-container">
        <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel, text: card.model.name"></h4>
    </div>
    <div class="workbench-card-sidepanel-border"></div>
    <div class="workbench-card-sidepanel-body">
    <div data-bind="css: card.model.cssclass" style="height: 100%">

        <!-- ko if: reviewer && provisionalTileViewModel.selectedProvisionalEdit() -->
        <div class="edit-message-container" style="margin-left: -16px;">
            <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" style="margin-left: -16px;">
            <div>
                <span data-bind="text: $root.translations.showingMostRecentApprovedEdits"></span>
            </div>
        </div>
        <!-- /ko-->



        <div class="new-provisional-edit-card-container" style="height: inherit">
            <!-- ko if: reviewer && provisionalTileViewModel.provisionaledits().length > 0 -->
            <!-- ko if: !provisionalTileViewModel.tileIsFullyProvisional() -->
            <div class='new-provisional-edits-list' style="margin-right: -20px">
                <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-->

            <!-- ko if: geoJSONString() !== undefined -->
            <div class="card">
                <div class="geojson-editor" data-bind="codemirror: {
                    value: geoJSONString,
                    mode: { name: 'javascript', json: true },
                    lineNumbers: true
                }"></div>
                <div class="display-in-workflow-step install-buttons">
                    <button class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-times" data-bind="click: function () {
                        geoJSONString(undefined);
                    }">
                        <span data-bind="text: $root.translations.cancel"></span>
                    </button>
                    <button class="btn btn-shim btn-labeled btn-lg fa fa-plus btn-mint" data-bind="css: {
                        disabled: geoJSONErrors().length !== 0
                    }, click: updateGeoJSON">
                        <span data-bind="text: $root.translations.updateFeatures"></span>
                    </button>
                </div>
                <!-- ko if: geoJSONErrors().length !== 0 -->
                <div class="geojson-error-list">
                    <span data-bind="text: $root.translations.geojsonErrors"></span>
                    <ul>
                        <!-- ko foreach: geoJSONErrors() -->
                        <li data-bind="text: message"></li>
                        <!-- /ko-->
                    </ul>
                </div>
                <!-- /ko-->
            </div>
            <!-- /ko-->

            {% include 'views/components/coordinate-editor.htm' %}

            {% include 'views/components/buffer-editor.htm' %}

            <div class="card" data-bind="visible: geoJSONString() === undefined && !coordinateEditing() && !bufferNodeId()">
                {% block form_header %}
                <!-- ko if: card.model.helpenabled -->
                <span>
                    <a class="pull-right card-help help editable-help" 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 -->
                <h5 data-bind="text: card.model.instructions"></h5>
                {% endblock form_header %}
                <!-- 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'
                        }">
                        <!-- ko if: ko.unwrap(self.form.nodeLookup[widget.node_id()].datatype) === 'geojson-feature-collection' -->
                        <div class="row widget-wrapper" data-bind="class: self.componentCssClasses(widget)">
                            <div class="form-group">
                                <label class="control-label widget-input-label" for="" data-bind="text:widget.label"></label>
                                <i data-bind="css: {'ion-asterisk widget-label-required': self.form.nodeLookup[widget.node_id()].isrequired}"></i>

                                <div class="col-xs-12">
                                    <div class="map-card-feature-list">
                                        <div class="add-new-feature">
                                            <select
                                                data-bind="
                                                    placeholder: $root.translations.addANewFeature + '...',
                                                    value: self.featureLookup[widget.node_id()].selectedTool,
                                                    valueAllowUnset: true,
                                                    options: widget.drawTools,
                                                    optionsText: 'text',
                                                    optionsValue: 'value',
                                                    chosen: {
                                                        'width': '100%',
                                                        'disable_search_threshold': 10,
                                                        'allow_single_deselect': true
                                                    }
                                                "
                                            ></select>
                                        </div>
                                        <div class="map-data-drop-area" data-bind="event: {
                                            dragover: self.dropZoneOverHandler,
                                            drop: self.dropZoneHandler,
                                            click: self.dropZoneClickHandler,
                                            dragenter: self.dropZoneEnterHandler,
                                            dragleave: self.dropZoneLeaveHandler,
                                            dragend: self.dropZoneLeaveHandler
                                        }">
                                            <span data-bind="text: $root.translations.dragGeoJsonKml + '...'"></span>
                                        </div>
                                        <div class="hidden-file-input">
                                            <input type="file" accept=".json,.geojson,.kml" data-bind="event: {
                                                change: self.dropZoneFileSelected
                                            }"/>
                                        </div>
                                        <!-- ko if: self.featureLookup[widget.node_id()].dropErrors().length !== 0 -->
                                        <div class="geojson-error-list">
                                            <a href="javascript: void(0);" data-bind="click:function () {
                                                self.featureLookup[widget.node_id()].dropErrors([]);
                                            }">
                                                <i class="fa fa-close"></i>
                                            </a>
                                            <span data-bind="text: $root.translations.followingErrorsOccurred"></span>
                                            <ul>
                                                <!-- ko foreach: self.featureLookup[widget.node_id()].dropErrors() -->
                                                <li data-bind="text: message"></li>
                                                <!-- /ko-->
                                            </ul>
                                        </div>
                                        <!-- /ko-->
                                        <table class="table">
                                            <tbody>
                                                <!-- ko foreach: {data: self.featureLookup[widget.node_id()].features, as: 'feature'} -->
                                                <tr class="map-card-feature-item" data-bind="css: {'active': self.selectedFeatureIds().indexOf(feature.id) >= 0}, click: function() { self.fitFeatures([feature]) }">
                                                    <td>
                                                        <span class="map-card-feature-name" data-bind="text: feature.geometry.type"></span>
                                                    </td>
                                                    <td class="map-card-feature-tool">
                                                        <a href="javascript:void(0);" data-bind="click: function() { self.editFeature(feature) }, clickBubble: false">
                                                            <i class="fa fa-pencil map-card-feature-edit"></i>
                                                            <span data-bind="text: $root.translations.edit"></span>
                                                        </a>
                                                    </td>
                                                    <td class="map-card-feature-tool">
                                                        <a href="javascript:void(0);" data-bind="click: function() { self.deleteFeature(feature) }, clickBubble: false">
                                                            <i class="fa fa-trash map-card-feature-delete"></i>
                                                            <span data-bind="text: $root.translations.delete"></span>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <!-- /ko -->
                                            </tbody>
                                        </table>
                                        <div class="map-card-zoom-tool">
                                            <a href="javascript:void(0);" data-bind="click: function() {
                                                self.editGeoJSON(self.featureLookup[widget.node_id()].features(), widget.node_id());
                                            }">
                                                <i class="fa fa-pencil map-card-feature-edit"></i>
                                                <span data-bind="text: $root.translations.editGeoJson"></span>
                                            </a>
                                            |
                                            <!-- ko if: self.canEditCoordinates() -->
                                            <a href="javascript:void(0);" data-bind="click: function() {
                                                self.coordinateEditing(true);
                                            }">
                                                <i class="fa fa-list map-card-feature-edit"></i>
                                                <span data-bind="text: $root.translations.editCoordinates"></span>
                                            </a>
                                            <!-- /ko -->
                                            <!-- ko if: !self.canEditCoordinates() -->
                                            <span>
                                                <i class="fa fa-list map-card-feature-edit"></i>
                                                <span data-bind="text: $root.translations.editCoordinates"></span>
                                            </span>
                                            <!-- /ko -->
                                            |
                                            <!-- ko if: self.bufferFeature() -->
                                            <a href="javascript:void(0);" data-bind="click: function() {
                                                self.bufferNodeId(widget.node_id());
                                            }">
                                                <i class="fa fa-list map-card-feature-edit"></i>
                                                <span data-bind="text: $root.translations.addBuffer"></span>
                                            </a>
                                            <!-- /ko -->
                                            <!-- ko if: !self.bufferFeature() -->
                                            <span>
                                                <i class="fa fa-list map-card-feature-edit"></i>
                                                <span data-bind="text: $root.translations.addBuffer"></span>
                                            </span>
                                            <!-- /ko -->
                                            <!-- ko if: self.featureLookup[widget.node_id()].features().length > 0 -->
                                            |
                                            <a href="javascript:void(0);" data-bind="click: function() {
                                                self.fitFeatures(self.featureLookup[widget.node_id()].features());
                                            }">
                                                <i class="fa fa-search map-card-feature-edit"></i>
                                                <span data-bind="text: $root.translations.zoomToAll"></span>
                                            </a>
                                            <!-- /ko -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: ko.unwrap(self.form.nodeLookup[widget.node_id()].datatype) !== 'geojson-feature-collection' -->
                        <div data-bind='component: {
                            name: self.form.widgetLookup[widget.widget_id()].name,
                            params: {
                                formData: self.tile.formData,
                                tile: self.tile,
                                form: self.form,
                                config: widget.configJSON,
                                label: widget.label(),
                                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
                        }, 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>
                        <!-- /ko -->
                    </div>
                </form>
                {% endblock form_widgets %}
                <!-- /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.delete"></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.cancel"></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.save"></span>
                        </button>
                        <!-- /ko -->
                    <!-- /ko -->
                    <!-- ko if: !tile.tileid -->
                    <button
                        class="btn btn-shim btn-labeled btn-lg fa fa-plus"
                        data-bind="click: function() { if (card.isWritable && !self.preview) {
                            self.updateTiles();
                            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 %}

                <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>
    </div>
<!--/ko -->
{{ block.super }}
{% endblock sidepanel %}
