<div [formGroup]="form" class="row dataset-profile-editor">
	<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.TITLE' | translate}}</h4>

	<mat-form-field class="col-md-3">
		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ID' | translate}}"
		 formControlName="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 class="col-md-3">
		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.TITLE' | translate}}"
		 formControlName="title">
	</mat-form-field>
	<mat-form-field class="col-md-3">
		<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.PAGE' | translate}}" formControlName="page"
		 required>
			<mat-option *ngFor="let pageGroup of form.root.get('pages')['controls'];" [value]="pageGroup.get('id').value">{{pageGroup.get('title').value}}</mat-option>
		</mat-select>
		<mat-error *ngIf="form.get('page').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
	</mat-form-field>
	<mat-form-field class="col-md-3">
		<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}"
		 formControlName="ordinal">
	</mat-form-field>
	<mat-form-field class="col-md-12">
		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"
		formControlName="description">
	</mat-form-field>
	<!-- <div class="col-md-6">
		<label>Default Visibility</label>
		<mat-radio-group formControlName="defaultVisibility" class="full-width">
			<mat-radio-button [value]="true">true</mat-radio-button>
			<mat-radio-button [value]="false">false</mat-radio-button>
		</mat-radio-group>
	</div> -->
	<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
		translate}}</h4>
	<div class="col-12">
		<mat-card class="field-card" *ngFor="let fieldControl of form.get('fieldSets')['controls'] let i=index;">
			<div class="row">
				<mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}</mat-card-title>
				<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="deleteFieldSet(i);" [disabled]="viewOnly">
					<mat-icon>delete</mat-icon>
				</button>
				<app-dataset-profile-editor-composite-field-component class="col-12" [form]="fieldControl" [indexPath]="indexPath + 'cf' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-composite-field-component>
			</div>
		</mat-card>
	</div>
	<div class="col-12"><button mat-button class="full-width" (click)="addField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
			| translate}}</button></div>
	<h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' |
		translate}}</h4>
	<div *ngIf="dataModel.sections.length > 0" class="col-12">
		<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
			<mat-expansion-panel-header>
				<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</mat-panel-title>
				<div class="row">
					<!-- <span class="col">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</span> -->
					<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteSectionInSection(i);" [disabled]="viewOnly">
						<mat-icon>delete</mat-icon>
					</button>
				</div>
			</mat-expansion-panel-header>
			<div id="{{indexPath + 's' + i}}" *ngIf="panel.expanded" class="row">
				<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section"
				 [indexPath]="indexPath + 's' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-section-component>
			</div>
		</mat-expansion-panel>
	</div>
	<div class="col-12"><button mat-button class="full-width" (click)="addSectioninSection()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-SUB-SECTION'
			| translate}}</button></div>

</div>
