<div
  class="miller-view-wrapper {{ config.label }}"
  [ngStyle]="{
    'padding-top': 'calc('+ getPaddingTop() +' * var(--c8y-unit-base))',
  }"
  #millerViewWrapper
  [ngClass]="{
    'single-column': config.singleColumn,
  }"
>
  <div
    class="miller-column bg-inherit"
    *ngFor="let column of columns; index as i"
  >
    <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>
    <div
      class="p-relative p-b-64"
      *ngIf="isLoading && columnIndex === i && !selectedDevice"
    >
      <c8y-loading></c8y-loading>
    </div>

    <div
      class="p-l-8 p-r-8"
      *ngIf="!column.children.length && !isLoading"
    >
      <c8y-ui-empty-state
        [icon]="'folder-open'"
        [title]="'No results to display.' | translate"
        [subtitle]="'The selected asset has no children.' | translate"
        *ngIf="!filterText; else noSearchResults"
        [horizontal]="true"
      ></c8y-ui-empty-state>
      <ng-template #noSearchResults>
        <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>
      </ng-template>
    </div>
  </div>
</div>