{% load staticfiles %}
{% load i18n %}
<h4 class="title-block-title">
    <span class="node-title" data-bind="text: (node() && node().name()) ? node().name() : '{% trans "Unnamed node" %}'"></span>
</h4>

<div class="relative">
    <a id="node-crud-close" href="javascript:void(0)" class="library-close-btn" data-bind="click: close" style="margin-top:-5px;"><i class="ion-ios-close"></i></a>
</div>

<!-- nav bar -->
<ul class="nav nav-tabs library-tools">
    <li class="active">
        <a href="#node-form" class="nav-library-tab-link" data-toggle="tab">
            <i class="ion-ios-cog add-tooltip library-tools-icon" data-placement="bottom" data-toggle="tooltip" data-original-title="{% trans "Settings" %}"></i>
        </a>
    </li>
    <li>
        <a href="#branch-library" class="nav-library-tab-link" data-toggle="tab" data-bind="visible: node() && !node().dirty()">
            <i class="ion-ios-plus add-tooltip library-tools-icon" data-placement="bottom" data-toggle="tooltip" data-original-title="{% trans "Add Child Nodes" %}"></i>
        </a>
    </li>
    <li data-bind="visible: node() && !node().istopnode">
       <a href="#" class="nav-library-tab-link" data-bind="click:deleteNode">
           <i class="ion-ios-trash add-tooltip library-tools-icon" data-placement="bottom" data-toggle="tooltip" data-original-title="{% trans "Delete Node" %}"></i>
       </a>
   </li>
</ul>


<!-- Tabs Content -->
<div class="tab-content listing-container">

    <!--Node Listing tab -->

    <div id="node-form" class="tab-pane fade in active">
        <!-- ko if: node() -->
        <div class="node-section">

            <div>

                <div class="node-widget-label">
                    <div class="control-label">
                        {% trans "Node Name" %}
                    </div>
                    <div>
                        <input type="text" placeholder="{% trans "Enter node name here..." %}"class="form-control library-search" style="" placeholder="{% trans "node name" %}" data-bind="value:node().name, valueUpdate: 'keyup'">
                    </div>
                </div>

                <!-- ko if: hasOntolgoy -->
                <div class="node-widget-label">
                    <div class="control-label">
                        {% trans "CRM Class" %}
                    </div>
                    <div>
                        <select class="design" data-bind="value: node().ontologyclass, options: node().validclasses, optionsText: node().getFriendlyOntolgyName.bind(node()), valueAllowUnset: true, optionsCaption: '{% trans "Choose a class" %}', chosen: {disable_search_threshold: 10, width: '100%'}"></select>
                    </div>
                </div>

                <!-- ko if: !node().istopnode -->
                <div class="node-widget-label">
                    <div class="control-label">
                        {% trans "Relationship from" %} <span data-bind="text: graphModel.getParentNode(node()).name"></span>
                    </div>
                    <div>
                        <select class="design" data-bind="value: node().parentproperty, options: node().validproperties, optionsText: node().getFriendlyOntolgyName.bind(node()), valueAllowUnset: true, optionsCaption: '{% trans "Choose a property" %}', chosen: {disable_search_threshold: 10, width: '100%'}"></select>
                    </div>
                </div>

                <div style="margin-bottom:10px;">
                    <div class="">
                        (<strong data-bind="text: graphModel.getParentNode(node()).name"></strong>
                    </div>
                    <div class="">
                        <em data-bind="text: node().parentproperty_friendlyname"></em>
                    </DIV>
                    <div class="">
                        <strong data-bind="text: node().name"></strong>)
                    </div>
                </div>

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

                <div class="node-widget-label">
                    <div class="control-label">
                        {% trans "Data type" %}
                    </div>
                    <div>
                        <select class="design" data-bind="disable: disableDatatype(), value: node().datatype, options: datatypes, optionsCaption: '{% trans "Choose a data type" %}', chosen: {disable_search_threshold: 10, width: '100%'}"></select>
                    </div>
                </div>

                <!-- ko if: node().datatypeIsSearchable() -->
                <div class="node-widget-label">
                    <span class="switch switch-small arches-switch" data-bind="css: {'on': node().issearchable()}, click: function () { node().issearchable(!node().issearchable()); }"><small></small></span>

                    <p class="control-label" style="margin-left: 40px; margin-top: -17px; margin-bottom: 0px;">
                        {% trans "Searchable" %}
                    </p>
                    <span style="margin-left: 40px; display: inline-block; color: #8ba2b9; font-size: 10px;">
                        {% trans "Activate to allow searches on values stored for this node." %}
                    </span>
                </div>
                <!-- /ko -->

                <!-- ko if: node().datatypeConfigComponent -->
                <div data-bind='component: {
                    name: node().datatypeConfigComponent,
                    params: node()
                }'></div>
                <!-- /ko -->

            </div>

        </div>

        <hr class="section-division-dark node-section-division">

        <!-- ko if: node().datatypeIsSearchable() -->
        <div class="node-section switch-panel" data-bind="css: {'disabled': checkIfImmutable()}">
            <span class="switch switch-small arches-switch" data-bind="css: {'on': node().isrequired(), 'disabled': checkIfImmutable()}, click: toggleRequired"><small></small></span>

            <p class="control-label" style="margin-left: 40px; margin-top: -17px; margin-bottom: 0px;">
                {% trans "Required" %}
            </p>
            <span style="margin-left: 40px; display: inline-block; color: #8ba2b9; font-size: 10px;">
                {% trans "Activate to require that data be collected for this node when a card value is edited" %}
            </span>
        </div>
        <!-- /ko -->

        <!-- ko if: node() && !isResourceTopNode() -->
        <div class="node-section switch-section" data-bind="css: {'disabled': disableIsCollector()}">

            <div style="padding-top: 5px; padding-bottom: 15px;">

                <span class="switch switch-small arches-switch" data-bind="css: {'on': node().isCollector()}, click: toggleIsCollector"><small></small></span>

                <p class="control-label" style="margin-left: 40px; margin-top: -17px; margin-bottom: 0px;">
                    <span data-bind="text: (node().nodeGroupId() && !node().isCollector() || graphModel.isNodeInChildGroup(node())) ? '{% trans "Make sub-card" %}' : '{% trans "Make card" %}'"></span>
                </p>
                <span style="margin-left: 40px; display: inline-block; color: #8ba2b9; font-size: 10px;">
                    <!-- ko if: node().istopnode -->
                    {% trans "Data from nodes not collected in other cards will be collected in the root card's form section" %}
                    <!-- /ko -->
                    <!-- ko if: !node().istopnode -->
                    {% trans "Data from this node and downstream nodes will be collected in a single form section" %}
                    <!-- /ko -->
                </span>

            </div>

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


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

    <!--Branch Library tab -->
    <div id="branch-library" class="tab-pane fade">
        <!-- ko if: node() -->
        <div data-bind="with: branchListView">
            {% include 'views/graph/graph-manager/branch-list.htm' %}
        </div>
        <!-- /ko -->
    </div>

</div>