<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<div class="container" [class.disabled]="disabled">
  <div class="column" *ngFor="let column of visibleColumns; let colIndex = index">
    <div *ngIf="column.title" class="column-title" [class.disabled]="disabled">{{ column.title }}</div>
    <mat-action-list bciColumn [columnIndex]="colIndex" [class.disabled]="disabled">
      <button mat-list-item [disabled]="disabled" bciColumnItem
              *ngFor="let item of getAvailableItems(colIndex); let colItemIndex = index" [class.active]="item.selected"
              [class.selected]="item.selected" [class.last-active]="(selectedPath?.length || 0) === colIndex"
              [class.disabled]="disabled" [item]="item" [index]="colItemIndex" [columnLevel]="colIndex"
              [label]="item.label" [tabIndex]="colItemIndex" (click)="!disabled && onItemClick(item, colIndex)">
        <ng-container *ngTemplateOutlet="columnItemTemplate; context: item"></ng-container>
        <ng-container *ngIf="!columnItemTemplate">
          {{ item.label }}
        </ng-container>
      </button>
    </mat-action-list>
  </div>
</div>
