<div
  class="bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top"
  [ngStyle]="{ 'z-index': config.singleColumn && config.search ? '30' : '20' }"
  #header
  [ngClass]="{
    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',
    'miller-column__search': config.search,
    'miller-column__multi': config.multi
  }"
  *ngIf="
    !selectedDevice &&
    index === 0 &&
    (config.search || config.multi || config.label?.length || config.showSelected)
  "
>
  <p
    class="text-medium flex-no-shrink a-s-center"
    [ngClass]="{
      'm-b-4': config.search && root && config.singleColumn,
      'm-r-8': !config.singleColumn && !config.search,
      'fit-w': config.singleColumn
    }"
    *ngIf="config.label?.length"
  >
    {{ config.label | translate }}
  </p>
  <c8y-search-input
    [ngStyle]="{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }"
    *ngIf="config.search && root"
    (onClick)="onSearchResultClick($event)"
    (reset)="onSearchResultReset($event)"
    [mode]="'select'"
    [container]="container"
    [groupsOnly]="config.groupsOnly"
    [ngClass]="{
      'm-l-auto': !config.singleColumn && config.label.length,
      'fit-w': config.singleColumn || !config.label.length
    }"
  ></c8y-search-input>
  <div
    class="bg-inherit d-flex gap-4 fit-w"
    *ngIf="config.showSelected"
    [ngClass]="{ 'm-t-4': config.search }"
  >
    <span class="text-label-small m-r-4 a-s-center l-h-1">{{ 'Selected' | translate }}</span>
    <div class="flex-grow inner-scroll d-flex gap-4 a-i-center">
      <ng-container *ngIf="!selected.length">
        <em class="text-12 text-muted d-flex a-i-center fit-h-20">{{ 'None' | translate }}</em>
      </ng-container>
      <span
        class="tag tag--info chip"
        *ngFor="let selectedItem of selected"
      >
        <button
          class="btn btn-xs btn-clean text-10"
          title="{{ selectedItem.name }}"
          type="button"
          (click)="config.multi ? deselect(selectedItem) : deselectAll()"
        >
          <i c8yIcon="times"></i>
        </button>
        {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}
      </span>
    </div>
  </div>
</div>

<div
  class="p-r-16"
  *ngIf="selectedDevice"
>
  <div class="d-flex p-b-4">
    <p
      class="text-medium p-t-8 m-r-8"
      *ngIf="selectedDevice; else multiAssets"
    >
      {{ 'Selected asset' | translate }}
    </p>
    <ng-template #multiAssets>
      <p class="text-medium m-r-8">{{ 'Selected assets' | translate }}</p>
    </ng-template>
    <button
      class="btn btn-default btn-xs a-s-center m-t-4 m-l-auto"
      title="{{ 'Change' | translate }}"
      type="button"
      (click)="clearSelectedDevices()"
    >
      {{ 'Change' | translate }}
    </button>
  </div>
  <div class="d-flex">
    <i
      class="text-success p-l-0 p-r-8"
      [c8yIcon]="'check-circle'"
    ></i>
    <i
      class="m-r-4 icon-20"
      [c8yIcon]="selectedDevice | getGroupIcon | async"
    ></i>
    <span>{{ selectedDevice.name }}</span>
  </div>
</div>

<!-- miller columns header -->
<div
  class="miller-column__header sticky-top bg-inherit separator-bottom"
  *ngIf="
    config.view === 'miller' &&
    ((config.showFilter && !rootNode.root) || config.columnHeaders) &&
    !selectedDevice
  "
  [ngClass]="{ 'p-t-8': config.search }"
>
  <p
    class="text-12 text-muted text-truncate m-b-4"
    title="{{ rootNode.breadcrumb || rootNode.label | translate }}"
    *ngIf="config.singleColumn && index !== 0"
  >
    <i
      class="m-r-4"
      c8yIcon="home"
    ></i>
    {{ rootNode.breadcrumb || rootNode.label | translate }}
  </p>
  <div
    class="d-flex a-i-center"
    *ngIf="config.columnHeaders || config.singleColumn"
  >
    <button
      class="btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1"
      title="{{ 'Back' | translate }}"
      type="button"
      *ngIf="config.singleColumn && !rootNode.root && index !== 0"
      (click)="back()"
    >
      <i c8yIcon="angle-left"></i>
    </button>
    <label
      class="c8y-radio checkbox-inline m-r-8"
      *ngIf="!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())"
    >
      <input
        title="{{ 'Select group' | translate }}"
        type="radio"
        (change)="select(rootNode.mo)"
        [checked]="isGroupSelected()"
      />
      <span></span>
    </label>

    <i
      class="icon-20 c8y-icon-duocolor m-r-4"
      [c8yIcon]="this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async"
      *ngIf="config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))"
    ></i>
    <p
      class="text-truncate"
      title="{{ rootNode.label | translate }}"
      *ngIf="config.columnHeaders"
      [ngClass]="{
        'text-label-small': !config.singleColumn,
        'text-medium': config.singleColumn
      }"
    >
      {{ rootNode.label | translate }}
    </p>
  </div>

  <div
    *ngIf="!rootNode.root && config.showFilter"
    [ngClass]="{ 'p-t-4': config.columnHeaders }"
  >
    <div class="input-group input-group-sm input-group-search">
      <input
        class="form-control"
        placeholder="{{ 'Filter this column…' | translate }}"
        [(ngModel)]="filterText"
        (keyup.enter)="applyFilter('*' + filterText + '*')"
      />
      <span class="input-group-btn">
        <button
          class="btn btn-dot p-r-8 p-l-4"
          title="{{ 'Apply filter' | translate }}"
          type="button"
          (click)="applyFilter('*' + filterText + '*')"
        >
          <i c8yIcon="filter"></i>
        </button>
        <button
          class="btn btn-dot p-r-8 p-l-4"
          title=" {{ 'Clear filters' | translate }}"
          type="button"
          (click)="clearFilters()"
          *ngIf="filterText.length"
        >
          <i c8yIcon="times"></i>
        </button>
      </span>
    </div>
  </div>
</div>

<c8y-asset-selector-node
  class="d-block bg-inherit p-relative"
  style="z-index: 9"
  *ngIf="rootNode && !selectedDevice"
  [node]="rootNode"
  [rootNode]="rootNode"
  [preselected]="selected"
  [multi]="config.multi"
  [view]="config.view"
  [index]="index"
  [active]="active"
  [handleNextMillerViewColumn]="handleNextMillerViewColumn.bind(this)"
  (isLoadingState)="onLoading($event)"
  (onSelect)="onSelect($event)"
  (onDeselect)="onDeselect($event)"
  [ngClass]="{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }"
></c8y-asset-selector-node>