<!--
ARCHES - a program developed to inventory and manage immovable cultural heritage.
Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
{% extends "base-manager.htm" %}
{% load static %}
{% load i18n %}


{% block title %}
{{ block.super }}
{% trans "Map Layer Manager" %}
{% endblock title %}


{% block main_content %}
<div class="content-panel" data-bind="click:function() { menuActive(false); }">
    <div class="flex">
        <div class="flex">
            <div class="left-column-crud-container form-list" style="overflow-y: hidden;">
                <div class="layer-filter">
                    <!-- Layer Filter -->
                    <div class="list-filter" data-bind="">
                        <input type="text" class="form-control" placeholder="Find a layer..." data-bind="value: listFilter, valueUpdate: 'keyup'">

                        <!-- Clear Search -->
                        <span class="clear-node-search" data-bind="click: function () { listFilter(''); }"><i class="fa fa-times-circle"></i></span>
                    </div>
                </div>
                <div class="layer-list">
                    <div class="grid">
                        <!-- ko foreach: { data: listItems(), as: "item" } -->
                        <div class="library-card selected-card" data-bind="click: function () { $parent.selection(item) }, css: {'selected': $parent.selection() === item}">

                            <div class="library-icon">
                                <span class="icon-wrap icon-wrap-sm icon-circle branch-icon bg-primary">
                                    <!-- ko if: item.nodeid -->
                                    <i data-bind="css: item.config.layerIcon() || item.layer.icon"></i>
                                    <!-- /ko -->
                                    <!-- ko if: !item.nodeid -->
                                    <i data-bind="css: item.icon"></i>
                                    <!-- /ko -->
                                </span>
                            </div>
                            <div class="crud-card-main">
                                <!-- ko if: item.nodeid -->
                                <a class="listitem_name" data-bind="text: (item.config.layerName ? item.config.layerName() : false) || item.layer.name"></a>
                                <!-- /ko -->
                                <!-- ko if: !item.nodeid -->
                                <a class="listitem_name" data-bind="text: item.name"></a>
                                <!-- /ko -->
                            </div>
                            <!-- ko if: item.nodeid -->
                            <div class="crud-card-subtitle" data-bind="text: item.name"></div>
                            <!-- /ko -->
                            <!-- ko if: !item.nodeid -->
                            <div class="crud-card-subtitle" data-bind="text: item.isoverlay ? '{% trans "Overlay" %}' : '{% trans "Basemap" %}'"></div>
                            <!-- /ko -->
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
            </div>

            <!-- Basemap/Overlays Config -->
            <div class="card-form-preview-container" style="height: calc(100vh + 100px);">

                <!-- Header -->
                <div class="category-header">
                    <!-- Resource/Graph Toggle -->
                    <div style="display: block;">
                        <a id="" class="category-title" href="" data-bind="css: { 'active': selectedList() && selectedList() === geomNodes  }, click: function() { selectedList(geomNodes); }">{% trans "Resource Layers" %}</a>
                        <a id="" class="category-title" href="" data-bind="css: { 'active': selectedList() && selectedList() === basemaps  }, click: function() { selectedList(basemaps); }">{% trans "Basemaps" %}</a>
                        <a id="" class="category-title" href="" data-bind="css: { 'active': selectedList() && selectedList() === overlays  }, click: function() { selectedList(overlays); }">{% trans "Overlays" %}</a>
                    </div>
                </div>
                <div class="ep-card-crud-container">
                    <div class="panel">
                        <!-- ko if: !selection() -->
                        <div class="panel-heading">
                            <h3 class="panel-title"><span>{% trans 'No overlays available' %}</span></h3>
                        </div>
                        <!-- /ko -->

                        <!-- ko if: selection()  && selection().nodeid -->
                        <div class="panel-heading">
                            <h3 class="panel-title"><i data-bind="css: selection().config.layerIcon() || selection().layer.icon"></i> <span data-bind="text: selection().config.layerName() || selection().layer.name"></span></h3>
                        </div>

                        <div class="panel-body map-preview-panel">
                            <div data-bind='component: {
                                name: selection().datatypeConfigComponent,
                                params: selection()
                            }'></div>
                        </div>
                        <!-- /ko -->

                        <!-- ko if: selection()  && !selection().nodeid -->
                        <div class="panel-heading relative">
                            <h3 class="panel-title"><i data-bind="css: selection().icon"></i> <span data-bind="text: selection().name"></span></h3>

                            <!-- Service management buttons (for convenience) -->
                            <div class="service-buttons-heading">
                                <button class="btn btn-danger btn-labeled btn-active-dark fa fa-trash pull-right mar-top" data-bind="click: function () { selection().delete() }">{% trans "Delete Layer" %}</button>

                                <!-- ko if: selection().dirty() -->
                                <button class="btn btn-primary btn-labeled btn-active-dark fa fa-check pull-right mar-top" data-bind="click: function () { selection().save() }">{% 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 () { selection().reset() }">{% trans "Discard Edits" %}</button>
                                <!-- /ko -->
                            </div>
                        </div>

                        <div class="panel-body basemap-preview-panel">
                            <div class="row map-service-container relative">
                                <h3 class="config-title" style="margin-top: -10px; margin-bottom: 0px;"><i class="fa fa-binoculars"></i> {% trans "Layer Preview" %}</h3>

                                <div class="map-service-manage-buttons">
                                    <div class="form-group">
                                        <label class="control-label">{% trans "Activated:" %}</label>
                                        <span class="switch switch-small" data-bind="css: {
                                                'on': selection().activated()
                                            }, click: function () {
                                                selection().activated(!selection().activated());
                                            }">
                                            <small></small>
                                        </span>
                                    </div>
                                </div>
                                <div class="btn-group map-server-basemap-button" data-bind="if: selection().isoverlay">
                                    <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>

                                <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>
                            </div>

                            <!-- Service Styling -->
                            <div class="row map-service-container" style="padding-left: 10px; padding-right: 10px;">
                                <div>
                                    <div class="tab-base map-service-tabs">

                                        <!-- 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>
                                                <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>
                                        </ul>

                                        <div class="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" style="padding-top: 10px;">
                                                            <div class="form-group">
                                                                <label class="control-label">{% trans "Layer Name:" %}</label>
                                                                <div>
                                                                    <input type="text" class="form-control" data-bind="valueUpdate: 'keyup', value: selection().name">
                                                                </div>
                                                            </div>

                                                            <div class="form-group">
                                                                <div>
                                                                    <label class="control-label" data-bind="text: selection().isoverlay ? '{% trans "Add to map by default:" %}' : '{% trans "Default basemap:" %}'"></label>
                                                                    
                                                                    <span class="switch switch-small service-switch-shim" style="margin-top: 0px;"data-bind="css: {
                                                                                'on': selection().addtomap()
                                                                            }, click: function () {
                                                                                selection().addtomap(!selection().addtomap());
                                                                            }">
                                                                            <small></small>
                                                                    </span>
                                                                </div>
                                                            </div>

                                                            <div class="form-group" data-bind="if: selection().isoverlay">
                                                                <label class="col-sm-3 control-label">{% trans "Only show on search map:" %}</label>
                                                                <div class="col-sm-9">
                                                                    <span class="switch switch-small service-switch-shim" data-bind="css: {
                                                                            'on': selection().searchonly()
                                                                        }, click: function () {
                                                                            selection().searchonly(!selection().searchonly());
                                                                        }">
                                                                        <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 ' + selection().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 === $root.selection().icon())}, click: function() { $root.selection().icon(cssclass) }">
                                                                            <i data-bind="css: cssclass"></i> <span data-bind="text: name"></span>
                                                                        </div>
                                                                        <!-- /ko -->

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

                                                            <!-- ko if: selection() && selection().isoverlay -->
                                                            <!-- ko with: selection() -->
                                                            <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: legend, ckeditorOptions: {},  valueUpdate: 'afterkeydown'"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- /ko -->
                                                            <!-- /ko -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="styling-panel" class="tab-pane fade">
                                                <div class="row" style="margin-top: -5px; margin-left: -5px; margin-right: -5px; margin-bottom: 10px;">
                                                    <div data-bind="codemirror: { value: selectedLayerJSON, mode: { name: 'javascript', json: true }, theme: 'monokai' }"></div>
                                                </div>
                                            </div>

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

                            <div>
                                <button class="btn btn-danger btn-labeled btn-active-dark fa fa-trash pull-right mar-top" data-bind="click: function () { selection().delete() }">{% trans "Delete Layer" %}</button>

                                <!-- ko if: selection().dirty() -->
                                <button class="btn btn-primary btn-labeled btn-active-dark fa fa-check pull-right mar-top" data-bind="click: function () { selection().save() }">{% 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 () { selection().reset() }">{% trans "Discard Edits" %}</button>
                                <!-- /ko -->
                            </div>

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

</div>
{% endblock main_content %}

{% block tabs %}{% endblock tabs %}

{% block pre_require_js %}
{{block.super}}
    <script>
        {% autoescape off %}define('map-layer-manager-data', [], function() {
            return {
                "geom_nodes": {{geom_nodes_json}},
                "resource_map_layers": {{resource_map_layers_json}},
                "resource_map_sources": {{resource_map_sources_json}},
                "datatypes": {{ datatypes_json }},
                "graphs": {{ graphs }},
                "icons": {{icons}},
                "node_permissions": {{node_permissions}}
            };
        });{% endautoescape %}
    </script>
{% endblock pre_require_js %}
