<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [formGroup]="form" class="dynamic-form-composite-field row">

	<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
		<div class="row">
			<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField toc-copositeField-header" [id]="this.form.get('id').value">
				{{form.get('numbering').value}}
				{{form.get('title').value}}
				<!-- <a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer">
								Mark For Consideration
							</a> -->
			</h5>
			<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
				matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>


			<h6 *ngIf="form.get('description').value  && !isChild" class="col-12">{{form.get('description').value}}</h6>
			<h6 *ngIf="form.get('extendedDescription').value  && !isChild" class="col-12">
				<i>{{form.get('extendedDescription').value}}</i>
			</h6>

			<app-form-field class="col-12" [form]="form.get('fields')['controls'][0]"
				[datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>

			<!-- <button mat-icon-button type="button" *ngIf="!isChild" class="deleteBtn col-auto" (click)="DeleteField();">
				<mat-icon>delete</mat-icon>
			</button> -->

		</div>
	</div>
	<div *ngIf="form.get('fields').length > 1" class="col-12">
		<div class="row">
			<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField toc-copositeField-header" [id]="this.form.get('id').value">
				{{form.get('numbering').value}}
				{{form.get('title').value}}</h5>
			<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
				matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>

			<h6 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h6>
			<h6 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
				<i>{{form.get('extendedDescription').value}}</i></h6>
			<div *ngFor="let fieldFormGroup of form.get('fields')['controls']; let i = index;" class="col-12">
				<!-- <div class="row">
					<div class="col-12" *ngIf="(fieldFormGroup.get('multiplicity')?.value?.max - 1) > (fieldFormGroup.get('multiplicityItems')?.length)">
						<a (click)="addMultipleField(i+1)" style="cursor: pointer">
							Add one more field +
						</a>
					</div> -->
				<app-form-field [form]="fieldFormGroup" class="col-12" [datasetProfileId]="datasetProfileId"
					[isChild]="true"></app-form-field>
				<!-- <div *ngIf="fieldFormGroup" class="col-12">
						<div *ngFor="let multipleField of fieldFormGroup.get('multiplicityItems')['controls']; let j = index" class="row">
							<app-form-field class="col-12" [form]="multipleField" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
							<button mat-icon-button type="button" *ngIf="isChild" class="deleteBtn col-auto" (click)="DeleteField(i);">
								<mat-icon>delete</mat-icon>
							</button>
						</div>
					</div>
				</div>-->
			</div>
		</div>
	</div>
</div>
