{% load static %} 
{% load i18n %} 
{% load template_tags %}
{% load webpack_static from webpack_loader %}


<!--ko let: {self: $data} -->
<!--ko if: resourceEditorContext && displaySplash()-->
<div id="rr-splash" class="rr-splash">

    <!-- Image -->
    <div class="img-lg img-circle rr-splash-img-container">
        <img class="rr-splash-img" src="{% webpack_static 'img/Workflow.png' %}" alt="Resource Editor">
    </div>

    <!-- Splash Title -->
    <div class="rr-splash-title">
        <span data-bind="text: $root.translations.relatedResourcesEditor"></span>
    </div>


    <button class="btn btn-shim btn-rr btn-labeled btn-lg fa fa-link" data-bind="click: function(){displaySplash(false)}">
        <span data-bind="text: $root.translations.addRelatedResources"></span>
    </button>

    <!-- Splash Instructions -->
    <div class="rr-splash-description">
        <span data-bind="text: $root.translations.relatedResourcesEditorDesc"></span>
    </div>

    <!-- Help Hyperlink -->
    <div class="rr-splash-help-link" data-bind="click: function(){$parent.helpTemplate('report-manager-help'); $parent.helpOpen(true);}">
        <span data-bind="text: $root.translations.showMeHow"></span>
    </div>
</div>
<!--/ko-->

<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;">
        <span data-bind="text: $root.translations.addRelatedResources"></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>
</div>

<!--ko if: !displaySplash()-->
{% block tabs %}
<div class="rr-viewer-selector">
    <div class="rr-viewer-selector-title" data-bind="click: function () { showGraph(false); },
        css: {'selected': !showGraph(), 'disabled': showGraph()
    }">
        <span data-bind="text: $root.translations.table"></span>
    </div>
    <div class="rr-viewer-selector-title" data-bind="click: function () { if (currentResource()){showGraph(true)}; },
        css: {'selected': showGraph(), 'disabled': !showGraph()
    }">
        <span data-bind="text: $root.translations.visualization"></span>
    </div>
</div>
{% endblock tabs %}

