<div class="row">
	<div class="col">
		<h3>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.NEW-TITLE' | translate}}</h3>
	</div>
	<div class="col-auto">
		<mat-button-toggle-group [ngModel]="_inputValue">
			<mat-button-toggle value="add" *ngIf="listingMode()" (change)="onValChange($event.value)" matTooltip="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.ADD-BUTTON-TOOLTIP' | translate}}">
				<mat-icon>add</mat-icon>
			</mat-button-toggle>
			<mat-button-toggle value="list" (change)="onValChange($event.value)" matTooltip="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.LIST-BUTTON-TOOLTIP' | translate}}">
				<mat-icon>format_align_left</mat-icon>
			</mat-button-toggle>
		</mat-button-toggle-group>
	</div>
	<div class="col-12">
		<div *ngIf="toggleButton === 0" class="row">
			<div class="col-12" *ngFor="let dataset of this.formGroup.get('datasets').get('datasetsList')['controls'] let i=index;">
				<mat-card>
					<mat-card-content>
						<div class="row">
							<div class="col">
								<h4>{{dataset.get('datasetLabel').value}}</h4>
							</div>
							<div class="col-auto">
								<button mat-icon-button type="button" (click)="editDataset(i);">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
							<div class="col-auto">
								<button mat-icon-button type="button" (click)="deleteDataset(i);">
									<mat-icon>delete</mat-icon>
								</button>
							</div>
						</div>
					</mat-card-content>
				</mat-card>
			</div>
			<!-- <button mat-fab class="mat-fab-bottom-right" color="primary" (click)="listOrEditor()">
                <mat-icon class="mat-24">add</mat-icon>
            </button> -->
		</div>
	</div>
	<div *ngIf="toggleButton === 2 && editedDataset" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
				<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.DATASET-LABEL' | translate}}"
				 type="string" name="datasetLabel" [formControl]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset].get('datasetLabel')"
				 required>
				<mat-hint>{{'QUICKWIZARD.HINT' | translate}}</mat-hint>
			</mat-form-field>
			<div class="row toc-pane-container" #boundary>
				<div class="col-md-8 h-100 ">
					<app-dataset-description-form class="w-100 h-100" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]"
			 		[visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value.id" [linkToScroll]="linkToScroll">
					</app-dataset-description-form>
				</div>
				<div #spacer></div>
					<div class="col-md-4">
						<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
					</div>
			</div>
		</div>
	</div>
</div>
