
<div class="grid" *ngIf="parameter">
    <div class="col-6">
        <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ splitString(queryParameter?.description!) }} </label>
        <p-dropdown
                filterBy="description"
                optionLabel="description"
                optionValue="type"
                placeholder="{{ 'DATASOURCE_CONFIGURATION_PARAMETER.SELECT_A_DATE_PERIOD' | translate }}"
                [options]="types"
                [filter]="true"
                [showClear]="false"
                [(ngModel)]="parameter.type"
        >
            <ng-template let-query pTemplate="item">
                <div class="query-item">
                    <div>{{query?.description}}</div>
                </div>
            </ng-template>
        </p-dropdown>
    </div>
    <div class="col-6">
        <div class="p-field p-col-12 p-md-4" *ngIf="'any_interval' == parameter.type">
            <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">&nbsp;</label>
            <p-dropdown
            filterBy="description"
            optionLabel="description"
            optionValue="value"
            placeholder="{{ 'DATASOURCE_CONFIGURATION_PARAMETER.SELECT_AN_INTERVAL' | translate }}"
            [options]="intervals"
            [filter]="true"
            [showClear]="false"
            [(ngModel)]="parameter!.value"
         ></p-dropdown>
        </div>
        <div class="col-6">
            <div class="p-field p-col-12 p-md-4" *ngIf="'any_interval_choosen_by_user' == parameter.type">
                <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">&nbsp;</label>
                <p-dropdown
                filterBy="description"
                optionLabel="description"
                optionValue="value"
                placeholder="{{ 'DATASOURCE_CONFIGURATION_PARAMETER.SELECT_AN_INTERVAL' | translate }}"
                [options]="intervals"
                [filter]="true"
                [showClear]="false"
                [(ngModel)]="parameter!.value"
             ></p-dropdown>
            </div>
        <div class="p-field p-col-12 p-md-4" *ngIf="'any_date' == parameter.type">
            <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">&nbsp;</label>
            <p-calendar
                    [showTime]="true"
                    placeholder="{{ 'DATASOURCE_CONFIGURATION.SELECT_A_DATE_VALUE' | translate }}"
                    (ngModelChange)="parameter!.value = $event.toJSON()"
                    [ngModel]="parameter!.value | toDate"
            ></p-calendar>
        </div>
        <div class="p-field p-col-12 p-md-4" *ngIf="'any_date_choosen_by_user' == parameter.type">
            <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Valore iniziale</label>
            <p-calendar
                    [showTime]="true"
                    placeholder="{{ 'DATASOURCE_CONFIGURATION.SELECT_A_DATE_VALUE' | translate }}"
                    (ngModelChange)="parameter!.value = $event.toJSON()"
                    [ngModel]="parameter!.value | toDate"
            ></p-calendar>
        </div>
        <div class="p-field p-col-12 p-md-4" *ngIf="'any_number' == parameter.type">
            <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">&nbsp;</label>
            <p-inputNumber
                    placeholder="{{ 'DATASOURCE_CONFIGURATION_PARAMETER.SELECT_A_NUMBER_VALUE' | translate }}"
                    [(ngModel)]="parameter!.value"
            ></p-inputNumber>
        </div>
        <div class="p-field p-col-12 p-md-4" *ngIf="'querystring' == parameter.type">
            <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">&nbsp;</label>
            <input id="parameterValue" type="text" [(ngModel)]="parameter!.value!"
            placeholder="{{ 'DATASOURCE_CONFIGURATION_PARAMETER.PARAMETER_NAME' | translate }}"
            class="p-inputtext p-component p-element ng-pristine ng-valid p-filled ng-touched"/> 
        </div>
    </div>
</div>
</div>
