<div class="template-container">
	<div mat-dialog-title class="row d-flex m-0 header">
		<span class="template-title align-self-center">{{'DATASET-CREATE-WIZARD.PREFILL-STEP.TITLE' | translate}}</span>
		<span class="ml-auto align-self-center" (click)="closeDialog()"><mat-icon
			class="close-icon">close</mat-icon></span>
	</div>
	<div *ngIf="progressIndication" class="progress-bar">
		<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
	</div>
	<div mat-dialog-content *ngIf="prefillForm" [formGroup]="prefillForm" class="definition-content">
		<div class="row d-flex align-items-center justify-content-center">
			<div class="pb-4 pl-4 pr-4">
				{{'DATASET-CREATE-WIZARD.PREFILL-STEP.HINT' | translate}}
			</div>
		</div>
		<div class="row d-flex align-items-center justify-content-center" [class.pb-4]="isPrefilled">
			<button mat-raised-button type="button" class="empty-btn"
					(click)="closeDialog()">{{'DATASET-CREATE-WIZARD.PREFILL-STEP.MANUALLY' | translate}}</button>
			<div class="ml-2 mr-2">{{'DATASET-CREATE-WIZARD.PREFILL-STEP.OR' | translate}}</div>
			<button mat-raised-button type="button" class="prefill-btn"
					(click)="isPrefilled = true">{{'DATASET-CREATE-WIZARD.PREFILL-STEP.PREFILL' | translate}}</button>
		</div>
		<div *ngIf="isPrefilled" class="row">
			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
				<h4 class="col-auto heading">{{'DATASET-CREATE-WIZARD.PREFILL-STEP.PROFILE' | translate}}</h4>
			</div>
			<mat-form-field class="col-md-12">
				<mat-select placeholder="{{'DATASET-CREATE-WIZARD.PREFILL-STEP.PROFILE'| translate}}" [required]="true" [compareWith]="compareWith" formControlName="profile">
					<mat-option *ngFor="let profile of data.availableProfiles" [value]="profile">
						{{profile.label}}
					</mat-option>
				</mat-select>
				<mat-error *ngIf="prefillForm.get('profile').hasError('backendError')">{{prefillForm.get('profile').getError('backendError').message}}</mat-error>
			</mat-form-field>
		</div>
		<div *ngIf="isPrefilled" class="row">
			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
				<h4 class="col-auto heading">{{'DATASET-CREATE-WIZARD.PREFILL-STEP.PREFILLED-DATASET' | translate}}</h4>
			</div>
			<mat-form-field class="col-md-12">
				<app-single-auto-complete [required]="true" [formControl]="prefillForm.get('prefill')"
										  placeholder="{{'DATASET-CREATE-WIZARD.PREFILL-STEP.SEARCH' | translate}}"
										  [configuration]="prefillAutoCompleteConfiguration">
				</app-single-auto-complete>
			</mat-form-field>
		</div>

	</div>
	<div *ngIf="isPrefilled">
		<div class="col-auto d-flex pb-4 pt-2">
			<button mat-raised-button type="button" class="prefill-btn ml-auto" [disabled]="prefillForm.invalid"
					(click)="next()">{{'DATASET-CREATE-WIZARD.PREFILL-STEP.NEXT' | translate}}</button>
		</div>
	</div>
</div>
