<!--
  ~ 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 class="property-editor p-4" [style.width.px]="width" cdkDrag>
    <form [formGroup]="comboEditorForm" cdkTrapFocus cdkTrapFocusAutoCapture>
        <div class="flex flex-col">
            <div>
                <mat-form-field>
                    <mat-label>Value</mat-label>
                    <mat-select
                        formControlName="value"
                        [placeholder]="getComboPlaceholder()"
                        [panelClass]="'combo-panel'"
                        (mousedown)="preventDrag($event)"
                        (selectionChange)="allowableValueChanged($event.value)">
                        <ng-container *ngFor="let allowableValue of allowableValues">
                            <ng-container *ngIf="allowableValue.description; else noDescription">
                                <mat-option
                                    [value]="allowableValue.id"
                                    (mousedown)="preventDrag($event)"
                                    nifiTooltip
                                    [tooltipComponentType]="TextTip"
                                    [tooltipInputData]="getAllowableValueOptionTipData(allowableValue)"
                                    [delayClose]="false">
                                    <span class="option-text" [class.unset]="allowableValue.value == null">{{
                                        allowableValue.displayName
                                    }}</span>
                                </mat-option>
                            </ng-container>
                            <ng-template #noDescription>
                                <mat-option [value]="allowableValue.id" (mousedown)="preventDrag($event)">
                                    <span class="option-text" [class.unset]="allowableValue.value == null">{{
                                        allowableValue.displayName
                                    }}</span>
                                </mat-option>
                            </ng-template>
                        </ng-container>
                    </mat-select>
                </mat-form-field>
            </div>
            <div *ngIf="showParameterAllowableValues">
                <div *ngIf="!parametersLoaded; else showParameters">
                    <ngx-skeleton-loader count="1"></ngx-skeleton-loader>
                </div>
                <ng-template #showParameters>
                    <mat-form-field>
                        <mat-label>Parameter</mat-label>
                        <mat-select
                            formControlName="parameterReference"
                            [panelClass]="'combo-panel'"
                            (mousedown)="preventDrag($event)">
                            <ng-container *ngFor="let parameterAllowableValue of parameterAllowableValues">
                                <ng-container *ngIf="parameterAllowableValue.description; else noDescription">
                                    <mat-option
                                        [value]="parameterAllowableValue.id"
                                        (mousedown)="preventDrag($event)"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        [tooltipInputData]="getAllowableValueOptionTipData(parameterAllowableValue)"
                                        [delayClose]="false">
                                        <span
                                            class="option-text"
                                            [class.unset]="parameterAllowableValue.value == null"
                                            >{{ parameterAllowableValue.displayName }}</span
                                        >
                                    </mat-option>
                                </ng-container>
                                <ng-template #noDescription>
                                    <mat-option [value]="parameterAllowableValue.id" (mousedown)="preventDrag($event)">
                                        <span
                                            class="option-text"
                                            [class.unset]="parameterAllowableValue.value == null"
                                            >{{ parameterAllowableValue.displayName }}</span
                                        >
                                    </mat-option>
                                </ng-template>
                            </ng-container>
                        </mat-select>
                    </mat-form-field>
                </ng-template>
            </div>
            <div class="flex justify-end items-center gap-x-2">
                <button
                    color="accent"
                    mat-raised-button
                    type="button"
                    (mousedown)="preventDrag($event)"
                    (click)="cancelClicked()">
                    Cancel
                </button>
                <button
                    [disabled]="!comboEditorForm.dirty || comboEditorForm.invalid"
                    (mousedown)="preventDrag($event)"
                    type="button"
                    color="primary"
                    (click)="okClicked()"
                    mat-raised-button>
                    Ok
                </button>
            </div>
        </div>
    </form>
</div>