<div id="related-resources-drag-panel" style="overflow-y: hidden; position: relative;" class="related-resources-container">

    <!-- Target -->
    <div id="rr-manager-content-id" class="rr-drag-panel-target" data-bind="style: {'margin-bottom': containerBottomMargin }">

        <!--ko if: resourceEditorContext && !showGraph() -->
        <div class="related-resources-header" data-bind="css: {'open-graph': showGraph() == true}, style: {height: resourceEditorContext === true ? '55px' : '40px'}">

            <div class="editor-elements">
                <div class="">
                    <h2 class="">                        
                        <span data-bind="text: $root.translations.relatedResources"></span>
                    </h2>
                    <h3 class="">
                        <span data-bind="text: $root.translations.addRelationshipInstruction"></span>
                    </h3>
                    <div style="min-width: 300px;">
                        <select style="display:inline-block;" data-bind="
                            select2Query: {
                                select2Config: select2Config
                            }">
                        </select>
                    </div>
                </div>

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

        <div data-bind="hidden: showGraph()">
            <!--ko if: resourceRelationships().length > 0 -->
            <div class="rr-table-border" style="padding: 3px; display: flex; border-bottom: none; background: #f2f2f2; height: 40px; padding-top: 5px; padding-left: 5px;">
                <div class="list-filter">
                    <input 
                        type="text" 
                        class="form-control" 
                        style="width: 300px; height: 28px"
                        data-bind="
                            attr: { placeholder: $root.translations.egText }, 
                            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>
                <span style="padding: 4px;" data-bind="if: totalRelationships() > 1">
                    <span style="font-size: 13px;" class='file-workbench-filecount' data-bind="text: totalRelationships() + ' ' + $root.translations.resourceRelations"></span>
                </span>
            </div>

            <div class="rr-table rr-summary-page">
                <div data-bind="foreach:{ data: relationshipsInFilter, as: 'relationship'}" 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(resource.resourceinstanceid)}, clickBubble: false">
                                    <i class="fa fa-pencil"></i>
                                </button>
                            </div>
                            <div class='rr-table-column icon-column'>
                                <button data-bind="click: !!relationship.tileid() ?  self.updateTile.bind(self, {'delete':true}) : self.deleteRelationships.bind(self), clickBubble: false">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                            <div class='rr-table-column icon-column'>
                                <button data-bind="click:function(){self.reportResourceId(resource.resourceinstanceid);}, clickBubble: false">
                                    <i class="fa fa-info-circle"></i>
                                </button>
                            </div>
                            <div class="rr-table-column" style="flex-grow: 1;" data-bind="click: self.toggleSelectedResourceRelationship, clickBubble: false">
                                <div class="rr-table-instance-label" data-bind="text: resource.displayname"></div>
                            </div>
                        </div>
                        <div class="rr-table-row-panel" data-bind="if: self.selectedResourceRelationship() === relationship, visible:  self.selectedResourceRelationship() === relationship, css: { 'rr-table-border': self.selectedResourceRelationship() === relationship} ">
                            <div data-bind="if: !!relationship.tileid()">
                                <div data-bind="text: $root.translations.nodeResourceRelationshipText"></div>
                                <div class="widget-container" style="padding-left: 0px;">
                                    <!--ko if: self.graphIsSemantic -->
                                    <!--ko if: self.currentResource().resourceinstanceid === relationship.resourceinstanceidfrom() -->
                                    <div class="row">
                                        <label class="col-sm-12" style="font-weight: bold;">
                                            <span class="" data-bind="text: self.currentResource().displayname + $root.translations.relationshipText + ' ' + resource.displayname"></span>
                                        </label>
                                    </div>
                                    <div class="row">
                                        <span class="col-sm-4" style="padding-right: 5px;text-align: right;"
                                            data-bind="text: self.currentResource().displayname + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'"></span>
                                        <span class="col-sm-4">
                                            <select style="width:30%; display:inline-block;" data-bind="
                                                select2Query: {
                                                    select2Config: self.getSelect2ConfigForOntologyProperties(relationship.relationshiptype, self.rootOntologyClass, relationship.resource.root_ontology_class, $root.translations.select-ontology-property)
                                                }">
                                            </select>
                                        </span>
                                        <span class="col-sm-4" style="padding-left: 5px;"
                                            data-bind="text: resource.displayname + ' (' + self.makeFriendly(relationship.resource.root_ontology_class) + ')'"></span>
                                    </div>
                                    <div class="row" style="margin-top: 20px;">
                                        <label class="col-sm-12" style="font-weight: bold;">
                                            <span data-bind="text: resource.displayname + $root.translations.relationshipText + ' ' + self.currentResource().displayname"></span>
                                        </label>
                                    </div>
                                    <div class="row">
                                        <span class="col-sm-4" style="padding-right: 5px; text-align: right;"
                                            data-bind="text: resource.displayname + ' (' + self.makeFriendly(relationship.resource.root_ontology_class) + ')'"></span>
                                        <span class="col-sm-4">
                                            <select style="width:30%; display:inline-block;" data-bind="
                                                select2Query: {
                                                    select2Config: self.getSelect2ConfigForOntologyProperties(relationship.inverserelationshiptype, relationship.resource.root_ontology_class, self.rootOntologyClass, $root.translations.select-ontology-property)
                                                }">
                                            </select>
                                        </span>
                                        <span class="col-sm-4" style="padding-left: 5px;"
                                            data-bind="text: self.currentResource().displayname + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'"></span>
                                    </div>
                                    <!-- /ko -->
                                    <!--ko if: self.currentResource().resourceinstanceid === relationship.resourceinstanceidto() -->
                                    <div class="row">
                                        <label class="col-sm-12" style="font-weight: bold;">
                                            <span data-bind="text: $root.translations.inverseRelationshipTo + ' ' + resource.displayname"></span></label>
                                    </div>
                                    <div class="row">
                                        <span class="col-sm-4" style="padding-right: 5px; text-align: right;"
                                            data-bind="text: self.currentResource().displayname + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'"></span>
                                        <span class="col-sm-4">
                                            <select style="width:30%; display:inline-block;" data-bind="
                                                select2Query: {
                                                    select2Config: self.getSelect2ConfigForOntologyProperties(relationship.inverserelationshiptype, self.rootOntologyClass, relationship.resource.root_ontology_class, $root.translations.select-ontology-property)
                                                }">
                                            </select>
                                        </span>
                                        <span class="col-sm-4" style="padding-left: 5px;"
                                        data-bind="text: resource.displayname + ' (' + self.makeFriendly(relationship.resource.root_ontology_class) + ')'"></span>
                                    </div>
                                    <div class="row" style="margin-top: 20px;">
                                        <label class="col-sm-12" style="font-weight: bold;">
                                            <span data-bind="text: $root.translations.inverseRelationshipTo + ' ' + resource.displayname"></span>
                                        </label>
                                        </div>
                                        <div class="row">
                                            <span class="col-sm-4" style="padding-right: 5px; text-align: right;"
                                            data-bind="text: resource.displayname + ' (' + self.makeFriendly(relationship.resource.root_ontology_class) + ')'"></span>
                                            <span class="col-sm-4">
                                                <select style="width:30%; display:inline-block;" data-bind="
                                                    select2Query: {
                                                        select2Config: self.getSelect2ConfigForOntologyProperties(relationship.relationshiptype, relationship.resource.root_ontology_class, self.rootOntologyClass, $root.translations.select-ontology-property)
                                                    }">
                                                </select>
                                            </span>
                                        <span class="col-sm-4" style="padding-left: 5px;"
                                            data-bind="text: self.currentResource().displayname + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'"></span>
                                    </div>
                                    <!-- /ko -->
                                    <!-- /ko -->
                                </div>
                                <div class="relation-properties-button">
                                    <button class="btn btn-danger btn-labeled btn-lg fa fa-trash"
                                        data-bind="click:self.updateTile.bind(self, {'delete':true})">
                                        <span data-bind="text: $root.translations.deleteThisEntry"></span>
                                    </button>
                                    <!--ko if: self.graphIsSemantic -->
                                    <button class="btn btn-danger btn-labeled btn-lg fa fa-times"
                                        data-bind="click:relationship.reset, visible: relationship.dirty">
                                        <span data-bind="text: $root.translations.cancelEdit"></span>
                                    </button>
                                    <button class="btn btn-mint btn-labeled btn-lg fa fa-cloud"
                                        data-bind="click:self.updateTile.bind(self, {'delete':false}), visible: relationship.dirty">
                                        <span data-bind="text: $root.translations.save"></span>
                                    </button>
                                    <!-- /ko -->
                                </div>
                            </div>
                            <div data-bind="ifnot: !!relationship.tileid()">
                                <div data-bind="text: $root.translations.relationshipDesc"></div>
                                <div class="row widget-container" style="padding-left: 0px;">
                                    <div class="form-group">
                                        <label class="col-xs-12 control-label widget-input-label" for="">
                                            <span data-bind="text: $root.translations.relationship"></span>
                                            <i class="ion-ios-checkmark-outline"></i></label>
                                        <div class="col-xs-12">
                                            <select style="width:30%; display:inline-block;" data-bind="select2Query: {
                                                    select2Config: {
                                                        clickBubble: true,
                                                        data: self.relationshipTypes,
                                                        value: relationship.relationshiptype,
                                                        multiple: false,
                                                        placeholder: self.relationshipTypePlaceholder
                                                    }
                                                }">
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!--ko if: self.graphIsSemantic === false -->
                                <div class="row widget-container" style="padding-left: 0px;">
                                    <div class="form-group">
                                        <div class="relative">
                                            <label class="col-xs-6 control-label widget-input-label" for="">
                                                <span data-bind="text: $root.translations.fromDate"></span>
                                                <i class="ion-ios-checkmark-outline"></i>
                                            </label>
                                            <label class="col-xs-6 control-label widget-input-label" for="">
                                                <span data-bind="text: $root.translations.toDate"></span>
                                                <i class="ion-ios-checkmark-outline"></i>
                                            </label>
                                        </div>

                                        <div class="relative">
                                            <div class="col-xs-6">
                                                <input type="text" class="form-control input-lg widget-input" placeholder="date from"
                                                    data-bind="datepicker: {format: 'YYYY-MM-DD'}, value: relationship.datestarted">
                                            </div>
                                            <div class="col-xs-6">
                                                <input type="text" class="form-control input-lg widget-input" placeholder="date to"
                                                    data-bind="datepicker: {format: 'YYYY-MM-DD'}, value: relationship.dateended">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row widget-container" style="padding-left: 0px;">
                                    <div class="form-group">
                                        <div class="relative">
                                            <label class="col-xs-12 control-label widget-input-label" for="">
                                                <span data-bind="text: $root.translations.description"></span>
                                                <i class="ion-ios-checkmark-outline"></i>
                                            </label>
                                        </div>

                                        <div class="col-xs-12">
                                            <input type="text" id="editor1" class="form-control input-lg widget-input"
                                                data-bind="textInput: relationship.notes">
                                        </div>
                                    </div>
                                </div>
                                <!--/ko-->

                                <div class="relation-properties-button">
                                    <button class="btn btn-danger btn-labeled btn-lg fa fa-trash"
                                        data-bind="click:self.deleteRelationships.bind(self)">
                                        <span data-bind="text: $root.translations.deleteThisEntry"></span>
                                    </button>
                                    <button class="btn btn-danger btn-labeled btn-lg fa fa-times"
                                        data-bind="click:relationship.reset, visible: relationship.dirty">
                                        <span data-bind="text: $root.translations.cancelEdit"></span>
                                    </button>
                                    <button class="btn btn-mint btn-labeled btn-lg fa fa-cloud"
                                        data-bind="click:self.saveRelationship.bind(self), visible: relationship.dirty">
                                        <span data-bind="text: $root.translations.save"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Pagination -->
            <!-- ko if: paginator -->
            <div data-bind="with: paginator">
                <div class="text-center">
                    <ul class="pagination">
                        <li><a data-bind="css: {'disabled': !has_previous()}, click: $parent.newPage.bind($parent, previous_page_number())" href="#">«</a></li>
                        <!-- ko foreach: { data: pages, as: 'page' } -->
                        <!-- ko if: page -->
                        <li class="page" data-bind="click: $parents[1].newPage.bind($parents[1]), css: {'current active': (page == $parent.current_page())}">
                            <a href="#" data-bind="text: page, attr:{'data-page':page}"></a>
                        </li>
                        <!-- /ko -->
                        <!-- ko ifnot: page -->
                        <li class="disabled"><a href="#">...</a></li>
                        <!-- /ko -->
                        <!-- /ko -->
                        <li><a data-bind="css: { 'disabled': !has_next()}, click: $parent.newPage.bind($parent, next_page_number())" href="#">»</a></li>
                    </ul>
                </div>
            </div>
            <!-- /ko -->
            <!-- End Pagination -->
            <!--/ko -->

            <!--ko if: resourceRelationships().length === 0 -->
            <div class="rr-panel-note">
                <span data-bind="text: $root.translations.noRelatedResourceText"></span>
            </div>
            <!--/ko-->
        </div>


        <!--ko if: resourceEditorContext === undefined && !currentResource() -->
        <div id="rr-splash" class="rr-splash" style="margin: 50px 310px 0px 40px;">
            <!-- Image -->
            <div class="img-lg img-circle rr-splash-img-container">
                <img class="rr-splash-img" src="{% webpack_static 'img/Workflow.png' %}" alt="Saved Search">
            </div>

            <!-- Splash Title -->
            <div class="rr-splash-title">
                <span data-bind="text: $root.translations.relatedResources"></span>
            </div>

            <!-- Splash Instructions -->
            <div class="rr-splash-description">
                <span data-bind="text: $root.translations.relatedResourcesFilterText"></span>
            </div>
        </div>
        <!--/ko-->
    </div>

    <!--ko if: showGraph() -->
    <div class="related-resources-filter" style="height: calc(100vh - 80px)">
        <!-- ko component: {
            name: 'related-resources-graph',
            params: {
                resourceId: editingInstanceId
            }
        } --><!-- /ko -->
    </div>
    <!--/ko-->

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