<!-- TO LINK -->
<!-- <div class="row">
	<h4 *ngIf="isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE' | translate}}</h4>
	<h4 *ngIf="!isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE' | translate}}</h4>
	<mat-checkbox class="col-auto" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}</mat-checkbox>
	<mat-checkbox class="col-auto" [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)"
	 [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}</mat-checkbox>
	<mat-checkbox class="col" [formControl]="this.form.get('hasCommentField')">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}</mat-checkbox>
</div> -->

<!-- TO LINK -->

<!--
<div class="row">
	<mat-form-field *ngIf="isComposite" class="col">
		<input matInput type="string" placeholder="Id" [formControl]="form.get('id')" required>
		<mat-error *ngIf="form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		<mat-error *ngIf="form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
	</mat-form-field>
	<mat-form-field *ngIf="isComposite" class="col">
		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-TITLE' | translate}}"
		 [formControl]="this.form.get('title')">
	</mat-form-field>
	<mat-form-field *ngIf="!isComposite" class="col">
		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.FIELD-TITLE' | translate}}"
		 [formControl]="this.form.get('title')">
	</mat-form-field>
	<mat-form-field *ngIf="isMultiplicityEnabled" class="col">
		<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
		 type="number" [formControl]="form.get('multiplicity').get('min')" required>
		<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</mat-error>
	</mat-form-field>
	<mat-form-field *ngIf="isMultiplicityEnabled" class="col">
		<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
		 type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
		<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</mat-error>
	</mat-form-field>
	<mat-form-field class="col">
		<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ORDER' | translate}}"
		 [formControl]="this.form.get('ordinal')" required>
	</mat-form-field>
</div> -->


<!-- ID TOP RIGHT CORNER -->
<!-- <div class="field-id-container">
	{{this.form.get('id').value}}
	<button mat-mini-fab class="field-id-container-icon">
		<mat-icon>delete</mat-icon>
	</button>
</div> -->




