<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You 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 fxLayout="row" fxFlex="100" fxLayoutGap="10px">
    <div fxLayout="row" fxLayoutAlign="start center">
        <div>
            <b style="white-space: nowrap">
                {{ label }}
            </b>
        </div>
        <div
            fxLayoutAlign="start center"
            *ngIf="originalRuntimeName"
            class="ml-5"
        >
            <span class="runtime-info">{{ originalRuntimeName }}</span>
            <span
                fxLayoutAlign="center center"
                *ngIf="originalRuntimeName !== node.data.runtimeName"
            >
                <i class="material-icons">arrow_right</i>
            </span>
            <span
                class="runtime-info"
                *ngIf="originalRuntimeName !== node.data.runtimeName"
                >{{ node.data.runtimeName }}
            </span>
        </div>
        <p style="margin: 0px 10px 10px" *ngIf="isList">[List]</p>
    </div>

    <div
        fxLayout="row"
        fxLayoutAlign="end center"
        fxFlex="100"
        fxLayoutGap="20px"
    >
        <div
            class="timestamp-property"
            *ngIf="timestampProperty"
            fxLayoutAlign="end center"
            fxLayout="row"
        >
            <mat-icon
                *ngIf="timestampProperty"
                class="timestamp-icon"
                fxLayout="row"
                fxLayoutAlign="start center"
            >
                access_time
            </mat-icon>
            <span style="margin-left: -5px">marked as timestamp</span>
        </div>
        <div fxLayoutAlign="end center" class="static-value-info-outer">
            <span
                *ngIf="isStaticValue"
                class="static-value-info"
                matTooltip="Static Value"
            >
                S
            </span>
        </div>
        <div fxLayoutAlign="end center" class="runtime-type-info-outer">
            <div
                fxLayout="row"
                fxLayoutAlign="start center"
                fxFlex="100"
                *ngIf="runtimeType"
            >
                <span class="runtime-info runtime-type-info">{{
                    originalRuntimeType
                }}</span>
                <span
                    fxLayoutAlign="center center"
                    *ngIf="originalRuntimeType !== runtimeType"
                    ><i class="material-icons">arrow_right</i></span
                >
                <span
                    class="runtime-info runtime-type-info"
                    *ngIf="originalRuntimeType !== runtimeType"
                    >{{ runtimeType }}</span
                >
            </div>
        </div>
        <div fxLayoutAlign="end center" class="status-outer">
            <span
                *ngIf="showFieldStatus"
                [ngClass]="
                    'status status-' +
                    fieldStatusInfo[
                        originalRuntimeName
                    ].fieldStatus.toLowerCase()
                "
                [matTooltip]="
                    fieldStatusInfo[originalRuntimeName].additionalInfo
                "
                >{{ fieldStatusInfo[originalRuntimeName].fieldStatus }}</span
            >
        </div>
        <div *ngIf="isPrimitive" fxLayoutAlign="center center">
            <mat-form-field
                class="form-field-small no-subscrip-wrapper"
                appearance="outline"
                color="accent"
            >
                <mat-select
                    [(ngModel)]="node.data.propertyScope"
                    panelClass="small-select"
                    class="small-select"
                    [attr.data-cy]="'property-scope-' + label"
                >
                    <mat-option value="MEASUREMENT_PROPERTY"
                        >Measurement
                    </mat-option>
                    <mat-option value="DIMENSION_PROPERTY"
                        >Dimension
                    </mat-option>
                    <mat-option value="HEADER_PROPERTY">Header</mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <div fxLayoutAlign="end center" *ngIf="isNested">
            <button
                [disabled]="!isEditable"
                color="accent"
                mat-button
                (click)="addNestedProperty(node.data)"
            >
                <mat-icon matTooltip="Add a Nested Property">queue</mat-icon>
            </button>
        </div>
        <div
            fxLayoutAlign="end center"
            class="ml-5 mr-5"
            *ngIf="isNested || isPrimitive || isList"
        >
            <button
                [disabled]="!isEditable"
                color="accent"
                mat-button
                (click)="openEditDialog(node.data)"
                [attr.data-cy]="'edit-' + label.toLowerCase()"
            >
                <mat-icon>edit</mat-icon>&nbsp;Edit field
            </button>
        </div>
        <div fxLayoutAlign="end center">
            <mat-checkbox
                *ngIf="isNested || isPrimitive || isList"
                (click)="selectProperty(node.data.id, undefined)"
                [disabled]="!isEditable"
                [class.checkbox-selected]="node.data.selected"
                [checked]="node.data.selected"
                [attr.data-cy]="'delete-property-' + label.toLowerCase()"
            >
            </mat-checkbox>
        </div>
    </div>
</div>
