{% 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">{% trans "Edit" %}</span>
</div>
{{ block.super }}
{% endblock tabs %}

{% block sidepanel %}
<!-- ko foreach: { data: [$data], as: 'self' } -->
<!--ko if: activeTab() === 'editor' -->
    <div class="workbench-card-sidepanel-header-container">
        <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel, text: label"></h4>
    </div>
    <div class="workbench-card-sidepanel-border"></div>

    <div>
        <div class="new-provisional-edit-card-container">
            <!-- 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>
                    <button class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-times" data-bind="click: function () {
                        geoJSONString(undefined);
                    }">{% trans 'Cancel' %}</button>
                    <button class="btn btn-shim btn-labeled btn-lg fa fa-plus btn-mint" data-bind="css: {
                        disabled: geoJSONErrors().length !== 0
                    }, click: updateGeoJSON">{% trans 'Update Features' %}</button>
                </div>
                <!-- ko if: geoJSONErrors().length !== 0 -->
                <div class="geojson-error-list">
                    {% trans "GeoJSON has the following errors that must be resolved:" %}
                    <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()">
                <div class="row widget-wrapper">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <div class="map-card-feature-list">
                                <div class="add-new-feature">
                                    <select data-placeholder="{% trans "Add a new feature..." %}" data-bind="
                                        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: dropZoneOverHandler,
                                            drop: dropZoneHandler,
                                            click: dropZoneClickHandler,
                                            dragenter: dropZoneEnterHandler,
                                            dragleave: dropZoneLeaveHandler,
                                            dragend: dropZoneLeaveHandler
                                        }">
                                    {% trans "Drag GeoJSON or KML files here to add..." %}
                                </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>
                                    {% trans "The following errors occurred:" %}
                                    <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>
                                                    {% trans "Edit" %}
                                                </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>
                                                    {% trans "Delete" %}
                                                </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>
                                        {% trans "Edit GeoJSON" %}
                                    </a>
                                    |
                                    <!-- ko if: canEditCoordinates() -->
                                    <a href="javascript:void(0);" data-bind="click: function() {
                                        self.coordinateEditing(true);
                                    }">
                                        <i class="fa fa-list map-card-feature-edit"></i>
                                        {% trans "Edit Coordinates" %}
                                    </a>
                                    <!-- /ko -->
                                    <!-- ko if: !canEditCoordinates() -->
                                    <span>
                                        <i class="fa fa-list map-card-feature-edit"></i>
                                        {% trans "Edit Coordinates" %}
                                    </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>
                                        {% trans "Add Buffer" %}
                                    </a>
                                    <!-- /ko -->
                                    <!-- ko if: !self.bufferFeature() -->
                                    <span>
                                        <i class="fa fa-list map-card-feature-edit"></i>
                                        {% trans "Add Buffer" %}
                                    </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>
                                        {% trans "Zoom to all" %}
                                    </a>
                                    <!-- /ko -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--/ko -->
<!--/ko -->
{{ block.super }}
{% endblock sidepanel %}
