<div class="col-12 intro">
	{{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}
</div>
<form *ngIf="form" novalidate [formGroup]="form" class="col-12 form-container">
	<!-- <app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication> -->
	<div class="row card">
		<div class="dynamic-form-editor col-md-12">
			<div id="form-container">
				<mat-vertical-stepper #stepper [linear]="false">
					<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
						<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
							<mat-step [stepControl]="sectionFormGroup">
								<ng-template matStepLabel><span class="toc-page-header" [id]="'page_' + z">{{pageFormGroup.get('title').value}}</span></ng-template>
								<!-- <div *ngIf="stepper.selectedIndex == z" class="row"> -->
								<div class="row">
									<app-form-section class="col-12" [form]="sectionFormGroup" [path]="z+1" [pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId" [linkToScroll]="linkToScroll"></app-form-section>
								</div>
							</mat-step>
						</div>
					</div>
				</mat-vertical-stepper>
			</div>
		</div>
	</div>
</form>
