<!--
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 template_tags %}
{% load i18n %}


{% block title %}
{{ block.super }}
{% trans "Graph Designer" %}
{% endblock title %}


{% 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><span class="graph-type" data-bind="text: graph.isresource() ? &quot;({% trans "Resource Model" %})&quot; : &quot;({% trans "Branch" %})&quot;"></span>
    </h1>
</div>
{% endblock graph_title %}

{% block main_content %}
<div 
    class="modal-background" 
    data-bind="visible: $data.shouldShowPublishModal, click: function() { $data.shouldShowPublishModal(false); }, clickBubble: false,"
>
    <div class="modal-content-container" data-bind="click: function(){}, clickBubble: false,">
        <div 
            style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            "
        >
            <div style="display: flex;">
                <h4>
                    {% trans "Resource:" %}
                </h4>
                <h4
                    style="padding-left: 8px;"
                    data-bind='text: $data.graph.name()'
                ></h4>
            </div>

            <h5 style="color: red; padding: 0 50px;">{% trans "Warning! This will save the graph in its current state and make the Resource accessible to permissioned users." %}</h5>

            <div
                style="
                    width: 100%;
                    padding-top: 5px;
                "
            >
                <label 
                    style="align-self: flex-start;"
                    class="control-label" 
                    for="publication_notes"
                >
                    {% trans "Notes:" %}
                </label>
                <textarea 
                    data-bind="textInput: $data.graphPublicationNotes"
                    style="margin-bottom: 12px; max-width: 560px;"
                    class="form-control textarea textarea-resizable" 
                    rows="4" 
                    type="text" 
                    name="publication_notes"
                    placeholder="Add publication notes..."
                ></textarea>
            </div>
                    
            <!-- ko ifnot: $data.isGraphPublished() -->
                <!-- ko if: $data.shouldShowGraphPublishButtons() -->
                <span style="align-self: flex-end;">
                    <button style="transition: none;" class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click: $data.publishGraph">
                        <span>{% trans "Publish" %}</span>
                    </button>
                </span>
                <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</div>
<div class="content-panel">
    <!-- Title Block -->
    <div class="ep-form-toolbar">

        <h4 class="ep-form-toolbar-title">
            <!-- Menu Item -->
            <div class="graph-selector" data-bind="">
                <!-- ko if: groupedGraphs -->
                <select data-bind="template: { name: 'selectGraphTemplate', data: groupedGraphs }, chosen: {width: '100%'}, value: graphid"></select>
                <!-- /ko -->
                <script type="text/html" id="selectGraphTemplate">
                    <option disabled selected value>{% trans "Find a Resource Model/Branch..." %}</option>
                    <!-- ko foreach: groups -->
                        <optgroup data-bind="attr: { 'label': (name==='Resource Models')?{% quoted_trans "Resource Models" %}:{% quoted_trans "Branches" %}}, foreach: items">
                            <option data-bind="value: graphid, text: name"></option>
                        </optgroup>
                    <!-- /ko -->
                </script>
            </div>
        </h4>

        <div class="ep-form-toolbar-tools">
            <span class="graph-settings" data-bind="visible: graphSettingsVisible()" style="display: none;">
                <!-- ko if: graphSettingsViewModel.dirty() && !isNodeDirty() -->
                    <button class="btn btn-sm btn-danger btn-labeled fa fa-trash" data-bind="click: graphSettingsViewModel.reset"><span>{% trans "Discard Edits" %}</span></button>
                    <!-- ko if: !$data.isGraphPublished() -->
                        <button class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click: graphSettingsViewModel.save"><span>{% trans "Save Edits" %}</span></button>
                    <!-- /ko -->
                <!-- /ko -->
            </span>

            <span class="graph-settings" data-bind="visible: selectedNode() && activeTab() === 'graph'" style="display: none;">
                <!-- ko if: isNodeDirty() -->
                    <button class="btn btn-sm btn-danger btn-labeled fa fa-trash" data-bind="click: function(){graphModel.get('selectedNode')().reset()}"><span>{% trans "Discard Edits" %}</span></button>
                    <!-- ko if: !$data.isGraphPublished() -->
                        <button class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click: saveSelectedNode"><span>{% trans "Save Edits" %}</span></button>
                    <!-- /ko -->
                <!-- /ko -->
            </span>

            <!-- ko if: ko.unwrap(cardTree.selection) && ko.unwrap(cardTree.selection) !=='root' -->
            <span class="graph-settings" data-bind="visible: cardTree.selection() && activeTab() === 'card'" style="display: none;">
                <!-- ko with: ko.unwrap(cardTree.selection).model ? ko.unwrap(cardTree.selection).model : ko.unwrap(cardTree.selection).card -->
                <!-- ko if: $data.dirty() -->
                    <button class="btn btn-sm btn-danger btn-labeled fa fa-trash" data-bind="click: function(){$data.reset(); $parent.cardTree.selection.valueHasMutated();}"><span>{% trans "Discard Card Edits" %}</span></button>
                    <!-- ko if: !$parent.isGraphPublished() -->
                        <button class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click: function(){$data.save()}"><span>{% trans "Save Card Edits" %}</span></button>
                    <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </span>
            <!-- /ko -->

            <!-- ko if: ko.unwrap(cardTree.selection) && ko.unwrap(cardTree.selection) ==='root' -->
            <span>
                <!-- ko if: $data.dirty() -->
                    <button class="btn btn-md btn-danger btn-labeled fa fa-trash" data-bind="click: function(){$data.reset()}"><span>{% trans "Discard Card Edits" %}</span></button>
                    <!-- ko if: !$data.isGraphPublished() -->
                        <button class="btn btn-md btn-primary btn-labeled fa fa-check" data-bind="click: function(){$data.save()}"><span>{% trans "Save Card Edits" %}</span></button>
                    <!-- /ko -->
                <!-- /ko -->
            </span>
            <!-- /ko -->
            
            <!-- ko if: $data.isGraphPublished() -->
            <button class="btn btn-md btn-danger btn-labeled fa fa-exclamation" data-bind="click: $data.displayUnpublishWarning">
                <span>{% trans "Unpublish Graph" %}</span>
            </button>
            <!-- /ko -->
            <!-- ko ifnot: $data.isGraphPublished() -->
                <!-- ko if: $data.shouldShowGraphPublishButtons() -->
                <button class="btn btn-md btn-primary btn-labeled fa fa-check" data-bind="click: function() { $data.shouldShowPublishModal(true); }">
                    <span>{% trans "Publish Graph" %}</span>
                </button>
                <!-- /ko -->
            <!-- /ko -->

            <a class="btn btn-md btn-mint btn-labeled fa fa-mail-reply back-to-designer" data-bind="
                attr: {
                    href: '{% url 'graph' '' %}' + (graph.isresource() ? '' : '#branches')
                },
                click: function () {
                    navigate('{% url 'graph' '' %}' + (graph.isresource() ? '' : '#branches'))
                }">
                <span>{% trans "Quit Designer" %}</span>
            </a>
        </div>

    </div>

    <div class="set-variable-pixel-height">

        <!-- Left Panel -->
        <div class="left-panel graph-designer" data-bind="resizableSidepanel:true">
            <div class="left-panel-inner-container">
                <!--Nav Tabs-->
                <div class="graph-designer-tab-container">
                    <ul class="nav nav-tabs flex pad-no">
                        <li data-bind="css: { active: activeTab() === 'graph' }, click: function(){activeTab('graph');}">
                            <a class="graph-designer-tab ion-android-share-alt" aria-expanded="true">
                                {% trans 'Graph' %}
                            </a>
                        </li>
                        <li data-bind="css: { active: activeTab() === 'card' }, click: function(){activeTab('card');}">
                            <a class="graph-designer-tab ion-clipboard" aria-expanded="false">
                                {% trans 'Cards' %}
                            </a>
                        </li>
                        <!--ko if: graph.isresource() -->
                        <li data-bind="css: { active: activeTab() === 'permissions' }, click: function(){activeTab('permissions');}">
                            <a class="graph-designer-tab ion-lock-combination" aria-expanded="false">
                                {% trans 'Permissions' %}
                            </a>
                        </li>
                        <!--/ko-->
                    </ul>
                </div>

                <div class="tab-content set-variable-pixel-height">
                    <div style="width: 100%" class="tab-pane fade in" data-bind="css: { active: activeTab() === 'graph' }">
                        <div style="height:100%;" class="jstree jstree-default" data-bind="with: graphTree, css: {'jstree-rtl': activeLanguageDir() == 'rtl' }">
                            {% include 'views/graph/graph-designer/graph-tree.htm' %}
                        </div>
                    </div>

                    <div style="width: 100%" class="tab-pane fade in" data-bind="css: { active: activeTab() === 'card' }">
                        <div style="height:100%;" class="jstree jstree-default" data-bind="visible: true, with: cardTree, css: {'jstree-rtl': activeLanguageDir() == 'rtl' }" style="display: none;">
                            {% include 'views/graph/graph-designer/card-tree.htm' %}
                        </div>
                    </div>

                    <div style="width: 100%" class="tab-pane fade in" data-bind="css: { active: activeTab() === 'permissions' }">
                        <div style="height:100%;" class="jstree jstree-default" data-bind="visible: true, with: permissionTree, css: {'jstree-rtl': activeLanguageDir() == 'rtl' }" style="display: none;">
                            {% include 'views/graph/graph-designer/card-tree-permissions.htm' %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Panel -->
        <div class="node-configuration">
            <div style="height: 100%" class="flex" data-bind="visible: activeTab() === 'graph'">
                <!--Branch Library -->
                <div id="branch-library" class="middle-column-container graph-designer branch-library" data-bind="visible: graphTree.branchListVisible" style="display: none;">
                    <div>
                        <div class="title-block-title" style="margin-bottom: 0px; padding-bottom: 0px;">
                            <span class="">{{branch_list.title}}</span>
                        </div>
                        <div class="relative">
                            <a id="node-crud-close" href="javascript:void(0)" class="library-close-btn" data-bind="click: graphTree.toggleBranchList.bind(graphTree)"><i class="ion-close"></i></a>
                        </div>
                        <div style="padding: 4px 0px 12px 6px">{% trans "Add a branch to your model from the library" %}</div>
                    </div>
                    <div data-bind="with: branchListView">
                        {% include 'views/graph/graph-designer/branch-list.htm' %}
                    </div>
                </div>

                <!-- Settings, Node Form, and Branch List -->
                <div style="width: 100%;" class="tab-pane fade in flex" data-bind="visible: viewState() === 'design'">
                    <!--ko if: selectedNode() -->
                    <div class="graph-designer-graph-content" data-bind="visible: selectedNode().nodeid == graph.root.nodeid()">
                        {% include 'views/graph/graph-designer/graph-settings.htm' %}
                    </div>

                    <div class="graph-designer-graph-content" data-bind="visible: selectedNode().nodeid != graph.root.nodeid(), with: nodeForm">
                        {% include 'views/graph/graph-designer/node-form.htm' %}
                    </div>
                    <!--/ko-->
                </div>
            </div>

            <!--ko if: activeTab() === 'card' -->

            <!-- Card Header -->
            <div class="settings-panel-heading">
                <div class="graph-designer-title">
                    <div class="name">
                        <span class="">{% trans "Card Designer" %}</span>
                    </div>
                </div>
            </div>

            <div
                style="flex-direction: row-reverse;"
                class="settings-panel-body set-variable-pixel-height"
                data-bind="visible: activeTab() === 'card'"
            >
                <!--Middle Panel -->
                <!-- ko if: cardTree.selection -->
                <div class="middle-column-container graph-designer branch-library card-configuration" data-bind="css: {'expanded': selectedCard() && selectedCard().model.helpenabled() && cardTree.selection().constructor.name === 'CardViewModel' }" style="">
                    <!-- ko if: typeof cardTree.selection()!=='string' -->
                        <!-- ko if: cardTree.selection().constructor.name === 'CardViewModel' -->
                        <div data-bind="with: cardTree.selection()">
                            {% include 'views/graph/graph-designer/card-configuration.htm' %}
                        </div>
                        <!-- /ko -->
                        <!-- ko if: cardTree.selection().constructor.name !== 'CardViewModel' -->
                        <div data-bind="with: cardTree.selection()">
                            {% include 'views/graph/graph-designer/widget-configuration.htm' %}
                        </div>
                        <!-- /ko -->
                    <!-- /ko -->
                    <!-- ko if: cardTree.selection()==='root' -->
                    <div class="panel-section-title dark-colored-text">
                        {% trans "Report Configuration" %}
                    </div>
                    <div class="tab-content listing-container form-divider">
                        <div class="node-config-item" style="">
                            <div class="control-label">
                                {% trans "Template" %}
                            </div>
                            <div class="pad-no">
                                <select class="design" data-bind="value: report.get('template_id'), options: reportTemplates, optionsText: 'name', optionsValue: 'id', chosen: {disable_search_threshold: 10, width: '100%'}"></select>
                            </div>
                        </div>

                        <div class='report-preview' data-bind='component: {
                            name: reportLookup[report.get("template_id")()].componentname,
                            params: {
                                report: report,
                                configForm: true,
                                configType: "header"
                            }
                        }'></div>
                    </div>
                    <!-- /ko -->
                </div>

                <!-- Card Manager -->
                <div
                    style="
                        flex: 2;
                        width: 0;
                        overflow: hidden;
                    "
                    class="flex tab-pane fade in graph-designer"
                    data-bind="css: { active: activeTab() === 'card' }"
                >
                    <!-- ko if: selectedCard() -->
                    <div class="card-component-panel">
                        <!-- ko component: {
                        name: cardTree.cardComponentLookup[selectedCard().model.component_id()].componentname,
                        params: {
                                card: selectedCard(),
                                tile: null,
                                provisionalTileViewModel: null,
                                reviewer: null,
                                loading: loading,
                                form: cardTree,
                                preview: true,
                                pageVm: $root
                            }
                        } --><!-- /ko -->
                    </div>
                    <!-- /ko -->
                    <!-- ko if: cardTree.selection()==='root' -->
                        <div class='resource-report editor-report' data-bind='component: {
                            name: reportLookup[report.get("template_id")()].componentname,
                            params: {
                                report: report
                            }
                        }'></div>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
            </div>
            <!-- /ko -->

            <!--ko if: activeTab() === 'permissions' -->
            <div class="flex">
                <!-- Card Manager -->
                <div class="flex tab-pane fade in" data-bind="css: { active: activeTab() === 'permissions' }">
                    {% include 'views/graph/graph-designer/permission-settings-form.htm' %}
                </div>
            </div>
            <!--/ko-->

        </div>

    </div>
</div>
{% endblock main_content %}

{% block pre_require_js %}
{{block.super}}
<div 
    id="graphDesignerData"
    style="display: none;"
    graphDesignerData='{
        "graphid": "{{graphid}}",
        "ontologyClasses": {{ontology_classes}},
        "ontologies": {{ontologies}},
        "datatypes": {{datatypes_json}},
        "graph": {{graph}},
        "ontology_namespaces": "{{ontology_namespaces}}",
        "branches": {{branches}},
        "cards": {{cards}},
        "constraints": {{constraints}},
        "cardwidgets": {{cardwidgets}},
        "widgets": {{widgets_json}},
        "cardComponents": {{card_components_json}},
        "appliedFunctions": {{applied_functions}},
        "restrictedNodegroups": "{{restricted_nodegroups}}"
    }'
></div>
{% endblock pre_require_js %}