<!-- MAIN CONTENT -->
<div class="main-content-page" [ngClass]="{'pb-2': !hasFocus}">
	<!-- TITLE -->
	<div class="col-12">
		<div class="row fielset-header">
			<!-- <div class="col-auto d-flex">
				<div class="align-self-center">
					{{numbering}}
				</div>
			</div> -->
			<mat-form-field appearance="none" class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
				<input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled>
			</mat-form-field>
			<!-- [appearance]="titleControl.focused? 'legacy':'none'" floatLabel="never" -->
			<mat-form-field class="col field-title" [appearance]="'none'" floatLabel="never">
				<textarea matInput type="text" [placeholder]="('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' |translate)+' '+('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput"
						  [formControl]="this.form.get('title')"></textarea>
			</mat-form-field>
		</div>
	</div>
	<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
		<div *ngIf="showDescription" class="mb-4">
			<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
			<rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
										[id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION'"
										[wrapperClasses]="'row'">
			</rich-text-editor-component>
		</div>
		<div *ngIf="showExtendedDescription" class="mb-4">
			<h5 style="font-weight: bold" class="row">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5>
			<rich-text-editor-component [parentFormGroup]="form" [controlName]="'extendedDescription'"
										[id]="'editor2'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION'"
										[wrapperClasses]="'row'">
			</rich-text-editor-component>
		</div>
		<div class="row" *ngIf="showAdditionalInfo">
			<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
				<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
				[formControl]="this.form.get('additionalInformation')"/>
			</mat-form-field>
		</div>

		<div class="row">
			<mat-form-field *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field" appearance="legacy">
				<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
				type="number" [formControl]="form.get('multiplicity').get('min')" required>
				<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
			</mat-form-field>
			<mat-form-field *ngIf="isMultiplicityEnabled" class="col pr-0 underline-line-field" appearance="legacy">
				<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
				type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
				<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
			</mat-form-field>
		</div>
		<div class="row">
			<mat-form-field *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field" appearance="legacy">
				<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-PLACEHOLDER' | translate}}"
					   type="text" [formControl]="form.get('multiplicity').get('placeholder')">
			</mat-form-field>
		</div>
	</div>


	<!-- FIELDS DETAILS AND ACTIONS -->
	<div class="row">

		<!-- FIELDS -->
		<div #inputs transition-group class="col-12" *ngIf="hasFocus" [@fade-in]>
			<div *ngFor="let field of fieldsArray.controls; let i=index;" class="row bg-white field-input mt-3" (click)="setTargetField(field)" transition-group-item>
				<!-- field-container -->
				<!-- [ngClass]="{'field-container-active': (field.get('id').value === targetField?.get('id').value) && hasFocus}" -->
				<!-- <div class="field-id-container">
					{{form.get('fields').get(''+i).get('id').value}} -->
					<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
						<mat-icon>delete</mat-icon>
					</button> -->
				<!-- </div> -->
				<!-- *ngIf="!isComposite" -->
				<app-dataset-profile-editor-field-component class="col-12"
					[form]="field" [showOrdinal]="false"
					[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
					[expandView]="hasFocus"
					[canBeDeleted]="fieldsArray.length !=1"
					(delete)="deleteField(i)">
					<div class="arrows mt-2">
						<ul class="list-unstyled list-inline d-flex align-items-center">
							<li *ngIf="canGoUp(i)" class="text-muted">
								<mat-icon style="cursor: pointer;" (click)="move(i)" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MOVE-UP' | translate">keyboard_arrow_up</mat-icon>
							</li>
							<li *ngIf="canGoDown(i)" class="text-muted">
								<mat-icon style="cursor: pointer;" (click)="move(i, 'down')" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MOVE-DOWN' | translate">keyboard_arrow_down</mat-icon>
							</li>
						</ul>
					</div>
				</app-dataset-profile-editor-field-component>
				<hr>
			</div>
<!--
			<div *ngIf="isComposite" class="row">
				<h4 class="col-12 titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' | translate}}
				</h4>
				<div class="col-12">
					<mat-expansion-panel *ngFor="let field of form.get('fields')['controls'] let i=index;" #panel class="field-container">
						<div class="field-id-container">
							random id
						</div>
						<mat-expansion-panel-header>
							<mat-panel-title class="cardTitle">{{i + 1}}. {{getFieldTile(field, i)}}</mat-panel-title>
							<div class="row">
								<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteField(i);" [disabled]="viewOnly">
									<mat-icon>delete</mat-icon>
								</button>
							</div>
						</mat-expansion-panel-header>
						<div id="{{indexPath + 'f' + i}}" *ngIf="panel.expanded">
							<app-dataset-profile-editor-field-component [form]="form.get('fields').get(''+i)" [indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-field-component>
						</div>
					</mat-expansion-panel>
				</div>
				<div class="col-12">
					<button mat-button class="full-width" (click)="addNewField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD' | translate}}</button>
				</div>
			</div> -->
		</div>

		<!-- PREVIEW -->

		<div class="col-12 previewer">
			<div *ngIf="hasFocus" class="d-flex mb-3" style="justify-content: space-between;">
				<span class="previewer-text">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
				<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('viewStyle').get('renderStyle').value">
					<ng-container *ngIf="!previewDirty">
						{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
					</ng-container>
					<ng-container *ngIf="previewDirty">
						{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}}
					</ng-container>
				</span>
			</div>
			<div  [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;" >
				<div *ngIf="previewForm && showPreview && firstField?.get('viewStyle').get('renderStyle').value" [@fade-in-fast]>
					<app-form-section-inner  [form]="previewForm">
					</app-form-section-inner>
				</div>
			</div>

			<div class="w-100" *ngIf="!firstField?.get('viewStyle').get('renderStyle').value">
				<em>
					{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
				</em>
			</div>

		</div>
		<div class="col-12">
			<hr *ngIf="hasFocus">
		</div>
	</div>


	<ng-container *ngIf="hasFocus">
		<div class="row justify-content-end pt-2" >
			<div class="col-auto">
				<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
					<!-- <li class="list-inline-item" (click)="addNewField()"><mat-icon>folder</mat-icon> <small>Add input</small></li> -->



					<li class="list-inline-item"  *ngIf="!viewOnly">

						<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
							<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate"/>
							<span class="fieldset-new-input-action">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
						</span>
						<!-- <mat-icon [matMenuTriggerFor]="inputmenu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate">folder</mat-icon> -->
						<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">

							<!-- <button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.TextArea)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</button>
							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.FreeText)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}</button>
							<mat-divider></mat-divider>
							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.BooleanDecision)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}</button>
							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.RadioBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}</button>
							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Select)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}</button>
							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.CheckBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}</button>

							<mat-divider></mat-divider>

							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatePicker)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}</button>
							<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Currency)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}</button>

							<mat-divider></mat-divider>


								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Registries)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Services)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Researchers)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Organizations)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.ExternalDatasets)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DataRepositories)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Other)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}</button>


							<mat-divider></mat-divider>

								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">Internal DMPs</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Tags)">Tags</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">Dataset Identifier</button>
								<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Validation)">Validation</button>
							 -->

							<mat-action-list>

								<button mat-list-item (click)="addNewInput(viewTypeEnum.TextArea)">

									<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Text Area icon">

									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}
								</button>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.RichTextArea)">

									<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Rich Text Area icon">

									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RichTextArea)}}
								</button>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.FreeText)">
									<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="Free Text icon">
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}
								</button>
								<mat-divider></mat-divider>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.Upload)">
									<!--									<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Upload icon">-->
									<mat-icon class="input_icon" style="font-size: 14px; color: #129d99; display: inline-flex; align-items: center">upload</mat-icon>
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Upload)}}
								</button>
								<mat-divider></mat-divider>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.BooleanDecision)">
									<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}
								</button>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.RadioBox)">
									<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}
								</button>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.Select)">
									<span class="input_icon">
										<img src="/assets/images/editor/icons/select.svg" alt="Select icon">
									</span>
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}
								</button>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.CheckBox)">
									<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox Icon">
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}
								</button>

								<mat-divider></mat-divider>

								<button mat-list-item (click)="addNewInput(viewTypeEnum.DatePicker)">
									<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker Icon">
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}
								</button>
								<button mat-list-item (click)="addNewInput(viewTypeEnum.Currency)">
									<img src="/assets/images/editor/icons/currency.svg" class="input_icon" alt="Currency Icon">
									{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}
								</button>

								<mat-divider></mat-divider>

								<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
									<img src="/assets/images/editor/icons/api.svg" class="input_icon" alt="APIs icon">

									APIs
								</button>
								<mat-action-list class="ml-4">
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Registries)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Services)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Services icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Researchers)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Researchers icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Organizations)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Organizations icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.ExternalDatasets)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="External Datasets icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.DataRepositories)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DataRepositories icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.PubRepositories)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="PubRepositories icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.PubRepositories)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.JournalRepositories)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="JournalRepositories icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.JournalRepositories)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Taxonomies)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Taxonomies icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Taxonomies)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Licenses)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Licenses icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Licenses)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Publications)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Publications icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Publications)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Other)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Other icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}
									</button>
								</mat-action-list>

								<mat-divider></mat-divider>
								<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
									<img src="/assets/images/editor/icons/argos_entities.svg" class="input_icon" alt="Argos Entities icon">
									Argos Entities
								</button>
								<mat-action-list class="ml-4">
									<button mat-list-item (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.InternalDmpEntities)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Tags)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Tags)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Datset Identifier icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatasetIdentifier)}}
									</button>
									<button mat-list-item (click)="addNewInput(viewTypeEnum.Validation)">
										<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
										{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Validation)}}
									</button>
								</mat-action-list>




							</mat-action-list>

						</mat-menu>
					</li>


					<!-- <li class="list-inline-item"><mat-icon>folder</mat-icon><small>CommentField</small></li> -->
					<li class="list-inline-item">
						<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
					</li>
					<li class="list-inline-item">
						<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [(checked)]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
							{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
						</mat-checkbox>
					</li>
					<li class="list-inline-item">
						<!-- <mat-icon>more_vert</mat-icon> -->
						<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
						<mat-menu #menu="matMenu">
							<!-- TODO to check -->
							<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>
							<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox>
							<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox>
						</mat-menu>
					</li>
				</ul>
			</div>
		</div>
	</ng-container>


</div>
<!--
<span>Preview</span>
<app-form-composite-field [form]="previewForm" *ngIf="previewForm">

</app-form-composite-field> -->
<!--
Current FORM: {{this.form.value |json}}
<br>
Target: {{this.targetField?.value |json}} -->



<!--
<button (click)="generatePreview()">Generate preview</button>

 -->

