<div class="row" *ngFor="let ruleFormGroup of form['controls'] let i=index;" [formGroup]="ruleFormGroup">
	<span class="col-auto align-self-center">{{i + 1}}</span>

	<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}</span> -->
	<!-- Value -->
	<!-- <app-component-profile-editor-default-value-component class="col" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
	 [formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RULES-VALUE' | translate}}"
	 required="true"></app-component-profile-editor-default-value-component> -->


	<app-component-profile-editor-default-value-component class="col align-self-center" [viewStyle]="viewStyleForCheck" [form]="ruleFormGroup.get('value')"
	 [formArrayOptions]="formArrayOptionsForCheck" [comboBoxType]="comboBoxTypeForCheck" placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}"
	 required="true"></app-component-profile-editor-default-value-component>

	<!-- <span class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</span> -->

	<!-- Field Or Section ID -->
	<!-- <mat-form-field class="col-auto">
		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.TARGET' | translate}}"
		 formControlName="target" (change)="targetValidation()" required>
		<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
	</mat-form-field>
	 -->
	
	<!-- SELECTION -->
	<mat-form-field class="col align-self-center">
		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</mat-label>
		<mat-select formControlName="target" (openedChange)="computeOptions($event)">
			<!-- SHOW SECTIONS -->
			<!-- <mat-optgroup label="Sections" *ngIf="false">
				<mat-option *ngFor="let option of sectionOptions" [value]="option.id" style="line-height: normal;"
				[disabled]="parentIds.includes(option.id)">
					
					<span>
						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
					</span> <br>
					<small>
						{{option.id}} 
					</small>
					
				</mat-option>
			</mat-optgroup> -->
			<!-- SHOW FIELDSETS -->
			<mat-optgroup [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDSETS' | translate">
				<mat-option *ngFor="let option of fieldSetOptions" [value]="option.id" style="line-height: normal;"
				[disabled]="parentIds.includes(option.id) || hiddenBy.includes(option.id)"
				[matTooltip]="getToolTipMessage(option.id)"
				[matTooltipShowDelay]="700"
				>
					<span>
						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
					</span> <br>
					<small>
						{{option.id}} 
					</small>
				</mat-option>
			</mat-optgroup>
			<!-- SHOW FIELDS -->
			<mat-optgroup [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDS' | translate">
				<mat-option *ngFor="let option of fieldOptions" [value]="option.id" style="line-height: normal;"
				[disabled]="parentIds.includes(option.id) ||hiddenBy.includes(option.id)"
				[matTooltip]="getToolTipMessage(option.id)"
				[matTooltipShowDelay]="700"
				>
					<span>
						{{option.label? option.label:'<'+ ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>'}}
					</span> <br>
					<small>
						{{option.id}} 
					</small>
				</mat-option>
			</mat-optgroup>


		</mat-select>
		<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
	</mat-form-field>

	<div class="col-auto align-self-center"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
			<mat-icon>delete</mat-icon>
		</button>
	</div>
</div>



<!-- 
{{parentIds |json}}
<br>
{{this.formControlForCheck.value | json}} -->
<!-- 
<ng-template #optionTemplate>
	<span>
		{{option.label? option.label: '< Not Set> '}}
	</span> <br>
	<small>
		{{option.id}} 
	</small>
</ng-template> -->