<ng-container *ngIf="widget?.datasourceConfiguration">

<app-datasource-configuration 
    [datasourceConfiguration]="widget!.datasourceConfiguration!" 
    [parametricQueries]="parametricQueries">
</app-datasource-configuration>

<!--    <button pButton icon="pi pi-refresh" label="Load data in table" (click)="configurationChanged()"></button>-->

    <ng-container *ngIf="widget?.datasourceConfiguration?.parametricQuery?.metadata">
        <div class="p-fluid">
            <div class="col-12">
                <div class="text-gray-600 font-semibold">{{'TABLE_WIDGET_CONFIGURATION.SELECTED_COLUMNS' | translate}}:</div>

                <p-multiSelect
                        [optionLabel]="'description'"
                        [optionValue]="'name'"
                        [options]="widget!.datasourceConfiguration!.parametricQuery!.metadata"
                        [(ngModel)]="widget!.selectedColumns"
                        display="chip"
                ></p-multiSelect>
            </div>
        </div>

        <div class="p-fluid">
            <div class="col-12">
                <div class="p-field-checkbox mt-3">
                    <p-checkbox [(ngModel)]="widget!.editable" [binary]="true" inputId="binary"></p-checkbox>
                    <label for="binary" class="ml-2 text-gray-600 font-semibold">{{ 'TABLE_WIDGET_CONFIGURATION.EDITABLE' | translate }}</label>
                </div>

                <ng-container *ngIf="widget?.editable">
                    <div class="p-field p-grid mt-2">
                        <label for="formCode" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'TABLE_WIDGET_CONFIGURATION.FORM_CODE' | translate }}</label>
                        <div class="p-col-12 p-md-10">
                            <input id="formCode" type="text" class="w-full" [(ngModel)]="widget!.formCode" pInputText placeholder="{{ 'INPUT.PLACEHOLDER' | translate }}" />
                        </div>
                    </div>

                    <div class="p-field p-grid mt-2">
                        <label for="formCode" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'TABLE_WIDGET_CONFIGURATION.FORM_COLUMN_ID' | translate }}</label>
                        <div class="p-col-12 p-md-10">
                            <p-dropdown
                                    class="w-full"
                                    placeholder="{{ 'SELECT.PLACEHOLDER' | translate }}"
                                    [required]="true"
                                    [autoDisplayFirst]="true"
                                    [options]="widget!.datasourceConfiguration!.parametricQuery!.metadata"
                                    [(ngModel)]="widget!.formColumnId"
                                    [optionLabel]="'description'"
                                    [optionValue]="'name'" >
                            </p-dropdown>
                        </div>
                    </div>

                    <div class="p-field p-grid mt-2">
                        <label for="formColumnTitle" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'TABLE_WIDGET_CONFIGURATION.FORM_COLUMN_TITLE' | translate }}</label>
                        <div class="p-col-12 p-md-10">
                            <p-dropdown
                                    id="formColumnTitle"
                                    class="w-full"
                                    placeholder="{{ 'SELECT.PLACEHOLDER' | translate }}"
                                    [required]="true"
                                    [autoDisplayFirst]="true"
                                    [options]="widget!.datasourceConfiguration!.parametricQuery!.metadata"
                                    [(ngModel)]="widget!.formColumnTitle"
                                    [optionLabel]="'description'"
                                    [optionValue]="'name'" >
                            </p-dropdown>
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>

        <div class="p-fluid">
            <div class="col-12">
                <div class="p-field-checkbox mt-3">
                    <p-checkbox [(ngModel)]="widget!.rowSelectable" [binary]="true" inputId="binary"></p-checkbox>
                    <label for="binary" class="ml-2 text-gray-600 font-semibold">{{'TABLE_WIDGET_CONFIGURATION.ROW_SELECTABLE' | translate}}</label>
                </div>

                <ng-container *ngIf="widget?.rowSelectable">
                    <div class="p-field p-grid mt-2">
                        <label for="rowSelectColumn" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{'TABLE_WIDGET_CONFIGURATION.ROW_SELECT_COLUMN' | translate}}:</label>
                        <div class="p-col-12 p-md-10">
                            <p-dropdown class="w-full" [required]="true" [autoDisplayFirst]="true" [options]="widget!.datasourceConfiguration!.parametricQuery!.metadata" [(ngModel)]="widget!.rowSelectColumn" [optionLabel]="'description'" [optionValue]="'name'" ></p-dropdown>
                        </div>
                    </div>

                    <div class="p-field p-grid mt-2">
                        <label for="rowSelectColumn" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'TABLE_WIDGET_CONFIGURATION.ROW_SELECT_COLUMN_PARAM_NAME' | translate }}</label>
                        <div class="p-col-12 p-md-10">
                            <input id="rowSelectColumn" type="text" class="w-full" [(ngModel)]="widget!.rowSelectParamName" pInputText placeholder="{{ widget!.rowSelectColumn }}" />
                        </div>
                    </div>
                    <div class="p-field p-grid mt-2">
                        <label for="rowSelectColumn" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">{{ 'Target' | translate }}</label>
                        <div class="p-col-12 p-md-10">
                            <input id="rowSelectColumn" pTooltip="Insert the slug of the target page"  type="text" 
                            class="w-full" [(ngModel)]="widget!.rowSelectTarget" 
                            pInputText placeholder="{{ 'Target' | translate }}" />
                        </div>
                    </div>

                </ng-container>
            </div>
        </div>

    </ng-container>
</ng-container>
