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

{% block tabs %}
<div id="toggle-editor-panel-button" class="workbench-card-sidebar-tab" tabindex="0" role="button" aria-controls="side-panel"
    data-bind="onEnterkeyClick, onSpaceClick, click: function() {
        toggleTab('editor');
        $root.handleEscKey(event.currentTarget, '#side-panel');
    }, css: {
        'active': activeTab() === 'editor'
    }, attr: {
        'aria-label': $root.translations.mapEditor,
        'aria-expanded': (activeTab() === 'editor').toString() 
    },
">
    <i class="fa fa-pencil"></i>
    <span data-bind="text: $root.translations.edit"></span>
</div>
{{ block.super }}
{% endblock tabs %}

{% block sidepanel %}
<!-- ko foreach: { data: [$data], as: 'self' } -->
<!--ko if: activeTab() === 'editor' -->
<div style="height: 95%">
    <div class="workbench-card-sidepanel-header-container">
        <p class="workbench-card-sidepanel-header h4" tabindex="0" role="button" 
            data-bind="onEnterkeyClick, onSpaceClick, text: label,
                click: function(){hideSidePanel('#toggle-editor-panel-button')},  
                attr: {'aria-label': $root.translations.hideEditor},
        "></p>
    </div>
    <div class="workbench-card-sidepanel-border"></div>
        <div class="new-provisional-edit-card-container" style="height: 100%">
            <!-- 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);
                    }">
                        <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()">
                <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-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
                                            },
                                            attr: {'aria-label': $root.translations.addANewFeature}
                                        "
                                    ></select>
                                </div>
                                <div>
                                    <div class="map-data-drop-area" tabindex="0" role="button" 
                                        data-bind="event: {
                                            dragover: dropZoneOverHandler,
                                            drop: dropZoneHandler,
                                            click: dropZoneClickHandler,
                                            dragenter: dropZoneEnterHandler,
                                            dragleave: dropZoneLeaveHandler,
                                            dragend: dropZoneLeaveHandler
                                        }, attr: {'aria-label': $root.translations.dragGeoJsonKml},
                                        onEnterkeyClick, onSpaceClick
                                        ">
                                        <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>
                                </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);" role="button" data-bind="click: function() { self.editFeature(feature) }, clickBubble: false,
                                                    attr: {'aria-label': $root.translations.editFeature}
                                                ">
                                                    <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);" role="button" data-bind="click: function() { self.deleteFeature(feature) }, clickBubble: false,
                                                    attr: {'aria-label': $root.translations.deleteFeature}
                                                ">
                                                    <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">
                                    <button 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>
                                    </button>
                                    |
                                    <button data-bind="click: canEditCoordinates() ? function(){self.coordinateEditing(true)} : null, 
                                        css: {
                                            'inactive': !canEditCoordinates() 
                                        }, attr: {
                                            'aria-disabled': (!canEditCoordinates()).toString()
                                        }
                                    ">
                                        <i class="fa fa-list map-card-feature-edit"></i>
                                        <span data-bind="text: $root.translations.editCoordinates"></span>
                                    </button>
                                    |
                                    <button data-bind="click: self.bufferFeature() ? function() {self.bufferNodeId(widget.node_id())} : null,
                                        css: {
                                            'inactive': !self.bufferFeature() 
                                        }, attr: {
                                            'aria-disabled': !self.bufferFeature() && (!self.bufferFeature()).toString()
                                        }
                                    ">
                                        <i class="fa fa-list map-card-feature-edit"></i>
                                        <span data-bind="text: $root.translations.addBuffer"></span>
                                    </button>
                                    <!-- ko if: self.featureLookup[widget.node_id()].features().length > 0 -->
                                    |
                                    <button 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>
                                    </button>
                                    <!-- /ko -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--/ko -->
<!--/ko -->
{{ block.super }}
{% endblock sidepanel %}
