<!--
  ~ 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 [formGroup]="parentForm" fxFlex="100" fxLayout="column">
    <div
        fxFlex
        fxLayout="row"
        *ngIf="!staticProperty.valueSpecification && !staticProperty.multiLine"
    >
        <mat-form-field fxFlex color="accent">
            <input
                formControlName="{{ fieldName }}"
                fxFlex
                matInput
                [placeholder]="staticProperty.label"
                (blur)="emitUpdate()"
                [attr.data-cy]="fieldName"
            />

            <mat-error *ngIf="!fieldValid">
                {{ errorMessage }}
            </mat-error>
        </mat-form-field>
    </div>
    <div *ngIf="staticProperty.valueSpecification">
        <div fxLayout="column" fxFlex="100">
            <mat-slider
                [max]="staticProperty.valueSpecification.maxValue"
                [min]="staticProperty.valueSpecification.minValue"
                [step]="staticProperty.valueSpecification.step"
                [attr.data-cy]="fieldName"
                [discrete]="true"
                [displayWith]="formatLabel"
                color="accent"
            >
                <input
                    matSliderThumb
                    #slider
                    formControlName="{{ fieldName }}"
                />
            </mat-slider>
        </div>
    </div>
    <div
        *ngIf="!staticProperty.valueSpecification && !staticProperty.mapsTo"
        fxFlex="100"
        fxLayout="column"
    >
        <div
            fxFlex="100"
            fxLayout="column"
            *ngIf="staticProperty.placeholdersSupported"
        >
            <h5>Possible placeholders:</h5>
            <div fxFlex="100" fxLayout="row" style="background: white">
                <mat-chip-list style="margin-bottom: 10px">
                    <mat-chip
                        (click)="applyPlaceholder(property.runtimeName)"
                        color="accent"
                        *ngFor="let property of eventSchemas[0].eventProperties"
                        >#{{ property.runtimeName }}#
                    </mat-chip>
                </mat-chip-list>
            </div>
        </div>
        <div fxFlex="100" *ngIf="staticProperty.multiLine">
            <quill-editor
                *ngIf="staticProperty.htmlFontFormat"
                #textEditor
                formControlName="{{ fieldName }}"
                [modules]="quillModulesFontFormat"
            ></quill-editor>
            <quill-editor
                *ngIf="!staticProperty.htmlFontFormat"
                #textEditor
                formControlName="{{ fieldName }}"
                [modules]="quillModules"
            ></quill-editor>
        </div>
    </div>
</div>
