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

{% block form %}
<!--ko let: {self: $data} -->
<!-- ko ifnot: self.displayOntologyTable -->
<div class="row" style="margin: 0px;" data-bind="class: nodeCssClasses">
    <div class="col-xs-12 resource-instance-wrapper">
        <select style="width:30%; display:inline-block;"
            data-bind="
                select2Query: {
                    select2Config: select2Config
                },
                attr: {'data-label': label, 'aria-label': label}
            "></select>
    </div>
</div>
<!-- /ko -->
<!-- ko if: self.displayOntologyTable -->
<div class="row widget-wrapper" data-bind="visible: !newResourceInstance(), class: nodeCssClasses">
    <div class="form-group">
        <span class="control-label widget-input-label" data-bind="text:label"></span>
        <!-- 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">
                <select style="width:30%; display:inline-block;"
                    data-bind="
                        select2Query: {
                            select2Config: select2Config
                        },
                        attr: {'data-label': label, 'aria-label': label}
                    "></select>
            </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;"
                    data-bind="
                        attr: {placeholder: $root.translations.filter + '...', 'aria-label': $root.translations.filter}, 
                        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,
                                    attr: {'aria-label': $root.translations.editRelatedResource($data.resourceName())}
                            ">
                                <i class="fa fa-pencil"></i>
                            </button>
                        </div>
                        <div class='rr-table-column icon-column'>
                            <button data-bind="click: $parent.deleteRelationship, clickBubble: false,
                                    attr: {'aria-label': $root.translations.deleteRelationshipResource($data.resourceName())}
                            ">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                        <div class='rr-table-column icon-column'>
                            <button data-bind="click:function(){self.openReport(ko.unwrap($data.resourceId)) }, clickBubble: false,
                                    attr: {'aria-label': $root.translations.expandResourceReport($data.resourceName())}
                            ">
                                <i class="fa fa-info-circle"></i>
                            </button>
                        </div>
                        <!-- ko if: self.relationship() -->
                        <div class="rr-table-column" style="flex-grow: 1; cursor: pointer;" tabindex="0" role="button" 
                            data-bind="onEnterkeyClick, onSpaceClick, click: function() { self.toggleSelectedResourceRelationship($data); }, clickBubble: false,
                                attr: {'aria-label': $root.translations.expandRelatioshipOntologyOptions($parent.resourceInstanceDisplayName, $data.resourceName()) }
                            ">
                            <div class="rr-table-instance-label">
                                <i class="sm-icon-wrap" data-bind="css: $data.iconClass()"></i><span data-bind="text: $data.resourceName()"></span>
                            </div>
                        </div>
                        <!-- /ko -->
                        <!-- ko ifnot: self.relationship() -->
                        <div class="rr-table-column" style="flex-grow: 1; cursor: pointer;">
                            <div class="rr-table-instance-label">
                                <i class="sm-icon-wrap" data-bind="css: $data.iconClass()"></i><span data-bind="text: $data.resourceName()"></span>
                            </div>
                        </div>
                        <!-- /ko -->
                    </div>
                    <!-- Ontology Properties Accordion -->
                    <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" data-bind="let: {resourceToRRLabel: Math.random().toString(), rrToResourceLabel: Math.random().toString()}">
                            <!-- Relationship from instance to rr -->
                            <div class="row" style="margin-bottom: 10px;">
                                <div class="col-xs-12" style="font-weight: bold; text-align: left; margin-bottom:5px;" data-bind="attr: {id: resourceToRRLabel}">
                                    <span data-bind="text: $root.translations.resourcesRelationshipTo"></span>
                                    <span data-bind="text: $data.resourceName"></span>
                                </div>

                                <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">
                                        <select 
                                            style="max-width:100%; display:inline-block; margin: 3px 0px;" 
                                            data-bind="
                                                select2Query: {
                                                    select2Config: self.getSelect2ConfigForOntologyProperties(
                                                        $data.ontologyProperty,
                                                        self.rootOntologyClass,
                                                        $data.ontologyClass(),
                                                        $root.translations.selectAnOntologyProperty
                                                    )
                                                },
                                                attr: {'aria-labeledby': resourceToRRLabel},
                                            "
                                        ></select>
                                    </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">
                                <div class="col-xs-12" style="font-weight: bold; margin-bottom:5px;" data-bind="attr: {id: rrToResourceLabel }">
                                    <span data-bind="text: $data.resourceName"></span>
                                    <span data-bind="text: $root.translations.relationshipToResource"></span>
                                </div>

                                <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">
                                        <select 
                                            style="width:100%; display:inline-block; margin: 3px 0px;" 
                                            data-bind="
                                                select2Query: {
                                                    select2Config: self.getSelect2ConfigForOntologyProperties(
                                                        $data.inverseOntologyProperty,
                                                        $data.ontologyClass(),
                                                        self.rootOntologyClass,
                                                        $root.translations.selectAnOntologyProperty
                                                    )
                                                },
                                                attr: {'aria-labeledby': rrToResourceLabel},
                                            "
                                        ></select>
                                    </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 + $root.translations.relationships'></div>
    </div>

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

<div class="create-resource-instance-card-component rr-table-pop" id="resource-creator-panel"
    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" id="resource-report-panel"
    data-bind="style: {transform: !!reportResourceId() ? 'translate(0,0)' : 'translate(100%,0)'}">

    <!-- ko if: reportResourceId -->
    <div class="create-instance-header" style="display: flex; justify-content: space-between;">
        <span data-bind="text: $root.translations.relatedResourceSummary"></span>

        <div data-bind="click: function(){reportResourceId(null)}, clickBubble: false" class="close-new-step">
            <button class="btn btn-labeled btn-lg fa fa-arrow-right btn-primary">
                <span data-bind="text: $root.translations.return"></span>
            </button>
        </div>
    </div>
    <div class="create-instance-panel" data-bind="component: {
        name: 'resource-report-abstract',
        params: {
            resourceid: reportResourceId(),
            summary: true,
        }
    }"></div>
    <!-- /ko -->
