<ng-container *ngIf="parametricQueries.length > 0 ">
	<div class="p-fluid">
		<div class="p-field p-col-12 p-md-4" style="padding-bottom: 1em;">
			<mat-checkbox class="p-component" [(ngModel)]="widget!.sortData">
				{{ 'CHART_WIDGET_CONFIGURATION.SORTDATA' | translate }} </mat-checkbox>
				<br/>
			<mat-checkbox class="p-component" [(ngModel)]="widget!.skipXLabel">
			{{ 'CHART_WIDGET_CONFIGURATION.SKIPLABEL' | translate }} </mat-checkbox>
		</div>
		<div class="p-field p-col-12 p-md-4">
			<label class="p-col-6 p-mb-2 p-md-2 p-mb-md-0 font-semibold text-gray-600">Attiva azione su onClick sul grafico</label>
		</div>
		<div class="p-field p-col-12 p-md-4" style="padding-bottom: inherit;">
			<label class="p-col-6 p-mb-2 p-md-2 p-mb-md-0">Target: </label>
          	  <input id="labelValue" type="text" [(ngModel)]="widget!.target"
           	 
				size="20" />
		</div>
		<div class="p-field p-col-12 p-md-4" style="padding-bottom: 2em;">			
			<label class="p-col-6 p-mb-2 p-md-2 p-mb-md-0">Parameter name: </label>
			<input id="labelValue" type="text" [(ngModel)]="widget!.parameterName"
           	 
				size="20" /> 
		</div>
	</div>
<div class="p-fluid" *ngIf="parametricQueries && widget?.seriesList">
	<!-- 	<div class="col-12 mb-4"> -->
	<!-- 		<h3 class="text-gray-600 font-semibold">{{'CHART_WIDGET_CONFIGURATION.STYLE' -->
	<!-- 			| translate}}:</h3> -->
	<!-- 		<p-dropdown *ngIf="widget" class="mb-4 pb-4" filterBy="description" -->
	<!-- 			optionLabel="description" optionValue="name" -->
	<!-- 			placeholder="{{ 'CHART_WIDGET_CONFIGURATION.SELECT_A_STYLE' | translate }}" -->
	<!-- 			[options]="chartTypes" [filter]="true" [showClear]="false" -->
	<!-- 			[(ngModel)]="widget!.chartType"> </p-dropdown> -->
	<!-- 	</div> -->

	<div *ngFor="let series of widget?.seriesList; let i=index"
		class="shadow-2 p-3 mt-{{ i===0 ? '0' : '3'}}">
		<div>
			<button (click)="removeSeries(series, i)"
				pTooltip="{{ 'CHART_WIDGET_CONFIGURATION.REMOVE_SERIES' | translate }}"
				pButton type="button" icon="pi pi-times pi-sm" style="float: right"
				class="p-button-text button-close p-button-danger p-0">
				<mat-icon style="color: red">clear</mat-icon>
			</button>
			<div class="text-lg font-semibold pb-1">Serie {{i+1}}</div>
		</div>
		<ng-container *ngIf="series.datasourceConfiguration">
		<h4 class="text-gray-600 font-semibold">{{'CHART_WIDGET_CONFIGURATION.SELECTED_DATASOURCE'
			| translate}}:</h4>

		<div class="p-field p-col-12 p-md-4" style="padding-bottom: inherit;">
            <label class="p-col-6 p-mb-2 p-md-2 p-mb-md-0">Label: </label>
            <input id="labelValue" type="text" [(ngModel)]="series!.datasourceConfiguration.label!"
            class="p-field p-component p-element ng-pristine ng-valid p-filled ng-touched p-col-6"
			size="20" /> 
        </div>
		<div></div>
		
		<app-datasource-configuration [showSelectDatasourceLabel]="false"
			[datasourceConfiguration]="series.datasourceConfiguration"
			[parametricQueries]="parametricQueries">
		</app-datasource-configuration>

		<ng-container
			*ngIf="series.datasourceConfiguration?.parametricQuery?.metadata">

		<h4 class="text-gray-600 font-semibold">{{'CHART_WIDGET_CONFIGURATION.SELECTED_COLUMNS'
			| translate}}:</h4>

		<p-multiSelect
			[options]="series.datasourceConfiguration!.parametricQuery!.metadata"
			[(ngModel)]="series.selectedColumns" display="chip"
			[optionLabel]="'name'" [optionValue]="'name'"
			(onChange)="selectedColumnsChanged(series, $event)"></p-multiSelect>
		<h4 class="text-gray-600 font-semibold">{{'CHART_WIDGET_CONFIGURATION.X_AXIS_COLUMN'
			| translate}}:</h4>

		<p-dropdown
			[options]="series.datasourceConfiguration!.parametricQuery!.metadata"
			[(ngModel)]="series.xaxisColumn" [optionLabel]="'name'"
			[optionValue]="'name'">
		</p-dropdown> 
		<p-fieldset
			legend="{{ 'CHART_WIDGET_CONFIGURATION.SERIES_STYLES' | translate }}"
			[toggleable]="true" class="mt-1 block">
		<div *ngFor="let style of series.styles" class="mt-1 block">

			<div class="text-lg font-light text-cyan-600"
				style="border-bottom: 3px solid #cbe5eb;">{{style.column}}</div>
			<span class="text-gray-600 font-semibold">{{'CHART_WIDGET_CONFIGURATION.STYLE'
				| translate}}:</span>
			<p-dropdown *ngIf="widget" class="mb-4 pb-4" filterBy="description"
				optionLabel="description" optionValue="name"
				placeholder="{{ 'CHART_WIDGET_CONFIGURATION.SELECT_A_STYLE' | translate }}"
				[options]="chartTypes" [filter]="true" [showClear]="false"
				[(ngModel)]="style.chartType"> </p-dropdown>
			<ng-container *ngIf="style.chartType === 'line'"> <mat-checkbox
				class="p-component" [(ngModel)]="style.interpolate">
			{{ 'CHART_WIDGET_CONFIGURATION.INTERPOLATE' | translate }} </mat-checkbox>
			<br />
			<mat-checkbox class="p-component" [(ngModel)]="style.fill">
			{{ 'CHART_WIDGET_CONFIGURATION.FILL' | translate }} </mat-checkbox> 
		</ng-container>
			<div class="p-field p-grid mt-2">
				<label for="style_color" class="sm:p-col-fixed" style="width: 100px">
					{{ 'CHART_WIDGET_CONFIGURATION.SERIES_COLOR' | translate }} </label>
				<div class="sm:p-col">
					<p-colorPicker id="style_color" [(ngModel)]="style.color"></p-colorPicker>
				</div>
			</div>

		</div>
		</p-fieldset> 
		</ng-container>
		</ng-container>
	</div>

	<button (click)="addSeries()"
		pTooltip="{{ 'CHART_WIDGET_CONFIGURATION.ADD_SERIES' | translate }}"
		pButton type="button" icon="pi pi-plus"
		label="{{ 'CHART_WIDGET_CONFIGURATION.ADD_SERIES' | translate }}"
		class="p-button-text p-button-info">
	</button>

</div>
</ng-container>
<ng-container *ngIf="parametricQueries.length === 0"> <mat-spinner></mat-spinner>
</ng-container>