<div class="p-fluid" *ngIf="parametricQueries && datasourceConfiguration">
    <div class="p-field p-grid">
        <label *ngIf="showSelectDatasourceLabel" 
        for="slug" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0 text-gray-600 font-semibold">{{ 'DATASOURCE_CONFIGURATION.DATASOURCE' | translate }}</label>
        <div class="p-col-12 p-md-10">
           
            <p-dropdown *ngIf="parametricQueries"
                    [options]="parametricQueries"
                    [(ngModel)]="datasourceConfiguration!.parametricQuery"
                    dataKey="queryid"
                    [filter]="true"
                    [showClear]="false"
                    (onChange)="resetParameters()"
                    optionLabel="name"
                    filterBy="name"
                    placeholder="{{ 'DATASOURCE_CONFIGURATION.SELECT_A_DATASOURCE' | translate }}"
            >
                <ng-template let-item pTemplate="selectedItem">
                    <div class="query-item query-item-value" *ngIf="datasourceConfiguration?.parametricQuery">
                        <div>{{datasourceConfiguration.parametricQuery!.name}}</div>
                    </div>
                </ng-template>
                <ng-template let-query pTemplate="item">
                    <div class="query-item">
                        <div>{{query?.name}}</div>
                    </div>
                </ng-template>
            </p-dropdown>           
                <button
                    (click)="updateParametricQueries()"
                    pTooltip="Update query list"
                    style="color:black"
                        pButton
                        type="button"
                        class="p-button-text button-widget button-widget-refresh p-button-info">
                        <mat-icon style="color:black">refresh</mat-icon>
                    </button>

                   </div>

        <div class="p-col-12 p-2" *ngIf="datasourceConfiguration?.parametricQuery">
            <p-message severity="info" [text]="datasourceConfiguration.parametricQuery!.description || ''" styleClass="p-mr-2"></p-message>
        </div>
        
        <div class="p-col-12 p-2" *ngIf="datasourceConfiguration?.parameters">
            <div *ngFor="let param of datasourceConfiguration!.parameters!; let paramIndex = index;">
               
                <app-datasource-configuration-parameter
                        [parameter]="param"
                        [queryParameter]="datasourceConfiguration!.parametricQuery!.parameters[paramIndex]"
                ></app-datasource-configuration-parameter>
                
            </div>
        </div>
    </div>
</div>