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

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

{% block sidepanel %}
<!--ko if: activeTab() === 'filter' -->
    <div class="workbench-card-sidepanel-header-container">
        <p tabindex="0" class="h4 workbench-card-sidepanel-header" data-bind="onEnterkeyClick, onSpaceClick, 
            click: function(){ hideSidePanel('#toggle-map-filter-panel'); },
            attr: {'aria-label': $root.translations.closeMapFilter}
        ">
            <span data-bind="text: $root.translations.mapSearch"></span>
        </p>
    </div>
    <div class="workbench-card-sidepanel-border"></div>

    <div class="workbench-card-sidepanel-body">
        <!-- ko if: geoJSONString() === undefined -->
        <div class="spatial-filter-container">

            <!-- Buffer Definition -->
            <div class="buffer-control form-control">
                <span class="h5" data-bind="text: $root.translations.buffer"></span>
                <div class="form-inline">
                    <span data-bind="text: $root.translations.distance"></span>
                    <input style="height: 30px;"
                        type="number" 
                        min=0.0 
                        class="buffer-input" 
                        data-bind="
                            attr: {
                                placeholder: $root.translations.buffer,
                                'aria-label': $root.translations.bufferDistance
                            },
                            textInput: buffer
                        "
                    >
                    <span style="width: 100px; display: inline-block;">
                        <select class="form-control" style="vertical-align: top;" 
                            data-bind="options: bufferUnits, 
                            optionsText:'name', 
                            optionsValue:'val',
                            select2Query: {
                                select2Config:{
                                    value: bufferUnit,
                                    allowClear: false,
                                    minimumResultsForSearch: -1
                            }},
                            attr: {'data-label': $root.translations.selectBufferUnits}"
                        ></select>
                    </span>
                </div>
            </div>

            <!-- Geometry -->
            <div class="add-new-feature buffer-control">
                <label for="filter-select" class="h5" data-bind="text: $root.translations.selectAFilter"></label>
                <select 
                    id="filter-select"
                    data-bind="
                        options: spatialFilterTypes,
                        optionsText: 'title',
                        optionsValue: 'drawMode',
                        select2Query: {
                            select2Config:{
                                value: selectedTool,
                                placeholder: $root.translations.drawA,
                                allowClear: false,
                                minimumResultsForSearch: -1
                        }},
                        attr: {'data-label': $root.translations.selectAFilter}
                    "
                ></select>
            </div>

        </div>
        <!-- /ko-->

        <!-- ko if: geoJSONString() !== undefined -->
        <div class="geojson-card">
            <div class="geojson-editor" data-bind="codemirror: {
                value: geoJSONString,
                mode: { name: 'javascript', json: true },
                lineNumbers: true
            }"></div>
            <!-- ko if: geoJSONErrors().length !== 0 -->
            <div class="geojson-error-list" data-bind="let: {uid: Math.random().toString()}">
                <span data-bind="text: $root.translations.geojsonErrors, attr: {id: uid}"></span>
                <ul data-bind="attr: {'aria-labeledby': uid}" aria-live="polite">
                    <!-- ko foreach: geoJSONErrors() -->
                    <li data-bind="text: message"></li>
                    <!-- /ko-->
                </ul>
            </div>
            <!-- /ko-->
        </div>
        <!-- /ko-->
        <div class="map-card-zoom-tool">
            <button id="edit-geojson-btn" data-bind="click: function(){
                editGeoJSON(filter.feature_collection);}">
                <i class="fa fa-pencil map-card-feature-edit"></i>
                <span data-bind="text: $root.translations.editGeoJson"></span>
            </button>
            |
            <button data-bind="click: zoomToAllFeaturesHandler">
                <i class="fa fa-search map-card-feature-edit"></i>
                <span data-bind="text: $root.translations.zoomToAllFeatures"></span>
            </button>
            |
            <button data-bind="click: clear">
                <i class="fa fa-trash map-card-feature-edit"></i>
                <span data-bind="text: $root.translations.clearFilter"></span>
            </button>
        </div>
    </div>

    <!-- ko if: geoJSONString() !== undefined -->
    <div class="install-buttons">
        <button class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-times"
            data-bind="onEnterkeyClick, onSpaceClick,
                click: function () {
                    geoJSONString(undefined);
                    $root.shiftFocus('#edit-geojson-btn');
                }, 
                attr: {'aria-label': $root.translations.cancelGeoJson},
            "
        >
            <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="onEnterkeyClick, onSpaceClick,
                css: {disabled: geoJSONErrors().length !== 0}, 
                click: function () {
                    updateGeoJSON();
                    $root.shiftFocus('#edit-geojson-btn');
                },
                attr: {'aria-label': $root.translations.acceptGeoJson},
            "
        >
            <span data-bind="text: $root.translations.acceptGeoJson"></span>
        </button>
    </div>
    <!--/ko -->

<!--/ko -->
{{ block.super }}
{% endblock sidepanel %}
