<!--
  ~ 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 mat-elevation-z8 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"
                                    [disabled]="readonly"
                                    (mousedown)="preventDrag($event)"
                                    nifiTooltip
                                    [tooltipComponentType]="TextTip"
                                    [tooltipInputData]="allowableValue.description"
                                    [delayClose]="false">
                                    <span
                                        class="option-text"
                                        [class.surface-color]="allowableValue.value == null"
                                        [class.unset]="allowableValue.value == null"
                                        >{{ allowableValue.displayName }}</span
                                    >
                                </mat-option>
                            </ng-container>
                            <ng-template #noDescription>
                                <mat-option
                                    [value]="allowableValue.id"
                                    [disabled]="readonly"
                                    (mousedown)="preventDrag($event)">
                                    <span
                                        class="option-text"
                                        [class.surface-color]="allowableValue.value == null"
                                        [class.unset]="allowableValue.value == null"
                                        >{{ allowableValue.displayName }}</span
                                    >
                                </mat-option>
                            </ng-template>
                        </ng-container>
                    </mat-select>
                </mat-form-field>
            </div>
            <div *ngIf="showParameterAllowableValues">
                <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"
                                    [disabled]="readonly"
                                    (mousedown)="preventDrag($event)"
                                    nifiTooltip
                                    [tooltipComponentType]="TextTip"
                                    [tooltipInputData]="parameterAllowableValue.description"
                                    [delayClose]="false">
                                    <span
                                        class="option-text"
                                        [class.unset]="parameterAllowableValue.value == null"
                                        [class.surface-color]="parameterAllowableValue.value == null"
                                        >{{ parameterAllowableValue.displayName }}</span
                                    >
                                </mat-option>
                            </ng-container>
                            <ng-template #noDescription>
                                <mat-option
                                    [value]="parameterAllowableValue.id"
                                    [disabled]="readonly"
                                    (mousedown)="preventDrag($event)">
                                    <span
                                        class="option-text"
                                        [class.unset]="parameterAllowableValue.value == null"
                                        [class.surface-color]="parameterAllowableValue.value == null"
                                        >{{ parameterAllowableValue.displayName }}</span
                                    >
                                </mat-option>
                            </ng-template>
                        </ng-container>
                    </mat-select>
                </mat-form-field>
            </div>
            <div class="flex justify-end items-center gap-x-2">
                @if (readonly) {
                    <button
                        mat-button
                        type="button"
                        color="primary"
                        (mousedown)="preventDrag($event)"
                        (click)="cancelClicked()">
                        Close
                    </button>
                } @else {
                    <button mat-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-button>
                        Ok
                    </button>
                }
            </div>
        </div>
    </form>
</div>
