{% load i18n %}
<!-- ko if: $data.layer -->
<div class="row map-service-container relative">

    <!-- Save/discard edits buttons (for convenience) -->
    <!-- ko if: node.dirty() -->
    <div class="resource-service-buttons-heading">
        <button class="btn btn-primary btn-labeled btn-active-dark fa fa-check pull-right mar-top" data-bind="click: function () { saveNode() }">{% trans "Save Edits" %}</button>
        <button class="btn btn-mint btn-labeled btn-active-dark fa fa-undo pull-right mar-top" data-bind="click: function () { node.reset() }">{% trans "Discard Edits" %}</button>
    </div>
    <!-- /ko -->

    <h3 class="config-title" style="margin-top: -10px; margin-bottom: 0px;"><i class="fa fa-binoculars"></i> {% trans "Layer Preview" %} <span class="service-url text-semibold" data-bind="text: serviceURL"></span></h3>

    <div class="map-service-manage-buttons">
        <div class="form-group">
            <label class="control-label text-semibold">{% trans "Activated:" %}</label>
            <span class="switch switch-small" data-bind="css: {
                    'on': config.layerActivated()
                }, click: function () {
                    config.layerActivated(!config.layerActivated());
                }">
                <small></small>
            </span>
        </div>
    </div>
    <div class="btn-group map-server-basemap-button">
        <button class="dropdown-toggle btn" data-toggle="dropdown" 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>
    <!-- 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="row map-service-container" style="padding-left: 13px; padding-right: 13px;">
        <div class="">
            <div class="tab-base map-service-tabs" style="">

                <!-- Resource Styling Tabs -->
                <ul class="nav nav-tabs map-service-nav-tabs">
                    <li class="active">
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#settings-panel" aria-expanded="false"><i class="ion-ios-settings-strong"></i> {% trans "Settings" %}</a>
                    </li>
                    <li class="">
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#styling-panel" aria-expanded="false"><i class="ion-image"></i> {% trans "Service Styling" %}</a>
                    </li>
                    <li class="">
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#clustering-panel" aria-expanded="false"><i class="ion-ios-pie"></i> {% trans "Clustering" %}</a>
                    </li>
                    <li class="">
                        <a class="config-title-tab mar-no" data-toggle="tab" href="#permissions-panel" aria-expanded="true"><i class="ion-ios-color-wand"></i> {% trans "Permissions" %}</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">
                                        <label class="col-sm-3 control-label">{% trans "Layer Name:" %}</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" data-bind="valueUpdate: 'keyup', value: config.layerName, attr: { placeholder: layer.name }">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{% trans "Add to search map by default:" %}</label>
                                        <div class="col-sm-9">
                                            <span class="switch switch-small service-switch-shim" data-bind="css: {
                                                    'on': config.addToMap()
                                                }, click: function () {
                                                    config.addToMap(!config.addToMap());
                                                }">
                                                <small></small>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <!-- Icon search -->
                                        <div style="padding-left: 10px;">
                                            <div class="relative" style="padding: 10px 0px;">

                                                <div>
                                                    {% trans "Layer icon:" %}
                                                    <button data-bind="css: 'btn btn-default btn-icon icon-lg ' + (config.layerIcon() || layer.icon), click: function() {}" style="height: 35px; width: 35px;"></button>
                                                </div>

                                                <div style="position: absolute; left: 110px; top: 10px;">
                                                    <input type="text" class="form-control" style="width: 366px; height: 36px;" placeholder="{% trans "Find an icon" %}" data-bind="value:iconFilter, valueUpdate: 'keyup'">

                                                    <!-- ko if: iconFilter() !== '' -->
                                                    <span class="clear-search" style="position: absolute; left: 345px; top: 5px; color: #123; font-size: 17px;" data-bind="click: function () { iconFilter(''); }"><i class="fa fa-times-circle"></i></span>
                                                    <!-- /ko -->
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Icon List -->
                                        <div style="height: 300px;overflow-y: scroll;padding: 15px;border: 1px solid #e9e9e9;">
                                            <div class="row">

                                                <!-- ko foreach: icons -->
                                                <div class="col-xs-6 col-md-3 col-sm-4 demo-icon-font" data-bind="css: {'selected': (cssclass === ($parent.config.layerIcon() || $parent.layer.icon))}, click: function() { $parent.config.layerIcon(cssclass) }">
                                                    <i data-bind="css: cssclass"></i> <span data-bind="text: name"></span>
                                                </div>
                                                <!-- /ko -->

                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div style="padding:15px;">
                                            <div class="row" style="padding-bottom: 10px;">
                                                {% trans "Legend content:" %}
                                            </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">
                            <div class="pull-right advanced-map-style-switch">
                                <label class="control-label text-semibold">{% trans "Advanced:" %}</label>
                                <span class="switch switch-small" data-bind="css: {
                                        'on': config.advancedStyling()
                                    }, click: function () {
                                        config.advancedStyling(!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: 0px; padding-bottom: 5px;">
                                        <!-- ko if: count === 0 -->
                                        <div class="map-server-instructions">
                                            <i class="fa fa-warning"></i>
                                            {% trans "Layer has no data - data on map is for preview purposes.  This layer will not show up in map overlays until data is added." %}
                                        </div>
                                        <!-- /ko -->
                                        <div class="">
                                            <!-- Points -->
                                            <div class="col-sm-6 col-md-4 col-divider">
                                                <span class="style-title">{% trans "Point Style" %}</span>

                                                <div class="form-horizontal">
                                                    <div class="panel-body map-style-panel-body">
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label">{% trans "Color" %}</label>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input placeholder="{% trans "Color " %}" class="form-control input-lg widget-input" data-bind="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">
                                                            <label class="col-sm-3 control-label">{% trans "Halo color" %}</label>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input placeholder="{% trans "Halo Color " %}" class="form-control input-lg widget-input" data-bind="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">
                                                            <label class="col-sm-3 control-label">{% trans "Radius" %}</label>
                                                            <div class="col-sm-9">
                                                                <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: config.radius">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label">{% trans "Halo radius" %}</label>
                                                            <div class="col-sm-9">
                                                                <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: config.haloRadius">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Lines -->
                                            <div class="col-sm-6 col-md-4 col-divider">
                                                <span class="style-title">{% trans "Line Style" %}</span>

                                                <div class="form-horizontal">
                                                    <div class="panel-body map-style-panel-body">
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label">{% trans "Color" %}</label>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input placeholder="{% trans "Color " %}" class="form-control input-lg widget-input" data-bind="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">
                                                            <label class="col-sm-3 control-label">{% trans "Halo color" %}</label>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input placeholder="{% trans "Halo Color " %}" class="form-control input-lg widget-input" data-bind="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">
                                                            <label class="col-sm-3 control-label">{% trans "Weight" %}</label>
                                                            <div class="col-sm-9">
                                                                <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: config.weight">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label">{% trans "Halo weight" %}</label>
                                                            <div class="col-sm-9">
                                                                <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: config.haloWeight">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <!-- Polygons -->
                                            <div class="col-sm-6 col-md-4">
                                                <span class="style-title">{% trans "Polygon Style" %}</span>

                                                <div class="form-horizontal">
                                                    <div class="panel-body map-style-panel-body">
                                                        <div class="form-group">
                                                            <label class="col-sm-3 control-label">{% trans "Fill Color" %}</label>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input placeholder="{% trans "Color " %}" class="form-control input-lg widget-input" data-bind="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">
                                                            <label class="col-sm-3 control-label">{% trans "Outline color" %}</label>
                                                            <div class="col-sm-9">
                                                                <div class="colorpicker-component input-group">
                                                                    <input placeholder="{% trans "Halo Color " %}" class="form-control input-lg widget-input" data-bind="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">
                                                            <label class="col-sm-3 control-label">{% trans "Outline weight" %}</label>
                                                            <div class="col-sm-9">
                                                                <input type="number" placeholder="" class="form-control" data-bind="valueUpdate: 'keyup', value: config.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">
                                        <label class="col-sm-3 control-label">{% trans "Cluster Distance:" %}</label>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" data-bind="valueUpdate: 'keyup', value: config.clusterDistance">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{% trans "Cluster Max Zoom:" %}</label>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" data-bind="valueUpdate: 'keyup', value: config.clusterMaxZoom">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{% trans "Cluster Min Points:" %}</label>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" data-bind="valueUpdate: 'keyup', value: config.clusterMinPoints">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{% trans "Vector Simplification:" %}</label>
                                        <div class="col-sm-9">
                                            <input type="number" class="form-control" data-bind="valueUpdate: 'keyup', value: config.simplification">
                                        </div>
                                    </div>
                                    <div class="map-server-instructions">
                                        {% trans "Changes to cluster settings will only be reflected after saving." %}
                                        <!-- ko if: count === 0 -->
                                        </br></br>
                                        <i class="fa fa-warning"></i>
                                        {% trans "Preview map data do not use clustering algorithm.  Add data for this resource model to see real clustered data." %}
                                        <!-- /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> {% trans "The following users and groups can view this layer. If you wish to change who can access this layer, please update the permissions on the layer node." %}
                                </div>
                                <dl class="dl-horizontal">
                                    <dt>{% trans "Users" %}</dt>
                                    <dd>
                                        <!-- ko foreach: permissions.users -->
                                        <div data-bind="text: $data"></div>
                                        <!-- /ko -->
                                    </dd>
                                    <dt>{% trans "Groups" %}</dt>
                                    <dd>
                                        <!-- ko foreach: permissions.groups -->
                                        <div data-bind="text: $data"></div>
                                        <!-- /ko -->
                                    </dd>
                                </dl>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- ko if: node.dirty() -->
                <button class="btn btn-primary btn-labeled btn-active-dark fa fa-check pull-right mar-top" data-bind="click: function () { saveNode() }">{% trans "Save Edits" %}</button>
                <button class="btn btn-mint btn-labeled btn-active-dark fa fa-undo pull-right mar-top" data-bind="click: function () { node.reset() }">{% trans "Discard Edits" %}</button>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>
<!-- /ko -->
