{% load template_tags %}
{% load i18n %}

<!-- ko ifnot: $data.search -->
<!--ko let: {self: $data} -->
<div class="node-widget-label concept-label" style="width:40vw;">

    <div class="control-label">
        <span data-bind="text: $root.translations.resourceModel"></span>
    </div>
    <div style="padding-bottom: 10px;">
        <select multiple data-bind="
            placeholder: $root.translations.selectAResourceModel,
            selectedOptions: selectedResourceModel,
            options: resourceModels,
            optionsText: 'name',
            chosen: {
                width: '100%',
                disabled: isEditable === false
            },
            attr: {'aria-label': $root.translations.selectAResourceModel},
        "></select>
    </div>
    <div class="rr-table">
        <div data-bind="foreach: config.graphs" style="display: flex; flex-direction: column;">
            <div class='rr-table-row'>
                <div class="rr-table-row-initial" data-bind="style:{color: $parent.isEditable === true || '#aaa'}">
                    <div class='rr-table-column icon-column'>
                        <button 
                            data-bind="
                                click: function(){if ($parent.isEditable !== false) {$data.removeRelationship($data)}}, 
                                clickBubble: false, 
                                attr: {'disabled': $parent.isEditable === false, 'aria-label': $root.translations.removeRelatedResourceModel($data.name)}, 
                                style: {color: $parent.isEditable === true || '#aaa'}">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                    <div class="rr-table-column" tabindex="0" role="button" style="flex-grow: 1; padding-left: 10px;"
                        data-bind="
                            click: function() { if($parent.isEditable !== false){self.toggleSelectedResource($data)}; },
                            clickBubble: false,
                            onEnterkeyClick, onSpaceClick," 
                        style="cursor: pointer;">
                        <div class="rr-table-instance-label" data-bind="text: $data.name"></div>
                    </div>
                </div>
                <div class="rr-table-row-panel" data-bind="if: self.selectedResourceType() === $data, visible: self.selectedResourceType() === $data, css: { 'rr-table-border': self.selectedResourceType() === $data} ">
                    <div data-bind="if: self.graphIsSemantic">
                        <div class="rr-table-ontology-selector">
                            <span data-bind="component: {
                                name: 'views/components/simple-switch',
                                params: {
                                    value: $data.useOntologyRelationship,
                                    config: {label: $root.translations.useOntology}
                                }
                            }"></span>
                        </div>
                    </div>
                    <div class="row" data-bind="if: $data.useOntologyRelationship">
                        <div class="row" style="margin-bottom: 10px;">
                            <label class="col-xs-12" style="font-weight: bold;">
                                <span data-bind="text: $root.translations.defaultRelationshipTo"></span>
                                <span data-bind="text: $data.name"></span>
                            </label>

                            <div class="row" style="padding: 0px 12px; margin-bottom: 10px;">
                                <span class="col-xs-12" style="font-weight: bold;"
                                    data-bind="text: self.graphName + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'">
                                </span>

                                <span class="col-xs-12">
                                    <select 
                                        style="width:100%; display:inline-block; margin: 3px 0px;" 
                                        data-bind="
                                            select2Query: {
                                                select2Config: self.getSelect2ConfigForOntologyProperties(
                                                    $data.ontologyProperty, 
                                                    self.rootOntologyClass, 
                                                    $data.ontologyClass, 
                                                    $root.translations.selectAnOntologyProperty, 
                                                    true
                                                )
                                            }, 
                                            attr: {'aria-label': $root.translations.defaultRelationshipToResource($data.name)}
                                        "
                                    ></select>
                                </span>

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


                        <div class="row">
                            <label class="col-xs-12" style="font-weight: bold;">
                                <span data-bind="text: $root.translations.defaultInverseRelationshipTo"></span>
                                <span data-bind="text: $data.name"></span>
                            </label>

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

                                <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, 
                                                true
                                            )
                                        },
                                        attr: {'aria-label': $root.translations.defaultInverseRelationshipToResource($data.name)}
                                    "></select>
                                </span>

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

                    <div class="row" data-bind="ifnot: $data.useOntologyRelationship">
                        <div data-bind='component: {
                            name: "concept-datatype-config",
                            params: {
                                config : {rdmCollection: $data.relationshipCollection },
                                search: false,
                            }
                        }'></div>
                        <div class="row">
                            <label class="col-xs-12" style="font-weight: bold;">
                                <span data-bind="text: $root.translations.relationshipConcept"></span>
                            </label>
                            <div class="row">
                                <div data-bind="component: {
                                    name: 'concept-select-widget',
                                    params: {
                                        node: {'config': {'rdmCollection': $data.relationshipCollection() }},
                                        value: $data.relationshipConcept,
                                    }, 
                                },
                                attr: {'aria-label': $root.translations.relationshipConcept}
                                "></div>
                            </div>
                        </div>

                        <div class="row">
                            <label class="col-xs-12" style="font-weight: bold;">
                                <span data-bind="text: $root.translations.inverseRelationshipConcept"></span>
                            </label>
                            <div class="row">
                                <div data-bind="component: {
                                    name: 'concept-select-widget',
                                    params: {
                                        node: {'config': {'rdmCollection': relationshipCollection()}},
                                        value: $data.inverseRelationshipConcept,
                                    }
                                },
                                attr: {'aria-label': $root.translations.inverseRelationshipConcept}
                                "></div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>

    <div class="relative">
        <span class="col-xs-12 control-label widget-input-label">
            <span data-bind="text: $root.translations.searchStringText"></span>
            
            <i 
                class="fa fa-eye" 
                style="cursor: pointer;"
                tabindex="0"
                data-bind="
                    attr: {title: $root.translations.viewSearchString,
                        'aria-label': $root.translations.viewSearchString
                    },
                    click: openSearch,
                    onEnterkeyClick, onSpaceClick
                "
            ></i>
        </span>
    </div>
    
    <div class="col-xs-12" style="padding-bottom: 10px;">
        <input 
            type="text" 
            class="form-control"
            data-bind="
                attr: {placeholder: $root.translations.enterSearchStringHere + '...',
                    'aria-label': $root.translations.searchStringText
                },
                textInput: config.searchString
            "
        >
    </div>

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

<!-- ko if: $data.search -->
<div class="col-md-4 col-lg-3">
    <select class="resources" data-bind="
        attr: {'data-label': node.label},
        select2Query: {
            select2Config:{
                data: [
                    { text: $root.translations.references, id: '' },
                    { text: $root.translations.doesNotReference, id: '!' },
                    { text: $root.translations.hasNoValue, id: 'null' },
                    { text: $root.translations.hasAnyValue, id: 'not_null' },
                ],
                value: op
        }}">
    </select>
</div>
<div class="col-md-8 col-lg-9 resource-instance-search" data-bind="visible: op() !== 'null' && op() !== 'not_null'">
    <!-- ko component: {
        name:  datatype.datatype.includes('list') ? 'resource-instance-multiselect-widget' : 'resource-instance-select-widget',
        params: {
            config: {
                placeholder: $root.translations.selectAResource,
                label: node.label,
            },
            allowInstanceCreation: false,
            value: searchValue,
            node: node,
            disabled: false,
            renderContext: 'search',
            multiple: !!datatype.datatype.includes('list'),
        }
    } -->
    <!-- /ko -->
</div>
<!-- /ko -->
