<div
  class="p-b-8 bg-component"
  [ngClass]="{ 'p-l-16 p-absolute p-r-16': config.view === 'miller',
  'sticky-top separator-bottom': config.multi }"
  style="left: 0; right: 4px"
  [ngStyle]="{ 'z-index': config.singleColumn ? '30' : '20' }"
  *ngIf="!selectedDevice && index === 0 && (config.search || config.singleColumn)"
>
  <p class="text-medium m-b-4 p-t-8">
    {{ config.label | translate }}
  </p>
  <c8y-search-input
    *ngIf="config.search && root"
    (onClick)="onSearchResultClick($event)"
    (reset)="onSearchResultReset($event)"
    [mode]="'select'"
    [container]="container"
    [groupsOnly]="config.groupsOnly"
  ></c8y-search-input>
  <div *ngIf="config.multi" class="p-t-8">
    <span
      class="label label-info d-inline-flex a-i-center m-r-4"
      *ngFor="let selectedItem of selected"
    >
      <button
        class="btn btn-xs btn-clean text-10 m-r-4 border-right"
        (click)="deselect(selectedItem)"
      >
        <i c8yIcon="times"></i>
      </button>
      {{ selectedItem.name }}
    </span>
  </div>
</div>

<div *ngIf="selectedDevice" class="p-r-16">
  <div class="d-flex p-b-4">
    <p *ngIf="selectedDevice; else multiAssets" class="text-medium p-t-8 m-r-8">
      {{ '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"
      (click)="clearSelectedDevices()"
      title="{{ 'Edit' | translate }}"
    >
      {{ 'Change' | translate }}
    </button>
  </div>
  <div class="d-flex">
    <i [c8yIcon]="'check-circle'" class="text-success p-l-0 p-r-8"></i>
    <i
      c8yIcon="{{ selectedDevice.type === 'c8y_DeviceGroup' ? 'c8y-group' : 'exchange' }}"
      class="m-r-4 icon-20"
    ></i>
    <span>{{ selectedDevice.name }}</span>
  </div>
</div>

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

    <p
      class="text-truncate"
      title="{{ rootNode.label | translate }}"
      *ngIf="config.columnHeaders"
      [ngClass]="{
        'text-label-small': !config.singleColumn,
        'text-medium': config.singleColumn
      }"
    >
      <i
        *ngIf="config.singleColumn || (!rootNode.root && index === 0)"
        c8yIcon="c8y-group-open"
        class="icon-20 c8y-icon-duocolor m-r-4"
      ></i>
      {{ 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
        [(ngModel)]="filterText"
        placeholder="{{ 'Filter this column…' | translate }}"
        class="form-control"
        (keyup.enter)="applyFilter('*' + filterText + '*')"
      />
      <span class="input-group-btn">
        <button
          title="{{ 'Apply filter' | translate }}"
          class="btn btn-clean p-r-8 p-l-4"
          (click)="applyFilter('*' + filterText + '*')"
        >
          <i c8yIcon="filter"></i>
        </button>
        <button
          title=" {{ 'Clear filters' | translate }}"
          class="btn btn-clean p-r-8 p-l-4"
          (click)="clearFilters()"
          *ngIf="filterText.length"
        >
          <i c8yIcon="times"></i>
        </button>
      </span>
    </div>
  </div>
</div>

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