<div *ngIf="loading">Loading...</div>

<mat-accordion [class]="'level-' + level">
  <mat-expansion-panel class="accordion-header make-disabled-enabled" hideToggle [disabled]="true" [hidden]="level>0">
    <mat-expansion-panel-header>
      <div class="column label"></div>
      <div class="column values" [ngClass]="{'values-main': i==0}" *ngFor="let label of labels.slice(1); let i = index">{{ label }}</div>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <mat-expansion-panel *ngFor="let item of data" (opened)="loadChildren(item)" [ngClass]="{ 'make-disabled-enabled': item.target===undefined }" [disabled]="item.target===undefined">
    <mat-expansion-panel-header>
      <div class="column label"><span [ngClass]="{ 'tooltip-force-show': item.help }" title="{{ item.help }}">{{ item.label }}</span></div>
      <div class="column values" [ngClass]="{'values-main': i==0}" *ngFor="let value of item.values; let i = index">{{ value }}</div>
    </mat-expansion-panel-header>
    
    <div *ngIf="item.loading">Loading...</div>
    
    <!-- Recursively Load Next Level -->
    <app-nested-accordion *ngIf="item.children" [periodVersionId]="periodVersionId" [data]="item.children" [level]="level + 1"></app-nested-accordion>
  </mat-expansion-panel>
</mat-accordion>
