<!--
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 "Graphs" %}
{% endblock title %}


{% block main_content %}
<div class="scroll-y">
    <div class="graph-list-header" data-bind="css: {'alert-active': (alert() && alert().active())}">

        <!-- Toolbar -->
        <div class="resource-toolbar">
            <div>
                <!-- Search -->
                <div class="edit-panel-search-bar">

                    <!-- Find Button -->
                    <div class="">
                        <a class="page-header text-overflow graph-find" href="#" data-bind="click: function () { showFind(!showFind()) }"> {% trans "Find" %} </a>
                    </div>

                    <!-- Find widget -->
                    <div class="find-widget" style="display: none;" data-bind="visible: showFind()">
                        <div>
                            <!-- 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>
                    </div>
                </div>

                <!-- Resource/Graph Toggle -->
                <div class="resource-tools" data-bind="visible: !showFind()">
                    <a class="resource-grid-title" href="javascript:void(0);" data-bind="css: {'active': showResources()}, click: function () { showResources(true) }">{% trans "Resource Models" %}</a>
                    <a class="resource-grid-title" href="javascript:void(0);" data-bind="css: {'active': !showResources()}, click: function () { showResources(false) }">{% trans "Branches" %}</a>
                </div>
            </div>

            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">
                    {% trans "Add" %} <i class="ion-more"></i>
                </button>
                <ul class="dropdown-menu" data-bind="event: {mouseleave: leaveDropdown}">
                    <li><a href="#" data-bind="click: newResource">{% trans "New Resource Model" %}</a></li>
                    <li><a href="#" data-bind="click: newGraph">{% trans "New Branch" %}</a></li>
                    <li class="file-upload upload">
                            <form id="data">
                                <input type="file" class="upload" id="fileupload" data-bind="event: {change: importGraph}" accept=".json"/>
                            </form>
                            <a href="#" class="arches-tool-item file-upload" data-bind="{click: importButtonClick}">{% trans "Import Branch/Resource Model" %}</a>
                    </li>
                </ul>
            </div>
        </div>


    </div>


    <!-- Default Page content-->
    <div id="page-content" style="padding: 0 50px 240px; margin-top: -1px;">

        <div id="report-image-grid" class="report-image-grid">

            <!-- ko foreach: currentList -->
            <div class="resource-grid-item" style="display: flex;">
                <!-- Resource Type -->
                <a style="flex: 1" href="#" data-bind="click:function(){ $parent.navigate($parent.arches.urls.graph_designer(graphid)) }, attr: { href: $parent.arches.urls.graph_designer(graphid) }">
                    <div class="resource-grid-main-container" data-bind="hover: hover, css: {active: hover}, event: {mouseleave: $parent.leaveDropdown}">
                        <div class="resource-grid-main">
                            <div style="display: flex;">
                                <h1 class="page-header text-overflow resource-grid-title">
                                    <i data-bind="css: (iconclass() || 'fa fa-question') + ' icon-wrap resource-grid-icon' + (hover() ? ' resource-grid-icon-highlight':'')"></i> 
                                    <span data-bind="text: name"></span>
                                </h1>
                                <!-- ko if: $data.has_unpublished_changes -->
                                <div style="display: flex; align-items: center; color: darkred;">( {% trans "Has unpublished changes" %} )</div>
                                <!-- /ko -->
                            </div>
                            <p class="resource-grid-subtitle" data-bind='text:subtitle'></p>
                        </div>
                    </div>
                </a>

                <div class="resource-grid-tools-container" data-bind="hover: hover, css: {active: hover}, clickBubble: false">
                    <div class="btn-group">
                        <button class="btn btn-sm btn-mint dropdown-toggle graph-btn" data-toggle="dropdown" type="button" aria-expanded="false"> {% trans "Manage" %} <i class="ion-ios-more"></i></button>
                        <ul class="dropdown-menu manage-menu" data-bind="event: {mouseleave: $parent.leaveDropdown}">
                            <li>
                                <a 
                                    href="#" 
                                    data-bind="
                                        click:function() { $parent.navigate($parent.arches.urls.graph_designer(graphid)) }, 
                                        attr: { href: $parent.arches.urls.graph_designer(graphid) }
                                    "
                                >
                                    <i class="fa fa-sitemap"></i> 
                                    <span>{% trans "Manage Graph" %}</span>
                                </a>
                            </li>
                            <li>
                               <a 
                                   href="#" 
                                   data-bind="
                                       click:function () { $parent.navigate($parent.arches.urls.model_history(graphid)) }, 
                                       attr: { href: $parent.arches.urls.model_history(graphid)}
                                   "
                               >
                                   <i class="fa fa-calendar"></i> 
                                   <span>{% trans "View Model History" %}</span>
                               </a>
                           </li>
                            <!-- ko if: $parent.showResources() -->
                             <li>
                                <a 
                                    href="#" 
                                    data-bind="
                                        click:function () { $parent.navigate($parent.arches.urls.function_manager(graphid)) }, 
                                        attr: { href: $parent.arches.urls.function_manager(graphid)}
                                    "
                                >
                                    <i class="fa fa-code"></i> 
                                    <span>{% trans "Manage Functions" %}</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" data-bind="click:exportMappingFile"><i class="fa fa-file"></i> {% trans "Create Mapping File" %}</a>
                            </li>
                            <li>
                                <a href="#" data-bind="click:deleteInstances"><i class="fa fa-trash"></i> {% trans "Delete Instances" %}</a>
                            </li>
                            <!-- /ko -->
                            <li class="divider"></li>
                            <li><a href="#" data-bind="click:exportGraph">{% trans "Export Model" %}</a>
                            </li>
                            <li><a href="#" data-bind="click:clone">{% trans "Clone Model" %}</a>
                            </li>
                            <li><a href="#" data-bind="click:deleteGraph">{% trans "Delete Model" %}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="resource-status-label">
                        <div style="margin-top: 2px;">{% trans "Status:" %}</div>
                        <div 
                            style="
                                margin-left: 4px;
                                font-size: 13px;
                                font-weight: 600;
                                color: #123;
                            " 
                            data-bind="text: $data.is_active ? $root.translations.active : $root.translations.inactive"
                        ></div>
                    </div>
                </div>
            </div>
            <!-- /ko -->

        </div>

    </div>
</div>

{% endblock main_content %}

{% block pre_require_js %}
{{ block.super }}
<div 
    id="graphManagerData"
    style="display: none;"
    graphManagerData='{
        "root_nodes": {{ root_nodes }},
        "graphs": {{ graphs }},
    }'
></div>
{% endblock pre_require_js %}
