<div class="row" *ngIf="form.get('data')">

	<h5 style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TITLE' | translate}}</h5>
	<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
	{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
	</mat-checkbox>

	<mat-form-field class="col-12">
		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-PLACEHOLDER' | translate}}</mat-label>
		<input matInput type="string"
		 [formControl]="form.get('data').get('label')">
	</mat-form-field>

	
	<h6 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
	<div class="col-12 d-flex align-items-center" style="margin-bottom: 1em;">
		<button mat-raised-button 
			type="button" 
			(click)="addSource()"
			style="margin-right: 2em;"
			>
			<!-- [ngClass]="{'text-danger':form.get('data').errors?.emptyArray && form.touched}" -->
			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}}
			
		</button>
		
		<!-- *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched" -->
		<div class="d-flex" *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
			<mat-icon 
			class="text-danger"
			matTooltip="At least one source must be provided."
			>warning_amber</mat-icon>
			<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-OTHER-SOURCES-REQUIRED'| translate}}</small>
		</div>
		
	</div>
</div>
	
	<div *ngFor="let singleForm of multiForm.controls; let i = index" class="row">
		<mat-form-field class="col-12">
			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TYPE' | translate}}</mat-label>
			<mat-select [formControl]="singleForm.get('autoCompleteType')">
				<mat-option [value]="0">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TYPE-UNCACHED' | translate}}</mat-option>
				<mat-option [value]="1">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TYPE-CACHED' | translate}}</mat-option>
			</mat-select>
		</mat-form-field>

		<mat-form-field class="col-md-12">
			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}</mat-label>
			<input matInput [formControl]="singleForm.get('url')">
			<mat-error *ngIf="singleForm.get('url').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
		<mat-form-field class="col-md-3">
			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}</mat-label>
			<input matInput
			[formControl]="singleForm.get('optionsRoot')">
			<mat-error *ngIf="singleForm.get('optionsRoot').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
		<mat-form-field class="col-md-3">
			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}</mat-label>
			<input matInput [formControl]="singleForm.get('autoCompleteOptions').get('label')">
			<mat-error *ngIf="singleForm.get('autoCompleteOptions').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
		<mat-form-field class="col-md-3">
			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-VALUE' | translate}}</mat-label>
			<input matInput [formControl]="singleForm.get('autoCompleteOptions').get('value')">
		</mat-form-field>
		<mat-form-field class="col-md-3">
			<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE' | translate}}</mat-label>
			<input matInput [formControl]="singleForm.get('autoCompleteOptions').get('source')">
			<mat-error *ngIf="singleForm.get('autoCompleteOptions').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
		<button mat-button type="button" (click)="removeSource(i)"><mat-icon>delete</mat-icon></button>
	</div>

