<!--
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 
        style="display: flex;"
        class="page-header text-overflow ep-graph-title"
    >
        <span>
            <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>
            
            
        </span>
    </h1>
</div>
{% endblock graph_title %}

{% block main_content %}
<div 
    class="modal-background" 
    data-bind="
        visible: $data.shouldShowPublishModal, 
        event: { 
            mousedown: function() { 
                if (event.target === event.currentTarget) {
                    $data.shouldShowPublishModal(false);
                } else {
                    return true;
                }
            } 
        }, 
    "
>
    <div class="modal-content-container">
        <div style="display: flex; flex-direction: column;">
            <div style="display: flex; padding-bottom: 10px; align-self: center;">
                <h4>
                    <span 
                        data-bind="text: $data.graph.isresource() ? {% quoted_trans 'Resource Model:'%} : {% quoted_trans 'Branch:'%}"
                    ></span>
                </h4>
                <h4
                    style="padding-left: 8px;"
                    data-bind='text: $data.graph.name()'
                ></h4>
            </div>

            <div>
                <h5>
                    <!-- ko if: $data.graph.isresource() && $data.graph.source_identifier_id() -->
                    {% trans "This will save the Resource Model in its current state. It will also create a historical record of the Resource Model." %}
                    <!-- /ko-->
                    <!-- ko if: $data.graph.isresource() && !$data.graph.source_identifier_id() -->
                    {% trans "This will save the Resource Model in its current state. It will update the related historical record to reflect these changes." %}
                    <!-- /ko-->
                    <!-- ko if: !$data.graph.isresource() && $data.graph.source_identifier_id() -->
                    {% trans "This will save the Branch in its current state. It will also create a historical record of the Branch." %}
                    <!-- /ko-->
                    <!-- ko if: !$data.graph.isresource() && !$data.graph.source_identifier_id() -->
                    {% trans "This will save the Branch in its current state. It will update the related historical record to reflect these changes." %}
                    <!-- /ko-->
                </h5>
                
                <!-- ko if: $data.graph.source_identifier_id() && $data.publicationResourceInstanceCount() -->
                <h5 style="color: red;">
                {% blocktrans count publication_resource_instance_count as publication_resource_instance_count %}
                    Warning! There is {{ publication_resource_instance_count }} Resource Instance that will be affected by this change.
                    {% plural %}
                    Warning! There are {{ publication_resource_instance_count }} Resource Instances that will be affected by this change.
                {% endblocktrans %}
                </h5>
                <!-- /ko -->
            </div>

            <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; resize: vertical; min-height: 280px;"
                    class="form-control textarea textarea-resizable" 
                    rows="4" 
                    type="text" 
                    name="publication_notes"
                    placeholder="{% quoted_trans 'Add notes...'  %}"
                ></textarea>
            </div>
                    
            <!-- ko if: $data.shouldShowGraphPublishButtons() -->
                <!-- ko if: ko.unwrap($data.graph.source_identifier_id) && $data.publicationResourceInstanceCount() -->
                    <div style="display: flex;">
                        <input 
                            style="cursor: pointer; margin:0px;" 
                            id="update-resource-instance-data-checkbox" 
                            type="checkbox" 
                            data-bind="checked: $data.shouldUpdateResourceInstanceData" 
                        />

                        <label for="update-resource-instance-data-checkbox">
                            {% blocktrans %}
                                <h5 style="margin: 10px;">
                                    Checking this box will update all associated Resource Instance data automatically.
                                    This action requires celery to be running in the background.
                                    This action will follow the rules outlined <a href="">here.</a>
                                    <span style="color: red;">This action cannot be undone.</span>
                                </h5>
                            {% endblocktrans %}
                        </label>
                    </div>
                <!-- /ko -->

                <!-- ko if: $data.shouldShowGraphPublishButtons() -->
                <div style="align-self: flex-end; display: flex; padding-top: 10px;">
                    <button 
                        class="btn btn-sm btn-danger btn-labeled fa fa-times" 
                        data-bind="visible: $data.shouldShowPublishModal, click: function() { $data.shouldShowPublishModal(false); }"
                    >
                        <span>{% trans "Cancel" %}</span>
                    </button>

                    <button 
                        class="btn btn-sm btn-primary btn-labeled fa fa-check" 
                        data-bind="click: $data.shouldShowUpdatePublishedGraphsButton() ? $data.updatePublishedGraphs : $data.publishGraph"
                    >
                        <!-- ko if: $data.shouldShowUpdatePublishedGraphsButton() -->
                        <span>{% trans "Update Published Graphs" %}</span>
                        <!-- /ko -->
                        <!-- ko ifnot: $data.shouldShowUpdatePublishedGraphsButton() -->
                        <span>{% trans "Publish" %}</span>
                        <!-- /ko -->
                    </button>
                </div>
                <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</div>
