<ng-container *ngIf="form">
    <!--<div class="grid" *ngIf="form.description">
        <div class="col-12 text-center pb-4"><div class="text-4xl text-center">{{form.description}}</div></div>
    </div>-->
    <p-messages severity="warn" *ngIf="errorMessages && errorMessages.length > 0">
        <ng-template pTemplate>
            <div class="p-grid">
                <div class="col-12" *ngFor="let message of errorMessages">
                    <span class="p-message-summary">{{message.name}}:</span>
                    <span class="p-message-detail">{{message.message}}</span>
                </div>
            </div>

        </ng-template>
    </p-messages>
    <div class="field grid" *ngFor="let column of form.fields; let colIndex = index; ">
        <label  class="col-12 mb-2 md:col-2 md:mb-0 font-bold">{{column.descriptionShort || column.name}}</label>
        <div class="col-12 md:col-10" *ngIf="'String' == column?.type && !column.options && !column.multipleOptions">
            <input
                    pInputText
                    placeholder="{{ column && column.example ? column.example : ('FORM.INPUT_PLACEHOLDER' | translate) }}"
                    [(ngModel)]="column!.value"
                    type="text"
                    class="w-full"
                    [disabled]="saving"
            >
        </div>

        <div class="col-12 md:col-10" *ngIf="'Number' == column?.type && !column.options && !column.multipleOptions">
            <input
                    pInputText
                    placeholder="{{ column && column.example ? column.example : ('FORM.INPUT_NUMBER_PLACEHOLDER' | translate) }}"
                    [(ngModel)]="column!.value"
                    type="number"
                    class="w-full"
                    [disabled]="saving"
            >
        </div>

        <div class="col-12 md:col-10" *ngIf="('date' == column?.type || 'datetime' == column?.type) && !column.options && !column.multipleOptions">
            <p-calendar
                    class="w-full"
                    [showTime]="'datetime' == column?.type"
                    placeholder="{{ column && column.example ? column.example : ('FORM.SELECT_A_DATE_VALUE_PLACEHOLDER' | translate) }}"
                    (ngModelChange)="column!.value = $event.toJSON()"
                    [ngModel]="column?.value | toDate"
                    [disabled]="saving"
            ></p-calendar>
        </div>

        <div class="col-12 md:col-10" *ngIf="column.options">
            <p-dropdown
                    filterBy="value"
                    optionLabel="value"
                    optionValue="key"
                    placeholder="{{ column && column.example ? column.example : ('FORM.DROPDOWN_PLACEHOLDER' | translate) }}"
                    [options]="column.options"
                    [filter]="true"
                    [showClear]="false"
                    [(ngModel)]="column!.value"
                    [disabled]="saving"
            >
                <!--<ng-template let-query pTemplate="item">
                    <div class="query-item">
                        <div>{{query?.description}}</div>
                    </div>
                </ng-template>-->
            </p-dropdown>
        </div>

        <div class="col-12 md:col-10" *ngIf="column.multipleOptions">
            <p-multiSelect
                    placeholder="{{ column && column.example ? column.example : ('FORM.MULTI_SELECT_PLACEHOLDER' | translate) }}"
                    [optionLabel]="'value'"
                    [optionValue]="'key'"
                    [options]="column.multipleOptions"
                    [(ngModel)]="column.value"
                    [disabled]="saving"
                    display="chip"
            ></p-multiSelect>
        </div>
    </div>

    <div class="flex align-items-end justify-content-end">
        <button
                pButton
                icon="pi pi-check"
                label="{{ 'FORM.SUBMIT_BUTTON_LABEL' | translate }}"
                iconPos="left"
                [loading]="saving"
                (click)="submit()"
        >
        </button>
    </div>

    <!--<pre>{{form | json}}</pre>-->
</ng-container>

<div *ngIf="!loading && !form && loaded" class="p-grid">
    <div class="col-12 text-center"><i class="pi pi-exclamation-triangle"  style="font-size: 2rem"></i></div>
    <div class="col-12 text-center">{{'TABLE_WIDGET.NO_DATA' | translate}}</div>
</div>

<div class="p-grid" *ngIf="loading">
    <div class="col-12 text-center">
        <p-progressSpinner [style]="{width: '50px', height: '50px'}" ></p-progressSpinner>
    </div>
</div>
