<ion-item
    *ngIf="this.node
        && (
            this.node.type === 'form_input_text'
            || this.node.type === 'form_input_number'
            || this.node.type === 'form_input_password'
            || this.node.type === 'form_input_email'
            || this.node.type === 'form_input_select'
            || this.node.type === 'form_input_multiselect'
            || this.node.type === 'form_input_textarea'
        )"
>
    <ion-label [position]="'floating'" *ngIf="this.node.AdditionalData.label">
        {{ this.node.AdditionalData.label }}
    </ion-label>
    <ion-input
            *ngIf="this.node.type === 'form_input_text'"
            [(ngModel)]="value"
            [placeholder]="this.node.AdditionalData.placeholder"
            [required]="this.node.AdditionalData.required"
            [readonly]="this.isReadonly"
            (ionChange)="triggerChangeCheck()"
    ></ion-input>
    <ion-input
            *ngIf="this.node.type === 'form_input_number'"
            [(ngModel)]="value"
            [type]="'number'"
            [placeholder]="this.node.AdditionalData.placeholder"
            [required]="this.node.AdditionalData.required"
            [readonly]="this.isReadonly"
            (ionChange)="triggerChangeCheck()"
    ></ion-input>
    <ion-input
            *ngIf="this.node.type === 'form_input_password'"
            [(ngModel)]="value"
            [type]="'password'"
            [placeholder]="this.node.AdditionalData.placeholder"
            [required]="this.node.AdditionalData.required"
            [readonly]="this.isReadonly"
            (ionChange)="triggerChangeCheck()"
    ></ion-input>
    <ion-input
            *ngIf="this.node.type === 'form_input_email'"
            [(ngModel)]="value"
            [type]="'email'"
            [placeholder]="this.node.AdditionalData.placeholder"
            [required]="this.node.AdditionalData.required"
            [readonly]="this.isReadonly"
            (ionChange)="triggerChangeCheck()"
    ></ion-input>

    <!-- TODO readonly handling -->
    <ion-select
            *ngIf="this.node.type === 'form_input_select'"
            [(ngModel)]="value"
            [placeholder]="this.node.AdditionalData.placeholder"
            [required]="this.node.AdditionalData.required"
            (ionChange)="triggerChangeCheck()"
            style="width: 100%;"
    >
        <ion-select-option
                *ngFor="let choice of selectChoices"
                [value]="choice.value"
        >{{ choice.display }}</ion-select-option>
    </ion-select>

    <!-- TODO readonly handling -->
    <ion-select
            *ngIf="this.node.type === 'form_input_multiselect'"
            [(ngModel)]="value"
            [placeholder]="this.node.AdditionalData.placeholder"
            [required]="this.node.AdditionalData.required"
            (ionChange)="triggerChangeCheck()"
            [multiple]="true"
            style="width: 100%;"
    >
        <ion-select-option
                *ngFor="let choice of selectChoices"
                [value]="choice.value"
        >{{ choice.display }}</ion-select-option>
    </ion-select>

    <ion-textarea
        *ngIf="this.node.type === 'form_input_textarea'"
        [(ngModel)]="value"
        [placeholder]="this.node.AdditionalData.placeholder"
        [required]="this.node.AdditionalData.required"
        (ionChange)="triggerChangeCheck()"
        [autoGrow]="true"
        style="width: 100%;"
        [readonly]="this.isReadonly"
    ></ion-textarea>

    <ion-button
            slot="end"
            style="margin-top: 5px;"
            *ngIf="!this.isReadonly && !this.isFilloutMode"
            (click)="onEditClick()"
    >Edit</ion-button>
</ion-item>
