<!--[formGroup]="form"-->
<form class="row" *ngIf="form.get('data')">

	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-UPLOAD-TITLE'
		| translate}}</h5>

	<mat-form-field class="col-12">
		<mat-label>
			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-UPLOAD-PLACEHOLDER' | translate}}
		</mat-label>
		<input matInput type="string"
			   [formControl]="form.get('data').get('label')">
	</mat-form-field>

	<mat-form-field class="col-12">
		<mat-label>
			{{ "DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-UPLOAD-MAX-FILE-SIZE" |
			translate: { maxfilesize:  getConfiguration().maxFileSizeInMB.toString() } }}
		</mat-label>
		<input matInput type="number" min="1" [max]="getConfiguration().maxFileSizeInMB"
			   [formControl]="form.get('data').get('maxFileSizeInMB')">
	</mat-form-field>

	<mat-form-field class="col-12">
		<mat-label>
			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-UPLOAD-SELECT-FILETYPE' | translate}}
		</mat-label>
		<mat-select multiple [formControl]="typesFormControl">
			<mat-option *ngFor="let type of types; let i=index" [value]="type.value" (click)="selectedType(type)"
						[disabled]="form.get('data').get('types').disabled">
				{{type.label}}
			</mat-option>
		</mat-select>
	</mat-form-field>

	<div class="col-12">
		<div>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-UPLOAD-CUSTOM-FILETYPE' | translate}}</div>
		<ng-container *ngFor="let type of form.get('data').get('types')['controls'] index as i">
			<div *ngIf="isCustomType(type.value.value)" class="row">
				<mat-form-field class="col">
					<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-UPLOAD-LABEL' | translate}}</mat-label>
					<input matInput type="string"
						   [formControl]="this.form.get('data').get('types').get(''+i).get('label')">
				</mat-form-field>
				<mat-form-field class="col">
					<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-UPLOAD-VALUE' | translate}}</mat-label>
					<input matInput type="string"
						   [formControl]="this.form.get('data').get('types').get(''+i).get('value')">
				</mat-form-field>
				<button mat-icon-button class="col-auto" (click)="deleteRow(i)" type="button"
						[disabled]="form.get('data').get('types').disabled">
					<mat-icon>delete</mat-icon>
				</button>
			</div>
		</ng-container>
	</div>
	<div class="col-auto">
		<button mat-icon-button (click)="addNewRow()" type="button" [disabled]="form.get('data').get('types').disabled">
			<mat-icon>add</mat-icon>
		</button>
	</div>
</form>
