<div *ngIf="form && visible" [id]="this.form.get('id').value"
 [formGroup]="form" [ngSwitch]="renderStyle" class="dynamic-form-field row">

	<h5 *ngIf="this.form.get('title').value && !isChild">{{this.form.get('title').value}}</h5>
	<mat-icon *ngIf="this.form.get('additionalInformation').value && !isChild" matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>

	<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
	</h5>
	<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
		<i>{{this.form.get('extendedDescription').value}}</i>
	</h5>
	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
		<input matInput [formControl]="form.get('value')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
		<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		<mat-error *ngIf="form.get('value').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
	</mat-form-field>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '')}}" [formControl]="form.get('value')"
					 [configuration]="multipleAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '')}}" [formControl]="form.get('value')"
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
			<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
				<mat-select [formControl]="form.get('value')" placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [required]="form.get('validationRequired').value" [multiple]="form.get('data').value.multiList">
					<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}
					</mat-option>
				</mat-select>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.InternalDmpEntities" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Researchers">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="multipleAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Datasets">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="multipleAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Dmps">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="multipleAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.CheckBox" class="col-12">
		<mat-checkbox [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
			{{form.get('data').value.label}}</mat-checkbox>
	</div>

	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
		<textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="form.get('validationRequired').value"
		 placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}"></textarea>
		<!-- <textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"
		 placeholder="{{ form.get('data').value.label | translate }}"></textarea> -->
		<button mat-icon-button type="button" *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
			<mat-icon>close</mat-icon>
		</button>
		<mat-error *ngIf="form.get('value')['errors'] && form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
	</mat-form-field>
	<ng-container *ngSwitchCase="datasetProfileFieldViewStyleEnum.RichTextArea">
		<rich-text-editor-component class="col-12"
									[parentFormGroup]="form" [controlName]="'value'"
									[placeholder]="form.get('data').value.label"
									[required]="form.get('validationRequired').value"
									[wrapperClasses]="'full-width editor ' +
														((form.get('validationRequired').value && form.get('value').touched && form.get('value').hasError('required')) ? 'required' : '')">
		</rich-text-editor-component>
		<div [class]="(form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched) ? 'visible' : 'invisible'" class="col-12">
			<div class="mat-form-field form-field-subscript-wrapper">
				<mat-error *ngIf="form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
			</div>
		</div>
	</ng-container>
	<ng-container *ngSwitchCase="datasetProfileFieldViewStyleEnum.Upload">
		<div class="col-12 d-flex justify-content-center">
			<ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)"
						  [multiple]="false" [accept]="typesToString()">
				<ngx-dropzone-preview *ngIf="form.value.value && form.value.value.name" class="file-preview"
									  [removable]="true" (removed)="onRemove()">
					<ngx-dropzone-label class="file-label">{{ form.value.value.name }}</ngx-dropzone-label>
				</ngx-dropzone-preview>
			</ngx-dropzone>
		</div>
		<div class="col-12 d-flex justify-content-center attach-btn">
			<button *ngIf="!form.value.value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"
					[disabled]="!!form.value.value">
				<mat-icon class="mr-2">upload</mat-icon>
				<mat-label>{{ (form.get('data').value.label | translate)}}</mat-label>
			</button>

			<button *ngIf="form.value.value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn">
				<mat-icon class="mr-2">download</mat-icon>
				<mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
			</button>
		</div>
	</ng-container>

<!--	<ng-container *ngSwitchCase="datasetProfileFieldViewStyleEnum.Table">-->
<!--		<table-editor-component class="col-12"></table-editor-component>-->
<!--		<div [class]="(form.get('value')['errors'] && form.get('value').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">/-->
<!--			<mat-error *ngIf="form.get('value')['errors'] && form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>-->
<!--		</div>-->
<!--	</ng-container>-->


	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
		<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="true">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }}</mat-radio-button>
			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="false">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }}</mat-radio-button>
		</mat-radio-group>
		<small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</small>
		<small class="text-muted d-inline-block" *ngIf="(form.get('validationRequired').value) && !form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</small>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
		<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
			<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index" class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
		</mat-radio-group>
		<small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</small>
		<small class="text-muted d-inline-block" *ngIf="(form.get('validationRequired').value) && !form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}} *</small>
	</div>

	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
		<input matInput placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" class="table-input" [matDatepicker]="date" [required]="form.get('validationRequired').value"
		 [formControl]="form.get('value')">
		<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
		<mat-datepicker #date></mat-datepicker>
		<mat-error *ngIf="form.get('value').hasError('required')">
			{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</mat-error>
	</mat-form-field>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ExternalDatasets" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DataRepositories" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>
	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.PubRepositories" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
												[configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
											  [configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>
	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.JournalRepositories" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
												[configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
											  [configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Taxonomies" class="col-12">
		<div *ngIf="form.get('data').value" class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
												[configuration]="taxonomiesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
											  [configuration]="taxonomiesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Licenses" class="col-12">
		<div *ngIf="form.get('data').value" class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
												[configuration]="licensesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
											  [configuration]="licensesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Publications" class="col-12">
		<div *ngIf="form.get('data').value" class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
												[configuration]="publicationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
											  [configuration]="publicationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Registries" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="registriesAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Services" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="servicesAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Tags" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="form.get('value')" placeholder="{{('DATASET-EDITOR.FIELDS.TAGS' | translate) + (form.get('validationRequired').value? ' *': '')}}"></app-multiple-auto-complete>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Researchers" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					[configuration]="researchersAutoCompleteConfiguration">
				</app-multiple-auto-complete> -->

				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="researchersAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Organizations" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					[configuration]="organisationsAutoCompleteConfiguration">
				</app-multiple-auto-complete>
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> -->

				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="organisationsAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="organisationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
				</ng-container>

				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatasetIdentifier" class="col-12">
		<div class="row" *ngIf="datasetIdInitialized">
			<mat-form-field class="col-md-12">
				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
			</mat-form-field>
			<mat-form-field class="col-md-12">
				<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (form.get('validationRequired').value? ' *': '')">
					<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
						{{ type.name }}
					</mat-option>
				</mat-select>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Currency" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
					<app-single-auto-complete placeholder="{{ (form.get('data').value.label | translate) + (form.get('validationRequired').value? ' *': '') }}" [formControl]="form.get('value')"
					 [configuration]="currencyAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Validation" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-4">
				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
			</mat-form-field>
			<mat-form-field class="col-md-4">
				<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate) + (form.get('validationRequired').value? ' *': '')">
					<mat-option *ngFor="let type of validationTypes" [value]="type.value">
						{{ type.name }}
					</mat-option>
				</mat-select>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
			</mat-form-field>
			<div class="col-md-2">
				<button type="button" mat-button class="lightblue-btn" (click)="validateId()">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
				</div>
			<div class="col-md-1">
				<mat-progress-spinner *ngIf="validationIcon === 'loading'" mode="indeterminate" [diameter]="24"></mat-progress-spinner>
				<mat-icon *ngIf="validationIcon !== 'loading'" [ngClass]="{'success': validationIcon === 'done', 'fail': validationIcon === 'clear'}">{{validationIcon}}</mat-icon>
			</div>
		</div>
	</div>
</div>