<div class="content-panel">
    <!-- Title Block -->
    <div class="ep-form-toolbar">

        <h4 class="ep-form-toolbar-title" style="display: flex;">
            <!-- 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>

            <!-- ko ifnot: ko.unwrap($data.graph.source_identifier_id) -->
                <div class="graph-active-switch-container">
                    <div 
                        style="display: flex; justify-content: center;"
                        data-bind="component: {
                            name: 'views/components/simple-switch',
                            params: {
                                value: $data.isGraphActive,
                            }
                        }"
                    ></div>
                    <!-- ko if: $data.isGraphActive() -->
                        <span 
                            style="font-size: 14px;" 
                            data-bind="text: $data.graph.isresource() ? {% quoted_trans 'Model state: Active'%} : {% quoted_trans 'Branch state: Active'%}"
                        ></span>
                    <!-- /ko -->
                    <!-- ko ifnot: $data.isGraphActive() -->
                        <span 
                            style="font-size: 14px;" 
                            data-bind="text: $data.graph.isresource() ? {% quoted_trans 'Model state: Inactive'%} : {% quoted_trans 'Branch state: Inactive'%}"
                        ></span>
                    <!-- /ko -->
                </div>
            <!-- /ko-->
        </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>
                    <button class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click: graphSettingsViewModel.save"><span>{% trans "Save Edits" %}</span></button>
                <!-- /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>
                    <button class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click: saveSelectedNode"><span>{% trans "Save Edits" %}</span></button>
                <!-- /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(){$parent.hasDirtyWidget(false); $data.reset();}"><span>{% trans "Discard Card Edits" %}</span></button>
                    <button class="btn btn-sm btn-primary btn-labeled fa fa-check" data-bind="click: function(){$parent.hasDirtyWidget(false); $parent.saveCardEdits($data);}"><span>{% trans "Save Card Edits" %}</span></button>
                <!-- /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.hasDirtyWidget(false); $data.reset();}"><span>{% trans "Discard Card Edits" %}</span></button>
                    <button class="btn btn-md btn-primary btn-labeled fa fa-check" data-bind="click: function(){$parent.hasDirtyWidget(false); $data.save();}"><span>{% trans "Save Card Edits" %}</span></button>
                <!-- /ko -->
            </span>
            <!-- /ko -->

            <!-- ko if: $data.shouldShowGraphPublishButtons() -->
                <!-- ko if: $data.graph.source_identifier_id() -->
                    <button class="btn btn-md btn-warning btn-labeled fa fa-undo" data-bind="click: $data.showRevertGraphAlert">
                        <span style="font-size: 14px;">{% trans 'Revert All Changes'%}</span>
                    </button>
                    <button class="btn btn-md btn-primary btn-labeled fa fa-check" data-bind="click: function() { $data.shouldShowPublishModal(true); }">
                        <span style="font-size: 14px;">{% trans 'Publish Draft'%}</span>
                    </button>
                <!-- /ko -->
                <!-- ko ifnot: $data.graph.source_identifier_id() -->
                    <button class="btn btn-md btn-warning btn-labeled fa fa-undo" data-bind="click: $data.showRestoreStateFromSerializedGraphAlert">
                        <span style="font-size: 14px;">{% trans 'Revert All Changes'%}</span>
                    </button>
                    <button class="btn btn-md btn-primary btn-labeled fa fa-check" data-bind="click: $data.showUpdatePublishedGraphsModal">
                        <span style="font-size: 14px;">{% trans 'Update Publication'%}</span>
                    </button>
                <!-- /ko -->
            <!-- /ko -->
            <!-- ko if: graph.source_identifier_id() -->
                <button class="btn btn-md btn-danger btn-labeled fa fa-trash" data-bind="click: showDeleteDraftGraphAlert">
                    <span>{% trans 'Abandon Draft' %}</span>
                </button>
            <!-- /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',
                                        'disabled-graph-designer-tab': graph.source_identifier_id()
                                    },
                                    click: function() {
                                        if (!graph.source_identifier_id()) {
                                            activeTab('permissions');
                                        }
                                    },
                                    attr: { title: graph.source_identifier_id() ? &quot;{% trans "Disabled during drafting" %}&quot; : null }
                                "
                            >
                                <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"
                data-bind="css: { 'draft-graph': $data.graph.source_identifier_id() }"
            >
                <div class="graph-designer-title">
                    <div class="name">
                        <span class="">{% trans "Card Designer" %}</span>
                    </div>
                </div>
                
                <!-- ko if: $data.graph.source_identifier_id() -->
                <div class="settings-panel-draft-label">
                    <i class="fa fa-pencil-square-o" style="margin-right: 5px;"></i>
                    <span>{% trans "DRAFT" %}</span>
                </div>
                <!-- /ko -->
            </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}},
        "source_graph_id": "{{source_graph_id}}",
        "publication_resource_instance_count": {{publication_resource_instance_count}},
        "ontology_namespaces": "{{ontology_namespaces}}",
        "branches": {{branches}},
        "cards": {{cards}},
        "constraints": {{constraints}},
        "cardwidgets": {{cardwidgets}},
        "widgets": {{widgets_json}},
        "cardComponents": {{card_components_json}},
        "appliedFunctions": {{applied_functions}},
    }'
></div>
{% endblock pre_require_js %}
