<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" *ngIf="!(parentLink.type == undefined)" >
	{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
	<span class="mat-button" (click)="deleteEntry(parentLink)" *ngIf="itemSelected?.id == parentLink?.id"><mat-icon>delete</mat-icon></span>
</span> -->

<div class="table-item row align-items-center" *ngIf="!(parentLink.type == undefined)">	
	<div class="col link-info" 
	>
	<!-- [ngStyle]="{'padding-top': (!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id)? '0em': '.6em'}" -->

		<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" >
			{{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
		</span> -->

		<!-- <span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == parentLink?.id}" (click)="itemClicked(parentLink)" 
		 [matBadge]="parentLink.subEntries?.length"
		 matBadgeOverlap="false"
		 [matBadgeHidden]="!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id"
		 matBadgePosition="before"
		 matBadgeColor="accent"
		 matBadgeSize="small"

		 [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
		 > -->
		<span class="table-label-element" 
		 [ngClass]="{'table-label-element-active': itemSelected?.id == parentLink?.id, 'text-danger': colorError() ||( (parentLink?.subEntriesType === tocEntryType.FieldSet )&& !colorError() && !selectedItemInLinks && parentLink?.form.invalid && colorizeInvalid && (itemSelected?.id != parentLink?.id) && !_findTocEntryById(itemSelected?.id, parentLink?.subEntries))}"
		 (click)="itemClicked(parentLink)" 
		 [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}"
		 [id]="'TABLE_ENTRY'+parentLink.id"
		 >
			<!-- {{parentLink?.numbering}} {{parentLink?.label? parentLink?.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}} -->
			<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : ('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + ' '+ ( (parentLink.type ===tocEntryType.Page? ('DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE' | translate) : (parentLink.type === tocEntryType.Section? ('DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate) : '') ) | lowercase )}} -->
			{{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
			<ng-container *ngIf="!parentLink.form.get('title').value" [ngSwitch]="parentLink.type">
				<ng-container *ngSwitchCase="tocEntryType.FieldSet">
					{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.QUESTION' | translate |lowercase}}
				</ng-container>
				<ng-container *ngSwitchCase="tocEntryType.Section">
					{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate |lowercase}}
				</ng-container>
				<ng-container *ngSwitchCase="tocEntryType.Page">
					{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE' | translate | lowercase}}
				</ng-container>

			</ng-container>
			<!-- {{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : parentLink.id}} -->
		</span>


	</div>
	<div class="col-auto d-flex align-items-center" >

		<ng-container *ngIf="!(!((parentLink?.subEntriesType == tocEntryType.FieldSet) && !selectedItemInLinks) || itemSelected?.id == parentLink.id ||isDragging)">
			<!-- <mat-icon class="text-danger" style="font-size: 1.4em;" *ngIf="!colorError() && parentLink?.form.invalid && colorizeInvalid && allFieldsAreTouched(parentLink?.form)">priority_high</mat-icon> -->
			<span class="badge-ball"
			>
				{{parentLink.subEntries?.length}}
			</span>
		</ng-container>


		<span style="cursor: pointer;" (click)="deleteEntry(parentLink)"
		[hidden]="!(!viewOnly && (itemSelected?.id == parentLink?.id) && (parentLink?.type != tocEntryType.FieldSet))"
		>
			<mat-icon style="font-size: 1.4em;">delete</mat-icon>
		</span>
	</div>
</div>

<!-- When item is not selected then show only the pages (first level) -->
<!-- <ng-container *ngIf="tocEntryIsChildOf(itemSelected,parentLink) || (!itemSelected && parentLink?.subEntriesType == tocEntryType.Page)"> -->
	<!-- [ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'pl-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }" -->
	<div dragula="TABLEDRAG" class="ml-2"  
	[ngClass]="{'border-left-active':itemSelected?.id == parentLink?.id, 'ml-1':itemSelected?.id == parentLink?.id, 'pb-4': isDragging && (parentLink?.type!= tocEntryType.FieldSet) && (parentLink?.id != draggingItemId) }"
	[hidden]="!((parentLink?.subEntriesType!= tocEntryType.FieldSet) || selectedItemInLinks || parentLink?.id === itemSelected?.id ||isDragging)"
	class="cdk-link-list"
	[id]="parentLink.id"
	[ngStyle]="{'border': overContainerId === parentLink?.id? '1px solid #129D99': '', 'min-height': ((!links?.length||(links.length ==1) ) && (parentLink?.type != tocEntryType.FieldSet) && (isDragging) && (draggingItemId != parentLink?.id)) ? '3em':'inherit'}"
	>
		<ng-container *ngIf="draggingItemId != parentLink?.id">
		
			<div *ngFor="let link of links; last as isLast"
				[ngClass]="{'mb-3': link.type === tocEntryType.Page}"
				[id]="DRAGULA_ITEM_ID_PREFIX + link.id"
			>
				<div  class="docs-link mt-0">
					<!-- <div  class="link-name"> -->
				
						<!-- <div class="table-item row">	
							<div class="col link-info">
								<span style="cursor: pointer;" [ngClass]="{'active': itemSelected?.id == link.id}" (click)="itemClicked(link)" >
									{{link.numbering}} {{link.label? link.label : 'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
								</span>
							</div>
							<div class="table-item-actions col-auto" *ngIf="!viewOnly">
								<button class="mat-button" (click)="deleteEntry(link)"><mat-icon>delete</mat-icon></button>
							</div>
						</div> -->
				
				
						<!-- For dev purposes -->
						<!-- <ng-container [ngSwitch]="link.type">
							<div *ngSwitchCase="tocEntryType.FieldSet">
								<span style="background-color: yellow;"> Fieldset</span>
							</div>
							<div *ngSwitchCase="tocEntryType.Page">
								<span style="background-color: lightblue;"> Page</span>
							</div>
							<div *ngSwitchCase="tocEntryType.Section">
								<span style="background-color: lightgreen;"> Section</span>
							</div>
						</ng-container> -->
					<!-- </div> -->
					<!-- <button cdkDragHandle>drab</button> -->
					<div [ngClass]="{'ml-3': link.type != tocEntryType.Page }">
						<app-dataset-profile-table-of-contents-internal-section 
							[links]="link.subEntries"
							(itemClick)="itemClicked($event)"
							(removeEntry)="deleteEntry($event)"
							[parentLink]="link"
							[itemSelected] = "itemSelected"
							(createFooEntry)="createNewEntry($event)"
							[viewOnly]="viewOnly"
							(dataNeedsRefresh)="onDataNeedsRefresh()"
							[DRAGULA_ITEM_ID_PREFIX]="DRAGULA_ITEM_ID_PREFIX"
							[overContainerId]="overContainerId"
							[isDragging]="isDragging"
							[draggingItemId]="draggingItemId"
							[parentRootId]="parentRootId"
							[colorizeInvalid]="colorizeInvalid">
						</app-dataset-profile-table-of-contents-internal-section>



						<ng-container *ngIf="!isDragging">

							<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " > -->
								<ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast  && (!viewOnly)">
									<button class="mat-button add-new-entry" style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})">
										<!-- <mat-icon>add</mat-icon>  -->
										<ng-container [ngSwitch]="link.type">
											<ng-container *ngSwitchCase="tocEntryType.Section">
												<div class="d-flex" style="align-items: center;" >
													<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
														<!-- Create new subsection -->
														{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
												</div>


												<!-- Subsection + -->
											</ng-container>
											<!-- <ng-container *ngSwitchCase="tocEntryType.Page">
												Section
											</ng-container> -->
											<ng-container *ngSwitchCase="tocEntryType.FieldSet">
												<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: 0.1em;" class="add-input-icon">
												{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
											</ng-container>
								
										</ng-container>
									</button>
								</ng-container>
							<!-- </div> -->
						</ng-container>
					</div>
				</div>

			</div>	<!-- END OF LOOP-->

		</ng-container>
		
	</div>


	<ng-container *ngIf="!isDragging">

	

	<!-- BUILD SUBENTRIES IF THEY DONT EXIST -- CURRENT ITEM DOES HAVE CHILDREN -->
	<div *ngIf="(!links && parentLink.type!= tocEntryType.FieldSet) && !viewOnly &&parentLink?.id == itemSelected?.id" class="docs-link mt-0">
		<div class="ml-3">
			
			<!-- Give option to generate fieldset (only if parent is section) -->
			<button *ngIf="parentLink.type == tocEntryType.Section" class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
				<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: -0.2em;" class="add-input-icon">
				{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
			</button>
	
			<!-- Give option to generate section -->
			<button class="mat-button" style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
				<!-- <mat-icon>add</mat-icon> -->
				<!-- Subsection + -->

				<div class="d-flex" style="align-items: center;" >
					<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
						<!-- Create new subsection -->
						{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}}
				</div>

			</button>
	
	

	
	
		</div>
	</div>

	<!-- BUILD TYPE OF SAME LEVEL AS LINK OF  LINKS -->
	<!-- <div *ngIf="links && !viewOnly && !(parentLink?.subEntriesType == tocEntryType.Page) " >
		<ng-container >
			<button class="mat-button" style="padding-left: 0px;" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})">
				<mat-icon>add</mat-icon> 
				<ng-container [ngSwitch]="parentLink?.subEntriesType">
					<ng-container *ngSwitchCase="tocEntryType.Section">
						Subsection
					</ng-container>
					<ng-container *ngSwitchCase="tocEntryType.Page">
						Section
					</ng-container>
					<ng-container *ngSwitchCase="tocEntryType.FieldSet">
						Fieldset
					</ng-container>
		
				</ng-container>
			</button>
		</ng-container>
	</div> -->
	<!-- </ng-container> -->

	<!-- Only for the page -->
	<!-- style="margin-left: -0.5em;" -->
	<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly" >
		<button class="mat-button mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
			<!-- <mat-icon>add</mat-icon>  -->
			<div class="d-flex" style="align-items: center;" >
				<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
				<ng-container *ngIf="!links?.length else createsection">
					{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-FIRST-SECTION'| translate}}
					<!-- Create the first section -->
				</ng-container>
				<ng-template #createsection>
					{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SECTION'| translate}}
					<!-- Create new section -->
				</ng-template>
			</div>
		</button>
		<!-- <button (click)="showDroplists()">show droplist</button>
		<button (click)="showStructs()">structs</button> -->
	</div>

</ng-container>