{% extends "views/components/widgets/base.htm" %}
{% load i18n %}

{% block form %}
<!--ko let: {self: $data} -->
<!-- ko ifnot: self.displayOntologyTable -->
<div class="row" style="margin: 0px;">
    <div class="col-xs-12 resource-instance-wrapper">
        <input style="width:30%; display:inline-block;"
            data-bind="
                select2Query: {
                    select2Config: select2Config
                }
            ">
    </div>
</div>
<!-- /ko -->
<!-- ko if: self.displayOntologyTable -->
<div class="row widget-wrapper" data-bind="visible: !newResourceInstance()">
    <div class="form-group">
        <label class="control-label widget-input-label" data-bind="text:label">
        </label>
        <!-- ko if: node -->
        <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
        <!-- /ko -->

        <div class="row" style="margin: 0px;">
            <div class="col-xs-12 resource-instance-wrapper">
                <input style="width:30%; display:inline-block;"
                    data-bind="
                        select2Query: {
                            select2Config: select2Config
                        }
                    ">
            </div>

        </div>
    </div>

    <div class="rr-widget">
        <!-- ko if: !!value() && value().length > 5-->
        <div class="rr-widget-filter-panel">
            <div class="list-filter">
                <input type="text" class="form-control" style="width: 225px; height:28px;" placeholder="{% trans 'filter...' %}" data-bind="textInput: filter"></input>
                <span class="clear-node-search" data-bind="visible: filter().length > 0, click: function() { filter('');}"><i class="fa fa-times-circle"></i></span>
            </div>
        </div>
        <!-- /ko -->

        <!-- ko if: relationshipsInFilter().length > 0-->
        <div class="rr-table">
            <div data-bind='foreach: relationshipsInFilter' style="display: flex; flex-direction: column;">
                <div class='rr-table-row'>
                    <div class="rr-table-row-initial">
                        <div class='rr-table-column icon-column'>
                            <button data-bind="click: function(){window.open($parent.resourceEditorUrl+ko.unwrap($data.resourceId))}, clickBubble: false">
                                <i class="fa fa-pencil"></i>
                            </button>
                        </div>
                        <div class='rr-table-column icon-column'>
                            <button data-bind="click: $parent.deleteRelationship, clickBubble: false">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                        <div class='rr-table-column icon-column'>
                            <button data-bind="click:function(){self.reportResourceId(ko.unwrap($data.resourceId));}, clickBubble: false">
                                <i class="fa fa-info-circle"></i>
                            </button>
                        </div>
                        <div class="rr-table-column" style="flex-grow: 1; cursor: pointer;" data-bind="click: function() { self.toggleSelectedResourceRelationship($data); }, clickBubble: false">
                            <div class="rr-table-instance-label" style="padding-left: 10px;" data-bind="text: $data.resourceName()">
                            </div>
                        </div>
                    </div>
                    <div class="rr-table-row-panel"
                        data-bind="visible: self.selectedResourceRelationship() === $data, if: self.selectedResourceRelationship() === $data, css: { 'rr-table-border': self.selectedResourceRelationship() === $data} ">

                        <div class="row">
                            <!-- Relationship from instance to rr -->
                            <div class="row" style="margin-bottom: 10px;">
                                <label class="col-xs-12" style="font-weight: bold; text-align: left;">{% trans "Resource's relationship to" %} <span data-bind="text: $data.resourceName"></span></label>

                                <div class="row" style="padding: 0px 12px; margin-bottom: 10px;">
                                    <!-- Instance name -->
                                    <span class="col-xs-12" style="text-align: left;"
                                        data-bind="text: self.resourceInstanceDisplayName + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'">
                                    </span>

                                    <!-- Property -->
                                    <span class="col-xs-12">
                                        <input style="max-width:100%; display:inline-block; margin: 3px 0px;" data-bind="
                                        select2Query: {
                                            select2Config: self.getSelect2ConfigForOntologyProperties($data.ontologyProperty, self.rootOntologyClass, $data.ontologyClass(), '{% trans 'Select an Ontology Property' %}')}">
                                    </span>

                                    <!-- rr name -->
                                    <span class="col-xs-12" data-bind="text: $data.resourceName() + ' (' + self.makeFriendly($data.ontologyClass()) + ')'"></span>
                                </div>
                            </div>

                            <!-- Relationship from rr to instance -->
                            <div class="row">
                                <label class="col-xs-12" style="font-weight: bold;"><span data-bind="text: $data.resourceName"></span>{% trans "'s relationship to Resource" %} </label>

                                <div class="row" style="padding: 0px 12px; margin-bottom: 10px;">
                                    <!-- rr name -->
                                    <span class="col-xs-12" style="text-align: left;"
                                        data-bind="text: $data.resourceName() + ' (' + self.makeFriendly($data.ontologyClass()) + ')'">
                                    </span>

                                    <!-- Property -->
                                    <span class="col-xs-12">
                                        <input style="width:100%; display:inline-block; margin: 3px 0px;" data-bind="
                                        select2Query: {
                                            select2Config: self.getSelect2ConfigForOntologyProperties($data.inverseOntologyProperty, $data.ontologyClass(), self.rootOntologyClass, '{% trans 'Select an Ontology Property' %}')}">
                                    </span>

                                    <!-- Instance name -->
                                    <span class="col-xs-12" data-bind="text: self.resourceInstanceDisplayName + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>

    <div data-bind="if: !!value() && value().hasOwnProperty('length') && value().length > 1">
        <div class='file-workbench-filecount' data-bind='text: value().length + "{% trans ' relationship(s)' %}"'></div>
    </div>

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