</div>

{% endblock form %}

{% block config_form %}
<div>
    <div class="control-label">
        <span data-bind="text: $root.translations.placeholder"></span>
    </div>
    <div class="col-xs-12 pad-no crud-widget-container">
        <input
            class="form-control input-md widget-input"
            data-bind="
                attr: {placeholder: $root.translations.placeholder, 'aria-label': $root.translations.placeholder},
                value: placeholder, 
                valueUpdate: 'keyup'
            "
        >
    </div>
    <div class="control-label">
        <span data-bind="text: $root.translations.defaultValue"></span>
    </div>
    <!--ko let: {self: $data} -->
    <!-- ko ifnot: self.displayOntologyTable -->
    <div class="row" style="margin: 0px;">
                <div class="col-xs-12 resource-instance-wrapper">
            <select style="width:30%; display:inline-block;" data-bind="
                    select2Query: {
                        select2Config: select2Config
                    },
                    attr: {'aria-label': $root.translations.defaultValue, 'data-label': $root.translations.defaultValue}
                ">
            </select>
        </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">
                    <select style="width:30%; display:inline-block;" data-bind="                 
                            select2Query: {
                                select2Config: select2Config
                            },
                            attr: {'aria-label': $root.translations.defaultValue, 'data-label': $root.translations.defaultValue}
                        ">
                    </select>
                </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;"
                        data-bind="
                            attr: {placeholder: $root.translations.filter + '...', 'aria-label': $root.translations.filter},
                            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="onEnterkeyClick, onSpaceClick, click: function(){window.open($parent.resourceEditorUrl+ko.unwrap($data.resourceId))}, clickBubble: false,
                                        attr: {'aria-label': $root.translations.editRelatedResource($data.resourceName())}
                                ">
                                    <i class="fa fa-pencil"></i>
                                </button>
                            </div>
                            <div class='rr-table-column icon-column'>
                                <button data-bind="onEnterkeyClick, onSpaceClick, click: $parent.deleteRelationship, clickBubble: false,
                                        attr: {'aria-label': $root.translations.deleteRelationshipResource($data.resourceName())}
                                ">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                            <div class='rr-table-column icon-column'>
                                <button data-bind="onEnterkeyClick, onSpaceClick, click:function(){self.reportResourceId(ko.unwrap($data.resourceId));}, clickBubble: false,
                                        attr: {'aria-label': $root.translations.expandResourceReport($data.resourceName())}    
                                ">
                                    <i class="fa fa-info-circle"></i>
                                </button>
                            </div>
                            <div class="rr-table-column" style="flex-grow: 1; cursor: pointer;" tabindex="0" role="button"
                                data-bind="onEnterkeyClick, onSpaceClick, click: function() { self.toggleSelectedResourceRelationship($data); }, clickBubble: false,
                                    attr: {'aria-label': $root.translations.expandRelatioshipOntologyOptions($parent.resourceInstanceDisplayName, $data.resourceName()) }
                                ">
                                <div class="rr-table-instance-label" data-bind="text: $data.resourceName()">
                                </div>
                            </div>
                        </div>
                        <!-- Ontology Properties Accordion -->
                        <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" data-bind="let: {resourceToRRLabel: Math.random().toString(), rrToResourceLabel: Math.random().toString()} ">
                                <!-- Relationship from instance to rr -->
                                <div class="row" style="margin-bottom: 10px;">
                                    <div class="col-xs-12" style="font-weight: bold; text-align: left; margin-bottom:5px;"  data-bind="attr: {id: resourceToRRLabel}">
                                        <span data-bind="text: $root.translations.resourcesRelationshipTo"></span>
                                        <span data-bind="text: $data.resourceName"></span>
                                    </div>
    
                                    <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">
                                            <select 
                                                style="max-width:100%; display:inline-block; margin: 3px 0px;"
                                                data-bind="
                                                    select2Query: {
                                                        select2Config: self.getSelect2ConfigForOntologyProperties(
                                                            $data.ontologyProperty,
                                                            self.rootOntologyClass,
                                                            $data.ontologyClass(),
                                                            $root.translations.selectAnOntologyProperty
                                                        )
                                                    },
                                                    attr: {'aria-labeledby': resourceToRRLabel} ">
                                            </select>
                                        </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">
                                    <div class="col-xs-12" style="font-weight: bold; margin-bottom:5px;" data-bind="attr: {id: rrToResourceLabel }">
                                        <span data-bind="text: $data.resourceName"></span>
                                        <span data-bind="text: $root.translations.relationshipToResource"></span>
                                    </div>
    
                                    <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">
                                            <select 
                                                style="width:100%; display:inline-block; margin: 3px 0px;"
                                                data-bind="
                                                    select2Query: {
                                                        select2Config: self.getSelect2ConfigForOntologyProperties(
                                                            $data.inverseOntologyProperty,
                                                            $data.ontologyClass(),
                                                            self.rootOntologyClass,
                                                            $root.translations.selectAnOntologyProperty
                                                        )
                                                    },
                                                    attr: {'aria-labeledby': rrToResourceLabel}">
                                            </select>
                                        </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 + $root.translations.relationships'></div>
        </div>

    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>
{% endblock config_form %}

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