<!--
  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
 
<div class="properties-assignment-page">
    <div class="main-content">
        <div class="left-column">
            <div class="main-tabs-section">
                <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true" >
                    <tab tabTitle="Properties">
                        <properties-table class="properties-table"
                            [fePropertiesMap]="instanceFePropertiesMap"
                            [feInstanceNamesMap]="componentInstanceNamesMap"
                            [searchTerm]="searchQuery"
                            [selectedPropertyId]="selectedFlatProperty.path"
                            [propertyNameSearchText]="searchPropertyName"
                            [readonly]="isReadonly || resourceIsReadonly"
                            [isLoading]="loadingProperties || savingChangedData"
                            [hasDeclareOption]="true"
                            [showDelete]="!isReadonly && isSelf()"
                            [disablePropertyValue] = "disablePropertyValue()"
                            (propertyChanged)="dataChanged($event)"
                            (propertySelected)="propertySelected($event)"
                            (selectPropertyRow)="selectPropertyRow($event)"
                            (selectChildProperty)="selectChildProperty($event)"
                            (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
                            (updateCheckedChildPropertyCount)="updateCheckedChildPropertyCount($event)"
                            (togggleToscaBtn)="togggleToscaBtn($event)"
                            (selectInstanceRow)="selectInstanceRow($event)"
                            (deleteProperty)="deleteProperty($event)"
                        >
                        </properties-table>
                    </tab>
                    <tab tabTitle="Inputs" [show]="isSelf()">
                        <inputs-table class="properties-table"
                            [fePropertiesMap]="instanceFePropertiesMap"
                            [readonly]="isReadonly"
                            [showDelete]="!isReadonly && isSelf()"
                            [inputs]="inputs | searchFilter:'name':searchQuery"
                            [instanceNamesMap]="componentInstanceNamesMap"
                            [componentInstancePropertyMap]="componentInstancePropertyMap"
                            [isLoading]="loadingInputs"
                            [componentType]="component.componentType"
                            [parentComponent]="component"
                            (deleteInput)="deleteInput($event)"
                            (inputChanged)="dataChanged($event)">
                        </inputs-table>
                    </tab>
                    <tab tabTitle="Policies" [show]="isSelf()">
                        <policies-table class="properties-table"
                                      [readonly]="isReadonly"
                                      [policies]="policies | searchFilter:'name':searchQuery"
                                      [instanceNamesMap]="componentInstanceNamesMap"
                                      [isLoading]="loadingPolicies"
                                      (deletePolicy)="deletePolicy($event)">
                        </policies-table>
                    </tab>
                </tabs>
                <div class="main-tabs-section-buttons">
                    <button class="tlv-btn outline blue" [disabled]="!hasChangedData || savingChangedData" (click)="reverseChangedData()" data-tests-id="properties-reverse-button">Discard</button>
                    <button class="tlv-btn blue" [disabled]="!hasChangedData || !isValidChangedData || savingChangedData" (click)="doSaveChangedData()" data-tests-id="properties-save-button">{{savingChangedData ? 'Saving' : 'Save'}}</button>
                </div>
            </div>
            <div class="header">
                <div class="search-filter-container" [class.without-filter]="isInputsTabSelected || isPoliciesTabSelected">
                    <span *ngIf="displayClearSearch && isPropertiesTabSelected" (click)="clickOnClearSearch()" class="clear-filter" data-tests-id="clear-filter-button">Clear All</span>
                    <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" data-tests-id="search-box"/>
                    <span class="sprite search-icon" data-tests-id="search-button"></span>
                    <filter-properties-assignment *ngIf="isPropertiesTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
                </div>
                <button (click)="openToscaGetFunctionModal()"
                        *ngIf="isPropertiesTabSelected && !isSelf()"
                        [disabled]="(checkedPropertiesCount != 1 || isReadonly || hasChangedData) && !enableToscaFunction"
                        class="tlv-btn blue declare-button"
                        data-tests-id="declare-button select-tosca-function">{{'TOSCA_FUNCTION_LABEL' | translate}}</button>
                <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareInput()" data-tests-id="declare-button declare-input">Declare Input</button>
                <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData || isSelf()" (click)="declarePropertiesToPolicies()" data-tests-id="declare-button declare-policy">Declare Policy</button>
                <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || checkedChildPropertiesCount || isReadonly || hasChangedData" (click)="declareListProperties()" data-tests-id="declare-but($event)ton declare-list-input">Create List Input</button>
            </div>
        </div>
        <div class="right-column">
            <div *ngIf="!isReadonly && !isInputsTabSelected" class="add-btn"
                 (click)="addProperty(component.model)" data-tests-id="properties-add-button" [ngClass]="{'disabled': !showAddProperties()}" >Add Property</div>
            <div *ngIf="!isReadonly && isInputsTabSelected" class="add-btn"
                 (click)="addInput()" [ngClass]="{'disabled': !isSelf()}">Add Input</div>
            <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
                <tab tabTitle="Composition">
                    <div class="hierarchy-nav-container">
                        <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
                        <div class="hierarchy-header white-sub-header">
                            <span tooltip="{{component.name}}">{{component.name}}</span>
                        </div>
                        <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInputsTabSelected || isPoliciesTabSelected">No data to display</div>
                        <hierarchy-navigation class="hierarchy-nav"
                                (updateSelected)="onInstanceSelectedUpdate($event)"
                                [displayData]="isInputsTabSelected || isPoliciesTabSelected ? []: instancesNavigationData"
                                [selectedItem]="selectedInstanceData?.uniqueId"
                                [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
                    </div>
                </tab>
                <tab tabTitle="Property Structure">
                    <div class="hierarchy-nav-container">
                    <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader">
                        <span tooltip="{{isPropertiesTabSelected ? propertyStructureHeader : ''}}">{{isPropertiesTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span>
                    </div>
                    <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInputsTabSelected || isPoliciesTabSelected">No data to display</div>
                    <hierarchy-navigation class="hierarchy-nav"
                            (updateSelected)="onPropertySelectedUpdate($event)"
                            [displayData]="isInputsTabSelected || isPoliciesTabSelected ? [] : propertiesNavigationData"
                            [selectedItem]="selectedFlatProperty.path"
                            [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
                    </div>
                </tab>
            </tabs>
        </div>
    </div>
</div>