<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> -->
	<!-- <div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.TITLE' | translate}}</div> -->

	<!-- <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> -->
	
	<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} *</div>
	<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div>
	<mat-form-field class="col-12">
		<input matInput type="text" [placeholder]="('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"
		 formControlName="title">
		 <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
	</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> -->
	<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
	<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
	<div class="col-12">
		<rich-text-editor-component [parentFormGroup]="form" [controlName]="'description'"
									[placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION'">
		</rich-text-editor-component>
	</div>

	<!-- <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>

	-->
	<!-- Able to add fieldsets if only the sections has no subsections -->
	<!-- <ng-container *ngIf="form.get('sections').controls?.length == 0">
		<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>
	</ng-container> -->




			<!-- SUBSECTIONS -->
			
	<!-- <h4 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' |
		translate}}</h4>
	<div *ngIf="form.get('sections')['controls'].length > 0" class="col-12">
		<mat-expansion-panel *ngFor="let sectionFormGroup of form.get('sections')['controls']; 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 deleteBtn"> -->
					<!-- <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)"
				 [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>
