<div
  class="miller-view-wrapper {{ config.label }}"
  [ngStyle]="{
    'padding-top': 'calc(' + getPaddingTop() + ' * var(--c8y-unit-base))'
  }"
  #millerViewWrapper
  [ngClass]="{
    'single-column': config.singleColumn
  }"
>
  <!-- track the node itself: a column replaced in place must get a fresh c8y-asset-selector, because
       the selector loads its tree in ngOnInit and its ngOnChanges does not react to rootNode -->
  @for (column of columns; track column; let i = $index) {
    <div class="miller-column bg-inherit">
      <c8y-asset-selector
        class="bg-inherit"
        #assetSelector
        [config]="config"
        [index]="i"
        [active]="columns[i + 1]"
        [rootNode]="column"
        [selected]="selected || []"
        [selectedDevice]="selectedDevice"
        (onSelected)="onSelectionChange($event)"
        (onClearSelected)="onClearSelected.emit()"
        (onRowSelected)="addNewColumn($event)"
        (onLoad)="onLoad($event)"
        [container]="container"
      ></c8y-asset-selector>
      @if (isLoading && columnIndex === i && !selectedDevice) {
        <div class="p-relative p-b-64">
          <c8y-loading></c8y-loading>
        </div>
      }

      @if (!column.children.length && !isLoading) {
        <div class="p-l-8 p-r-8">
          @if (!filterText) {
            <c8y-ui-empty-state
              [icon]="'folder-open'"
              [title]="'No results to display.' | translate"
              [subtitle]="'The selected asset has no children.' | translate"
              [horizontal]="true"
            ></c8y-ui-empty-state>
          } @else {
            <c8y-ui-empty-state
              [icon]="'folder-open'"
              [title]="'No results to display for the current filter.' | translate"
              [subtitle]="'There are no assets matching the filter.' | translate"
              [horizontal]="true"
            ></c8y-ui-empty-state>
          }
        </div>
      }
    </div>
  }
</div>