<div class="row" *ngIf="form.get('data')">
	<div class="col-12">
		<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
			| translate}}</h5>
			<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
				<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
				<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED'| translate}}</small>
			</ng-container>
	</div>

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

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

	</div>
</div>