<div class="main-info" [formGroup]="formGroup">
	<div class="col-12 intro">
		<!-- <p>{{'DMP-EDITOR.DATASET-INFO.INTRO' | translate}}</p> -->
		<p>{{'DMP-EDITOR.DATASET-INFO.SECOND-INTRO' | translate}}</p>
	</div>
	<div class="col-12 card">
		<div class="row">
			<div class="col-12">
				<div class="heading">4.1 {{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}*</div>
				<div class="hint">
					<div class="pb-1">{{'DMP-EDITOR.DATASET-INFO.HINT' | translate}}</div>
					<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
				</div>
				<div class="profile-form">
					<mat-form-field>
						<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
						<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)" (optionSelected)="onOptionSelected()">
						</app-multiple-auto-complete>
						<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
							{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
						<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" (click)="allAvailableProfiles($event)">
							<mat-icon class="icon-btn">view_list</mat-icon>
						</button>
					</mat-form-field>
				</div>
				<div class="col pl-0 pt-2 pb-3 d-flex">
					<span class="not-found">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.FIELDS.HELP' | translate}}</span>
				</div>
			</div>
		</div>
	</div>
</div>
