<!--
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 "views/graph/graph-base.htm" %}
{% load static %}
{% load i18n %}

<!-- Title Bar -->
{% block graph_title %}
<div class="ep-tools-title">
    <h1 class="page-header text-overflow ep-graph-title">
        <i class="text-center icon-wrap bg-gray ep-graph-title-icon" data-bind="css: (graph.iconclass() || 'fa fa-question')" ></i>
        <span data-bind="text: graph.name()"></span>
    </h1>
</div>
{% endblock graph_title %}

{% block graph_header_title %}
<span data-bind="text: graph.isresource() ? '{% trans "Resource Model Settings" %}' : '{% trans "Branch Settings" %}'"></span>
{% endblock graph_header_title %}

{% block graph_header_buttons %}
<!-- ko if: dirty() -->
<button class="btn btn-sm btn-danger btn-labeled fa fa-trash" data-bind="click:reset">{% trans "Discard Edits" %}</button>
<button class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click:save">{% trans "Save Edits" %}</button>
<!-- /ko -->
{{ block.super }}
{% endblock graph_header_buttons %}

{% block content %}
<div class="ep-form-content" style="display: none" data-bind="visible: graph">
    <div style="height: 100%;" id="external-page-content">
        <div style="padding: 12px;">
            <div class="panel card-panel">
                <div class="panel-heading">
                    <div>
                        <h3 class="panel-title card-main-title">{% trans "Settings" %}</h3>
                    </div>
                </div>


                <!-- Alert Panel -->
                <div id="basemap-delete-alert" class="panel wizard-data-card-alert"></div>


                <!-- Data Entry -->
                <div class="panel-body card-body fade in">
                    <div id="cards" class="tab-base card-content-container outline">

                        <!--Nav Tabs-->
                        <ul class="nav nav-tabs card-nav-container">
                            <li id="xx-id-group" class="active">
                                <a id="xx-id-tab" data-toggle="tab" href="#id-card" class="card-tab-title" aria-expanded="true">
                                    {% trans "Identifiers" %}
                                </a>
                            </li>
                            <li id="xx-icon-group">
                                <a id="xx-icon-tab" data-toggle="tab" href="#icons-card" class="card-tab-title" aria-expanded="true">
                                    {% trans "Icons" %}
                                </a>
                            </li>
                            <!--ko if: graph.isresource() -->
                            <li id="xx-map-style-group">
                                <a id="xx-map-style" data-toggle="tab" href="#map-style-card" class="card-tab-title" aria-expanded="true">
                                    {% trans "Appearance" %}
                                </a>
                            </li>
                           <!--/ko-->
                            <li id="xx-desc-group">
                                <a id="xx-desc-tab" data-toggle="tab" href="#desc-card" class="card-tab-title" aria-expanded="true">
                                    {% trans "Description" %}
                                </a>
                            </li>
                            <li id="xx-meta-group">
                                <a id="xx-meta-tab" data-toggle="tab" href="#meta-card" class="card-tab-title" aria-expanded="true">
                                    {% trans "Status" %}
                                </a>
                            </li>
                        </ul>

                        <div id="xx-db-arches-app-alert" class="panel data-card-alert"></div>

                        <!--Tabs Content-->
                        <div class="tab-content card-content-tab" style="margin-left: 0px;">

                            <!-- Card -->
                            <div id="id-card" class="tab-pane fade active in">
                                <div class="panel-body card-panel-body">
                                    <div class="card-content">

                                        <!-- Card Level Alert -->
                                        <div id="summary-card-alert" class="panel install-card-alert"></div>

                                        <!-- Card Instruction -->
                                        <p id="install-instructions" class="content-instructions">
                                            <span data-bind="text: graph.isresource() ? '{% trans "Set the defaults for your resource model" %}' : '{% trans "Set the defaults for your branch" %}'"></span>

                                            <!-- Help link -->
                                            <span>
                                                <a id="card-help" class="pull-right card-help help"> {% trans "Help" %} <i class="fa fa-question-circle"></i></a>
                                            </span>
                                        </p>

                                        <!-- Form -->
                                        <div class="col-xs-12">

                                            <form class="widgets">
                                                <div class="row widget-container">
                                                    <div class="form-group">
                                                        <div class="relative">
                                                            <label class="col-xs-12 control-label widget-input-label">
                                                                {% trans "Name" %}
                                                                <i class="ion-ios-checkmark-outline"></i>
                                                                <i class="ion-ios-book add-tooltip pull-right" data-placement="top" data-toggle="tooltip" data-original-title='{% trans "Show Vocabulary" %}'></i>
                                                            </label>
                                                        </div>

                                                        <div class="col-xs-12">
                                                            <input placeholder="{% trans "Name" %}" class="form-control input-lg widget-input" data-bind="value:graph.name, valueUpdate: 'keyup'">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row widget-container">
                                                    <div class="form-group">
                                                        <div class="relative">
                                                            <label class="col-xs-12 control-label widget-input-label"> {% trans "Subtitle" %} <i class="ion-ios-checkmark-outline"></i></label>
                                                        </div>

                                                        <div class="col-xs-12">
                                                            <input placeholder="{% trans "Subtitle" %}" class="form-control input-lg widget-input" data-bind="value:graph.subtitle, valueUpdate: 'keyup'">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row widget-container">
                                                    <div class="form-group">
                                                        <div class="relative">
                                                            <label class="col-xs-12 control-label widget-input-label"> {% trans "Ontology" %} <i class="ion-ios-checkmark-outline"></i></label>
                                                        </div>

                                                        <div class="col-xs-12">
                                                            <select class="design" {% if node_count > 1 %}disabled{% endif %} data-bind="value: graph.ontology_id, valueAllowUnset: true, options: ontologies, optionsText: 'name', optionsValue:'ontologyid', optionsCaption: {% trans 'No ontology' %}, chosen: {disable_search_threshold: 10, width: '100%'}"></select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row widget-container" data-bind="if: graph.ontology_id()">
                                                    <div class="form-group">
                                                        <div class="relative">
                                                            <label class="col-xs-12 control-label widget-input-label"> {% trans "Root Class" %} <i class="ion-ios-checkmark-outline"></i></label>
                                                        </div>

                                                        <div class="col-xs-12">
                                                            <select class="design" {% if node_count > 1 %}disabled{% endif %} data-bind="value: ontologyClass, valueAllowUnset: false, options: ontologyClasses, optionsText: 'display', optionsValue:'source', chosen: {disable_search_threshold: 10, width: '100%', search_contains: true}"></select>
                                                        </div>
                                                    </div>
                                                </div>

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

                            <!-- Card -->
                            <div id="icons-card" class="tab-pane fade">
                                <div class="panel-body card-panel-body">
                                    <div class="card-content">

                                        <!-- Card Level Alert -->
                                        <div id="summary-card-alert" class="panel install-card-alert"></div>

                                        <!-- Card Instruction -->
                                        <p id="install-instructions" class="content-instructions">
                                            <span data-bind="text: graph.isresource() ? '{% trans "Pick an icon for your resource model" %}' : '{% trans "Pick an icon for your branch" %}'"></span>

                                            <!-- Help link -->
                                            <span>
                                                <a id="card-help" class="pull-right card-help help"> {% trans "Help" %} <i class="fa fa-question-circle"></i></a>
                                            </span>
                                        </p>

                                        <!-- Form -->
                                        <div class="col-xs-12">

                                            <form class="widgets">
                                                <div class="row widget-container">
                                                    <div class="form-group">
                                                        <div>
                                                            <label class="col-xs-12 control-label widget-input-label"> {% trans "Icon" %} <i class="ion-ios-checkmark-outline"></i></label>
                                                        </div>

                                                        <!-- Icon search -->
                                                        <div style="padding-left: 10px;">
                                                            <div class="relative" style="padding: 10px 0px;">

                                                                <!-- Currently selected icon -->
                                                                <div>
                                                                    {% trans "Selected icon:" %}
                                                                    <button data-bind="css: 'btn btn-default btn-icon icon-lg ' + graph.iconclass(), click: function() {}" style="height: 35px; width: 35px;"></button>
                                                                </div>

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

                                                                    <!-- Remove Search -->
                                                                    <span class="clear-search" style="position: absolute; left: 480px; top: 5px; color: #123; font-size: 17px;"><i class="fa fa-times-circle"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Icon List -->
                                                        <div style="height: 300px; overflow-y: scroll; padding-top: 15px; padding-left: 20px; border: 1px solid #e9e9e9; margin-left: 10px; margin-right: 30px;">

                                                            <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.graph.iconclass())}, click: function() { $root.graph.iconclass(cssclass) }">
                                                                    <i data-bind="css: cssclass"></i> <span data-bind="text: name"></span>
                                                                </div>
                                                                <!-- /ko -->

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

                            <!-- Card -->
                            <div id="map-style-card" class="tab-pane fade">
                                <div class="panel-body card-panel-body">
                                    <div class="card-content">

                                        <!-- Card Level Alert -->
                                        <div id="map-style-card-alert" class="panel install-card-alert"></div>

                                        <!-- Card Instruction -->
                                        <p id="install-instructions" class="content-instructions">
                                            <span data-bind="if: graph.isresource()">
                                                {% trans "Define this resource's color when displayed in the search results chart" %}
                                            </span>
                                            <span data-bind="if: !graph.isresource()">
                                              {% trans "Define this resource's color when displayed in the search results chart" %}
                                            </span>
                                        </p>

                                        <!-- Form -->
                                        <div class="col-xs-12 col-sm-6" style="padding-bottom: 10px;">

                                            <div class="row widget-container">
                                                <div class="form-group">
                                                  <div class="relative">
                                                      <label class="col-xs-12 control-label widget-input-label"> {% trans "Color" %} <i class="ion-ios-checkmark-outline"></i></label>
                                                  </div>
                                                  <div class="colorpicker-component input-group">
                                                    <input placeholder="{% trans " Map Feature Color " %}" class="form-control input-lg widget-input" data-bind="colorPicker: {color: $root.graph.color, format:'rgba'}">
                                                    <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: $root.graph.color()}"></i></span>
                                                  </div>
                                                </div>
                                            </div>

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

                            <!-- Card -->
                            <div id="meta-card" class="tab-pane fade">
                                <div class="panel-body card-panel-body">
                                    <div class="card-content">

                                        <!-- Card Level Alert -->
                                        <div id="meta-card-alert" class="panel install-card-alert"></div>

                                        <!-- Card Instruction -->
                                        <p id="install-instructions" class="content-instructions">
                                            <span data-bind="if: graph.isresource()">
                                                {% trans "Define this resource model's status" %}
                                            </span>
                                            <span data-bind="if: !graph.isresource()">
                                                {% trans "Define this branch's status" %}
                                            </span>
                                        </p>

                                        <!-- Form -->
                                        <div class="col-xs-12" style="padding-bottom: 10px;">

                                            <div class="row widget-container">
                                                <div class="form-group">
                                                    <div class="relative">
                                                        <label class="col-xs-12 control-label widget-input-label"> {% trans "Status" %} <i class="ion-ios-checkmark-outline"></i></label>
                                                    </div>

                                                    <div class="col-xs-12">
                                                        <div class="pad-hor">
                                                            <label data-bind="css: { 'active': graph.isactive() }, click: function () { graph.isactive(true) }" class="form-radio form-normal form-text">
                                                                <input type="radio" name="stat-w-label" data-bind="checked: graph.isactive" value="true"> {% trans "Active" %}
                                                            </label>
                                                            <label data-bind="css: { 'active': !graph.isactive() }, click: function () { graph.isactive(false) }" class="form-radio form-normal form-text">
                                                                <input type="radio" name="stat-w-label" data-bind="checked: graph.isactive" value="false"> {% trans "Inactive" %}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row widget-container" data-bind="visible: graph.isresource()">
                                                <div class="form-group">
                                                    <div class="relative">
                                                        <label class="col-xs-12 control-label widget-input-label"> {% trans "Resource models that may be related:" %}</label>
                                                    </div>

                                                    <div class="col-xs-12">
                                                        <div class="pad-hor columns">
                                                            <!-- ko foreach: relatable_resources -->
                                                            <label class="form-checkbox form-normal form-primary" data-bind="css: {'form-text': true,  'active': isRelatable()}, click: function () {$data.isRelatable(!$data.isRelatable())}">
                                                                <input type="checkbox" data-bind="checked:isRelatable">
                                                                <span data-bind="text:graph.name"></span>
                                                            </label>
                                                            <!-- /ko -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <!-- Card -->
                            <div id="desc-card" class="tab-pane fade">
                                <div class="panel-body card-panel-body">
                                    <div class="card-content">

                                        <!-- Card Level Alert -->
                                        <div id="summary-card-alert" class="panel install-card-alert"></div>

                                        <!-- Card Instruction -->
                                        <p id="install-instructions" class="content-instructions">
                                            <span data-bind="text: graph.isresource() ? '{% trans "Describe this resource model" %}' : '{% trans "Describe this branch" %}'"></span>
                                        </p>

                                        <!-- Form -->
                                        <div class="col-xs-12" style="padding-bottom: 10px;">

                                            <form class="widgets" style="margin-bottom: 20px;">
                                                <div class="row widget-container">
                                                    <div class="form-group">
                                                        <div class="relative">
                                                            <label class="col-xs-12 control-label widget-input-label"> {% trans "Author" %}</label>
                                                        </div>

                                                        <div class="col-xs-12">
                                                            <input placeholder="{% trans "Author name" %}" class="form-control input-lg widget-input" data-bind="value:graph.author, valueUpdate: 'keyup'">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row widget-container">
                                                    <div class="form-group">
                                                        <div class="relative">
                                                            <label class="col-xs-12 control-label widget-input-label"> {% trans "Abstract" %}</label>
                                                        </div>

                                                        <div class="col-xs-12">
                                                            <textarea placeholder="{% trans "Abstract/description" %}" rows="6" class="form-control" data-bind="value:graph.description, valueUpdate: 'keyup'"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row widget-container">
                                                    <div class="form-group">
                                                        <div class="relative">
                                                            <label class="col-xs-12 control-label widget-input-label"> {% trans "JSON-LD Context" %}</label>
                                                        </div>

                                                        <div class="col-xs-12">
                                                            <input placeholder="{% trans "JSON-LD Context URI" %}" class="form-control input-lg widget-input" data-bind="value:graph.jsonldcontext, valueUpdate: 'keyup'">
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block pre_require_js %}
{{ block.super }}
<script>{% autoescape off %}
define('graph-settings-data', [], function () {
    return {
        icons: {{icons}},
        graph: {{graph_json}},
        node: {{node_json}},
        ontologies: {{ontologies}},
        ontologyClasses: {{ontology_classes}},
        resources: {{resource_data}},
        ontology_namespaces: {{ontology_namespaces}}
    };
});
{% endautoescape %}</script>
{% endblock pre_require_js %}
