<div class="main-content">
	<div class="container-fluid dmp-profile-editor">
		<div class="row align-items-center mb-4" *ngIf="formGroup">
			<div class="col-auto">
				<h3 *ngIf="isNew">{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h3>
				<h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
			</div>
			<div class="col"></div>
			<div class="col-auto" *ngIf="!isNew">
				<button mat-button class="action-btn" type="button" (click)="delete()">
					<mat-icon>delete</mat-icon>
					{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
				</button>
			</div>
			<div class="col-auto" *ngIf="formGroup.get('status').value==1">
				<button mat-button class="finalize-btn" (click)="downloadXML()"
				 type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
			</div>
			<div *ngIf="formGroup.get('status').value!=1" class="col-auto">
				<button mat-button  class="finalize-btn" (click)="finalize()"
				 [disabled]="!formGroup.valid" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
			</div>
		</div>
		<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
			<mat-card style="padding: 2em;">
				<!-- <mat-card-header>
					<mat-card-title *ngIf="isNew">
						<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
					</mat-card-title>
					<mat-card-title *ngIf="!isNew">
						<h4>{{formGroup.get('label').value}}</h4>
					</mat-card-title>
				</mat-card-header> -->
				<mat-card-content>
					<div class="row" style="gap:1em">
						<mat-form-field class="col-lg-6" appearance="legacy">
							<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label"
							 required>
							<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
								{{formGroup.get('label').getError('backendError').message}}</mat-error>
							<mat-error *ngIf="formGroup.get('label').hasError('required')">
								{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
						</mat-form-field>
						<h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4>

						<div class="col-12">
							<div class="row" *ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
								<div class="col-10">
									<div class="row">
										<mat-form-field class="col">
											<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" [formControl]="fieldFormGroup.get('label')"
											 required>
											<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
												{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
											<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
												{{fieldFormGroup.get('label').getError('backendError').message}}
											</mat-error>
										</mat-form-field>
										<mat-form-field class="col">
											<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}" [formControl]="fieldFormGroup.get('type')" required>
												<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()" [value]="fieldType">
													{{ getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
												{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
											<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
												{{fieldFormGroup.get('type').getError('backendError').message}}
											</mat-error>
										</mat-form-field>
										<mat-form-field class="col">
											<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}" [formControl]="fieldFormGroup.get('dataType')"
											 required>
												<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()" [value]="fieldDataType">
													{{ getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
												{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
											<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
												{{fieldFormGroup.get('dataType').getError('backendError').message}}
											</mat-error>
										</mat-form-field>
										<div class="centered-row-item col-auto">
											<mat-checkbox [formControl]="fieldFormGroup.get('required')">
												{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}
											</mat-checkbox>
										</div>
										<div *ngIf="isExternalAutocomplete(fieldFormGroup)" class="row">
											<app-dmp-profile-external-autocomplete-field-editor-component [form]="fieldFormGroup">
											</app-dmp-profile-external-autocomplete-field-editor-component>
										</div>
									</div>
								</div>

								<div class="col-2">
									<div class="row">
										<div class="col-auto" *ngIf="!isNew">
											<button mat-icon-button type="button" (click)="removeField(i)" [disabled]="viewOnly">
												<mat-icon class="mat-24">delete</mat-icon>
											</button>
										</div>
										<div class="col-auto" *ngIf="!isNew && formGroup.get('status').value==0 && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
											<button mat-mini-fab color="primary" type="button" (click)="addField()" [disabled]="viewOnly">
												<mat-icon class="mat-24">add</mat-icon>
											</button>
										</div>
										<div class="col-auto" *ngIf="isNew && i != 0">
											<button mat-mini-fab class="remove" type="button" (click)="removeField(i)">
												<mat-icon class="mat-24">remove</mat-icon>
											</button>
										</div>
										<div class="col-auto" *ngIf="isNew && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
											<button mat-mini-fab color="primary" type="button" (click)="addField()" [disabled]="viewOnly">
												<mat-icon class="mat-24">add</mat-icon>
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row mt-4">
						<div class="col-auto">
							<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
						</div>
						<div class="col"></div>
						<!-- <div class="col-auto" *ngIf="!isNew">
							<button mat-raised-button color="primary" type="button" (click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button>
						</div>
						<button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto" color="primary" (click)="finalize()"
						 [disabled]="!formGroup.valid" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
						<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto" color="primary" (click)="downloadXML()"
						 type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
						<div class="col-auto" *ngIf="!viewOnly">
							<button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid">
								{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
							</button>
						</div> -->

						<div class="col-auto" *ngIf="!viewOnly">
							<button mat-button class="action-btn" type="submit" [disabled]="!formGroup.valid">
								{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
							</button>
						</div>
					</div>
				</mat-card-content>
			</mat-card>
		</form>
	</div>
</div>