<div class="create-resource-instance-card-component rr-table-pop"
    data-bind="with: newResourceInstance, style: {transform: !!newResourceInstance() ? 'translate(0,0)' : 'translate(100%,0)'}">
    <!-- ko component: {
        name: 'related-instance-creator',
        params: {...$data, graphName: $parent.graphLookup[graphid].name}
    } --><!--/ko -->
</div>


<div class="create-resource-instance-card-component rr-table-pop"
    data-bind="style: {transform: !!reportResourceId() ? 'translate(0,0)' : 'translate(100%,0)'}">
    <div class="create-instance-header" style="display: flex; justify-content: space-between;">{% trans "Related Resource Summary" %}
        <div data-bind="click: function(){reportResourceId(null)}, clickBubble: false" class="close-new-step">
            <i class="fa fa-times-circle"></i>
        </div>
    </div>
    <div class="create-instance-panel" data-bind="component: {
        name: 'resource-report-abstract',
        params: {
            resourceid: reportResourceId(),
            summary: true,
        }
    }"></div>
</div>

{% endblock form %}

{% block config_form %}
<div>
    <div class="control-label">
        {% trans "Placeholder" %}
    </div>
    <div class="col-xs-12 pad-no crud-widget-container">
        <input placeholder="{% trans "Placeholder" %}"
            class="form-control input-md widget-input"
            data-bind="value: placeholder, valueUpdate: 'keyup'">
    </div>
    <div class="control-label">
        {% trans "Default Value" %}
    </div>
    <!--ko let: {self: $data} -->
    <!-- ko ifnot: self.displayOntologyTable -->
    <div class="row" style="margin: 0px;">
        <div class="col-xs-12 resource-instance-wrapper">
            <input style="width:30%; display:inline-block;" data-bind="
                    select2Query: {
                        select2Config: select2Config
                    }
                ">
        </div>
    </div>
    <!-- /ko -->
    <!-- ko if: self.displayOntologyTable -->
    <div class="row widget-wrapper" data-bind="visible: !newResourceInstance()">
        <div class="form-group">
            <div class="row" style="margin: 0px;">
                <div class="col-xs-12 resource-instance-wrapper">
                    <input style="width:30%; display:inline-block;" data-bind="
                  
                            select2Query: {
                                select2Config: select2Config
                            }
                        ">
                </div>
            </div>
        </div>
    
        <div class="rr-widget">
            <!-- ko if: !!value() && value().length > 5-->
            <div class="rr-widget-filter-panel">
                <div class="list-filter">
                    <input type="text" class="form-control" style="width: 225px; height:28px;"
                        placeholder="{% trans 'filter...' %}" data-bind="textInput: filter"></input>
                    <span class="clear-node-search"
                        data-bind="visible: filter().length > 0, click: function() { filter('');}"><i
                            class="fa fa-times-circle"></i></span>
                </div>
            </div>
            <!-- /ko -->
    
            <!-- ko if: relationshipsInFilter().length > 0-->
            <div class="rr-table">
                <div data-bind='foreach: relationshipsInFilter' style="display: flex; flex-direction: column;">
                    <div class='rr-table-row'>
                        <div class="rr-table-row-initial">
                            <div class='rr-table-column icon-column'>
                                <button
                                    data-bind="click: function(){window.open($parent.resourceEditorUrl+ko.unwrap($data.resourceId))}, clickBubble: false">
                                    <i class="fa fa-pencil"></i>
                                </button>
                            </div>
                            <div class='rr-table-column icon-column'>
                                <button data-bind="click: $parent.deleteRelationship, clickBubble: false">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                            <div class='rr-table-column icon-column'>
                                <button
                                    data-bind="click:function(){self.reportResourceId(ko.unwrap($data.resourceId));}, clickBubble: false">
                                    <i class="fa fa-info-circle"></i>
                                </button>
                            </div>
                            <div class="rr-table-column" style="flex-grow: 1; cursor: pointer;"
                                data-bind="click: function() { self.toggleSelectedResourceRelationship($data); }, clickBubble: false">
                                <div class="rr-table-instance-label" style="padding-left: 10px;"
                                    data-bind="text: $data.resourceName()">
                                </div>
                            </div>
                        </div>
                        <div class="rr-table-row-panel"
                            data-bind="visible: self.selectedResourceRelationship() === $data, if: self.selectedResourceRelationship() === $data, css: { 'rr-table-border': self.selectedResourceRelationship() === $data} ">
    
                            <div class="row">
                                <!-- Relationship from instance to rr -->
                                <div class="row" style="margin-bottom: 10px;">
                                    <label class="col-xs-12" style="font-weight: bold; text-align: left;">{% trans "Resource's relationship to" %} <span
                                            data-bind="text: $data.resourceName"></span></label>
    
                                    <div class="row" style="padding: 0px 12px; margin-bottom: 10px;">
                                        <!-- Instance name -->
                                        <span class="col-xs-12" style="text-align: left;"
                                            data-bind="text: self.resourceInstanceDisplayName + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'">
                                        </span>
    
                                        <!-- Property -->
                                        <span class="col-xs-12">
                                            <input style="max-width:100%; display:inline-block; margin: 3px 0px;"
                                                data-bind="
                                            select2Query: {
                                                select2Config: self.getSelect2ConfigForOntologyProperties($data.ontologyProperty, self.rootOntologyClass, $data.ontologyClass(), '{% trans 'Select an Ontology Property' %}')}">
                                        </span>
    
                                        <!-- rr name -->
                                        <span class="col-xs-12"
                                            data-bind="text: $data.resourceName() + ' (' + self.makeFriendly($data.ontologyClass()) + ')'"></span>
                                    </div>
                                </div>
    
                                <!-- Relationship from rr to instance -->
                                <div class="row">
                                    <label class="col-xs-12" style="font-weight: bold;"><span
                                            data-bind="text: $data.resourceName"></span>{% trans "'s relationship to Resource" %} </label>
    
                                    <div class="row" style="padding: 0px 12px; margin-bottom: 10px;">
                                        <!-- rr name -->
                                        <span class="col-xs-12" style="text-align: left;"
                                            data-bind="text: $data.resourceName() + ' (' + self.makeFriendly($data.ontologyClass()) + ')'">
                                        </span>
    
                                        <!-- Property -->
                                        <span class="col-xs-12">
                                            <input style="width:100%; display:inline-block; margin: 3px 0px;"
                                                data-bind="
                                            select2Query: {
                                                select2Config: self.getSelect2ConfigForOntologyProperties($data.inverseOntologyProperty, $data.ontologyClass(), self.rootOntologyClass, '{% trans 'Select an Ontology Property' %}')}">
                                        </span>
    
                                        <!-- Instance name -->
                                        <span class="col-xs-12"
                                            data-bind="text: self.resourceInstanceDisplayName + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'">
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /ko -->
        </div>
    
        <div data-bind="if: !!value() && value().hasOwnProperty('length') && value().length > 1">
            <div class='file-workbench-filecount' data-bind='text: value().length + "{% trans ' relationship(s)' %}"'></div>
        </div>
    
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>
{% endblock config_form %}

{% block report %}
<dt data-bind="text: label"></dt>
<!-- ko foreach: value -->
<dd>
    <a data-bind="text: resourceName, attr: { href: $parent.resourceReportUrl+ko.unwrap(resourceId) }" target="_blank"></a>
</dd>
<!-- /ko -->
<!-- ko if: (!!value() && value().length === 0) || value() === null -->
<dd>{% trans "None" %}</dd>
<!-- /ko -->
{% endblock report %}
