{% load template_tags %}
{% load i18n %}

<!-- ko if: $data.layer -->
<div class="map-service-container">


    <div class="flex">
        <h3 class="config-title"><i class="fa fa-binoculars"></i>
            <span data-bind="text: $root.translations.layerPreview"></span> 
            <span class="service-url text-semibold" data-bind="text: serviceURL"></span>
        </h3>
        
        <!-- Save/discard edits buttons (for convenience) -->
        <!-- ko if: node.dirty() -->
        <div class="resource-service-buttons-heading" style="display: inline-flex">
            <button class="btn btn-primary btn-labeled btn-active-dark fa fa-check mar-top" data-bind="click: function () { saveNode() }">
                <span data-bind="text: $root.translations.saveEdits"></span> 
            </button>
            <button class="btn btn-mint btn-labeled btn-active-dark fa fa-undo mar-top" data-bind="click: function () { node.reset() }">
                <span data-bind="text: $root.translations.discardEdits"></span> 
            </button>
        </div>
        <!-- /ko -->

        <div class="map-service-manage-buttons">
            <div class="form-group">
                <span class="control-label text-semibold" data-bind="text: $root.translations.activated + ':'"></span>
                <span class="switch switch-small" tabindex="0" role="switch" data-bind="css: {
                        'on': config.layerActivated()
                    }, onEnterkeyClick, onSpaceClick, click: function () {
                        config.layerActivated(!config.layerActivated());
                    }, 
                    attr: {'aria-label': $root.translations.activated, 'aria-checked': config.layerActivated()}">
                    <small></small>
                </span>
            </div>
        </div>
        <div class="btn-group map-server-basemap-button">
            <button class="dropdown-toggle btn" data-toggle="dropdown" aria-label="{% trans 'Basemaps' %}" aria-expanded="false"><i class="fa fa-globe"></i></button>
            <ul class="dropdown-menu dropdown-menu-right">
                <!-- ko foreach: basemaps -->
                <li><a href="#" data-bind="text: name, click: function () { select(); }"></a></li>
                <!-- /ko -->
            </ul>
        </div>
    </div>
    
    <!-- ko if: !loading() -->
    <div class="map-service-preview" style="padding:0;" data-bind="mapboxgl: {
            mapOptions: {
                style: mapStyle,
                zoom: zoom,
                minZoom: minZoom,
                maxZoom: maxZoom,
                centerX: centerX,
                centerY: centerY,
                pitch: pitch,
                bearing: bearing
            },
            afterRender: function(map){
                setupMap(map);
            }
        }">
    </div>
    <!-- /ko -->

    <!-- ko if: loading() -->
    <div class="map-service-preview"></div>
    <!-- /ko -->

    <!-- Service Styling -->
    <div class="map-service-container">
        <div class="flex" style="width:100%">
            <div class="tab-base map-service-tabs">

                <!-- Resource Styling Tabs -->
                <ul class="nav nav-tabs map-service-nav-tabs" role="tablist">
                    <li class="active">
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#settings-panel" aria-expanded="true" role="tab">
                            <i class="ion-ios-settings-strong"></i>
                            <span data-bind="text: $root.translations.settings"></span> 
                        </a>
                    </li>
                    <li>
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#styling-panel" aria-expanded="false" role="tab">
                            <i class="ion-image"></i>
                            <span data-bind="text: $root.translations.serviceStyling"></span> 
                        </a>
                    </li>
                    <li>
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#clustering-panel" aria-expanded="false" role="tab">
                            <i class="ion-ios-pie"></i>
                            <span data-bind="text: $root.translations.clustering"></span> 
                        </a>
                    </li>
                    <li>
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#permissions-panel" aria-expanded="false" role="tab">
                            <i class="ion-ios-color-wand"></i>
                            <span data-bind="text: $root.translations.permissions"></span> 
                        </a>
                    </li>
                </ul>

                <div class="tab-content map-service-tab-content">

                    <div id="settings-panel" class="tab-pane fade active in">
                        <div class="row service-widget-container">
                            <div class="form-horizontal">
                                <div class="panel-body">
                                    <div class="form-group map-service-manage-layer-name">
                                        <span class="col-sm-3 map-service-manage-control-label" data-bind="text: $root.translations.layerName + ':'"></span> 
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" data-bind="valueUpdate: 'keyup', value: config.layerName, attr: { placeholder: layer.name, 'aria-label': $root.translations.layerName }">
                                        </div>
                                    </div>
                                    <div class="form-group map-service-manage-layer-name">
                                        <span class="col-sm-3 map-service-manage-control-label" data-bind="text: $root.translations.addSearchMapDefault"></span> 
                                        <div class="col-sm-9">
                                            <span class="switch switch-small" tabindex="0" role="switch" data-bind="css: {
                                                    'on': config.addToMap()
                                                }, onEnterkeyClick, onSpaceClick, click: function () {
                                                    config.addToMap(!config.addToMap());
                                                },
                                                attr: {'aria-label': $root.translations.addSearchMapDefault, 'aria-checked': config.addToMap()}">
                                                <small></small>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div data-bind="component: {
                                            name: 'views/components/icon-selector',
                                            params: {
                                                selectedIconObservable: config.layerIcon,
                                                iconFilter: iconFilter,
                                                iconList: icons,
                                                label: $root.translations.layerIcon
                                            }
                                        }">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div style="padding:15px;">
                                            <div class="row" style="padding-bottom: 10px;">
                                                <span data-bind="text: $root.translations.legendContent + ':'"></span> 
                                            </div>
                                            <div class="row">
                                                <textarea rows="10" cols="80" data-bind="ckeditor: config.layerLegend, ckeditorOptions: {},  valueUpdate: 'afterkeydown'"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="styling-panel" class="tab-pane fade">
                        <div class="row service-widget-container">
                            <div class="advanced-map-style-switch">
                                <label class="control-label text-semibold">
                                    <span data-bind="text: $root.translations.advanced + ':'"></span> 
                                </label>
                                <span class="switch switch-small" tabindex="0" role="switch" data-bind="css: {
                                        'on': config.advancedStyling()
                                    }, onEnterkeyClick, onSpaceClick, click: function () {
                                        config.advancedStyling(!config.advancedStyling());
                                    },
                                    attr: {'aria-label': $root.translations.advanced, 'aria-checked': config.advancedStyling()}">
                                    <small></small>
                                </span>
                            </div>

                            <div class="col-xs-12 advanced-style-panel" data-bind="if: config.advancedStyling()">
                                <div id="style-panel" class="tab-pane fade active in">
                                    <div class="panel-body" style="padding: 0px;">
                                        <div class="row">
                                            <div data-bind="codemirror: { value: config.advancedStyle, mode: { name: 'javascript', json: true }, theme: 'monokai' }"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-12 simple-style-panel" data-bind="if: !config.advancedStyling()">
                                <div id="style-panel" class="tab-pane fade active in">
                                    <div class="panel-body" style="padding-top: 0.5em; padding-bottom: 1em;">
                                        <!-- ko if: count === 0 -->
                                        <div class="map-server-instructions">
                                            <i class="fa fa-warning"></i>
                                            <span data-bind="text: $root.translations.previewMapWarning"></span> 
                                        </div>
                                        <!-- /ko -->
                                        <div class="flex">
                                            <!-- Points -->
                                            <div class="col-sm-6 col-md-4 col-divider">
                                                <span class="style-title" data-bind="text: $root.translations.pointStyle"></span> 

                                                <div class="form-horizontal">
                                                    <div class="panel-body map-style-panel-body">
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.color"></span>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input class="form-control input-lg widget-input" 
                                                                        data-bind="attr: {placeholder: $root.translations.color + ' ', 'aria-label': $root.translations.color}, 
                                                                            colorPicker: {color: config.pointColor, format:'rgba'}
                                                                        ">
                                                                    <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: config.pointColor}"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.haloColor"></span>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input class="form-control input-lg widget-input" 
                                                                        data-bind="attr: {placeholder: $root.translations.haloColor + ' ', 'aria-label': $root.translations.haloColor}, 
                                                                            colorPicker: {color: config.pointHaloColor, format:'rgba'}
                                                                        ">
                                                                    <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: config.pointHaloColor}"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.radius"></span>
                                                            <div class="col-sm-9">
                                                                <input type="number" class="form-control" 
                                                                    data-bind="valueUpdate: 'keyup', value: config.radius, attr: {'aria-label': $root.translations.radius}">
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.haloRadius"></span>
                                                            <div class="col-sm-9">
                                                                <input type="number" class="form-control" 
                                                                    data-bind="valueUpdate: 'keyup', value: config.haloRadius, attr: {'aria-label': $root.translations.haloRadius}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Lines -->
                                            <div class="col-sm-6 col-md-4 col-divider">
                                                <span class="style-title" data-bind="text: $root.translations.lineStyle"></span>

                                                <div class="form-horizontal">
                                                    <div class="panel-body map-style-panel-body">
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.color"></span>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input class="form-control input-lg widget-input" 
                                                                        data-bind="attr: {placeholder: $root.translations.color + ' ', 'aria-label': $root.translations.color}, 
                                                                            colorPicker: {color: config.lineColor, format:'rgba'}
                                                                        ">
                                                                    <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: config.lineColor}"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.haloColor"></span>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input class="form-control input-lg widget-input" 
                                                                        data-bind="attr: {placeholder: $root.translations.haloColor + ' ', 'aria-label': $root.translations.haloColor},
                                                                            colorPicker: {color: config.lineHaloColor, format:'rgba'}
                                                                        ">
                                                                    <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: config.lineHaloColor}"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.weight"></span>
                                                            <div class="col-sm-9">
                                                                <input type="number" class="form-control" 
                                                                    data-bind="valueUpdate: 'keyup', value: config.weight, attr: {'aria-label': $root.translations.weight}
                                                                ">
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.haloWeight"></span>
                                                            <div class="col-sm-9">
                                                                <input type="number" class="form-control" 
                                                                    data-bind="valueUpdate: 'keyup', value: config.haloWeight, attr: {'aria-label': $root.translations.haloWeight}
                                                                ">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <!-- Polygons -->
                                            <div class="col-sm-6 col-md-4">
                                                <span class="style-title" data-bind="text: $root.translations.polygonStyle"></span>

                                                <div class="form-horizontal">
                                                    <div class="panel-body map-style-panel-body">
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.fillColor + ':'"></span>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input class="form-control input-lg widget-input" 
                                                                        data-bind="attr: {placeholder: $root.translations.fillColor + ' ', 'aria-label': $root.translations.fillColor}, 
                                                                            colorPicker: {color: config.fillColor, format:'rgba'}
                                                                        ">
                                                                    <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: config.fillColor}"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.outlineColor + ':'"></span>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input class="form-control input-lg widget-input" 
                                                                        data-bind="attr: {placeholder: $root.translations.outlineColor + ' ', 'aria-label': $root.translations.outlineColor}, 
                                                                            colorPicker: {color: config.outlineColor, format:'rgba'}
                                                                        ">
                                                                    <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: config.outlineColor}"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group map-style-panel-body-form-group">
                                                            <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.outlineWeight + ':'"></span>
                                                            <div class="col-sm-9">
                                                                <input type="number" class="form-control" 
                                                                    data-bind="valueUpdate: 'keyup', value: config.outlineWeight, attr: {'aria-label': $root.translations.outlineWeight}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="clustering-panel" class="tab-pane fade">
                        <div class="row service-widget-container">
                            <div class="form-horizontal">
                                <div class="panel-body">
                                    <div class="form-group clustering-pane-form-group">
                                        <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.clusterDistance + ':'"></span>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" 
                                                data-bind="valueUpdate: 'keyup', value: config.clusterDistance, attr: {'aria-label': $root.translations.clusterDistance}">
                                        </div>
                                    </div>
                                    <div class="form-group clustering-pane-form-group">
                                        <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.clusterMaxZoom + ':'"></span>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" 
                                                data-bind="valueUpdate: 'keyup', value: config.clusterMaxZoom, attr: {'aria-label': $root.translations.clusterMaxZoom}">
                                        </div>
                                    </div>
                                    <div class="form-group clustering-pane-form-group">
                                        <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.clusterMinPoints + ':'"></span>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" 
                                                data-bind="valueUpdate: 'keyup', value: config.clusterMinPoints, attr: {'aria-label': $root.translations.clusterMinPoints}">
                                        </div>
                                    </div>
                                    <div class="form-group clustering-pane-form-group">
                                        <span class="col-sm-3 control-label map-style-panel-body-control-label" data-bind="text: $root.translations.vectorSimplification + ':'"></span>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" 
                                                data-bind="valueUpdate: 'keyup', value: config.simplification, attr: {'aria-label': $root.translations.vectorSimplification}">
                                        </div>
                                    </div>
                                    <div class="map-server-instructions">
                                        <span data-bind="text: $root.translations.clusterSettingChangeInfo"></span>
                                        <!-- ko if: count === 0 -->
                                        </br></br>
                                        <i class="fa fa-warning"></i>
                                        <span data-bind="text: $root.translations.previewMapClusteringWarning"></span>
                                        <!-- /ko -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="permissions-panel" class="tab-pane fade">
                        <div class="row service-widget-container">
                            <div class="panel-body">


                                <div class="map-server-instructions">
                                    <i class="ion-ios-information"></i>
                                    <span data-bind="text: $root.translations.layerNodePermissionInfo"></span>
                                </div>
                                <dl class="dl-horizontal permission-user-group-container">
                                    <dt data-bind="text: $root.translations.users"></dt>
                                    <dd>
                                        <!-- ko foreach: permissions.users -->
                                        <div data-bind="text: $data"></div>
                                        <!-- /ko -->
                                    </dd>
                                    <dt data-bind="text: $root.translations.groups"></dt>
                                    <dd>
                                        <!-- ko foreach: permissions.groups -->
                                        <div data-bind="text: $data"></div>
                                        <!-- /ko -->
                                    </dd>
                                </dl>

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