<ng-container *ngIf="form">
	<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">

		<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">

			<div class="col-12">
				<div class="row">
					<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
						[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0"></app-form-composite-field>
				</div>
			</div>

			<div *ngIf="compositeFieldFormGroup" class="col-12">
				<div class="row">
					<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
						<div class="row">
							<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
								[isChild]="true" [showDelete]="true"></app-form-composite-field>
						</div>
					</div>
					<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
						class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
						<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)" >
							<button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled">
								<mat-icon>add_circle</mat-icon>
							</button>
							<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
							<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}</span>
						</span>
					</div>
					<ng-container *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="">
<!--						<input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">-->
						<rich-text-editor-component [parentFormGroup]="compositeFieldFormGroup" [controlName]="'commentFieldValue'"
													[id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate"
													[wrapperClasses]="'col-12 mb-2'">
						</rich-text-editor-component>
<!--						<mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>-->
					</ng-container>
					<!-- <div class="col"></div>
					<button class="col-auto" mat-icon-button type="button" (click)="next(compositeField)">
						<mat-icon>expand_more</mat-icon>
					</button> -->
				</div>
			</div>
		</div>
	</div>
</ng-container>
