{% extends "views/components/widgets/resource-instance-select.htm" %}
{% load i18n %}
{% block form %}
<!--ko let: {self: $data} -->
<!-- ko ifnot: self.displayOntologyTable -->
<div class="row" style="margin: 0px;display:none;" 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 style="display:none" 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>
<button class="btn btn-primary" data-bind="click: function(){newResource();}">{% trans "New Physical Thing" %}</button>
{% endblock form %}

