@if (
  !selectedDevice &&
  index === 0 &&
  (config.search || config.multi || config.label?.length || config.showSelected)
) {
  <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__show-selected': config.showSelected
    }"
  >
    @if (config.label?.length) {
      <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
        }"
      >
        {{ config.label | translate }}
      </p>
    }
    @if (config.search && root) {
      <c8y-search-input
        class="input-group-sm"
        [ngStyle]="{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }"
        (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>
    }
    @if (config.showSelected) {
      <div
        class="bg-inherit d-flex gap-4 fit-w"
        [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">
          @if (!selected.length) {
            <em class="text-12 text-muted d-flex a-i-center fit-h-20">{{ 'None' | translate }}</em>
          }
          @for (selectedItem of selected; track selectedItem) {
            <span class="tag tag--info chip flex-no-shrink">
              <button
                class="btn btn-xs btn-clean text-10"
                title="{{ selectedItem.name }}"
                type="button"
                [disabled]="disabled"
                (click)="config.multi ? deselect(selectedItem) : deselectAll()"
              >
                <i c8yIcon="times"></i>
              </button>
              {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}
            </span>
          }
        </div>
      </div>
    }
  </div>
}

@if (selectedDevice) {
  <div class="p-r-16">
    <div class="d-flex p-b-4">
      @if (selectedDevice) {
        <p class="text-medium p-t-8 m-r-8">
          {{ 'Selected asset' | translate }}
        </p>
      } @else {
        <p class="text-medium m-r-8">{{ 'Selected assets' | translate }}</p>
      }
      <button
        class="btn btn-default btn-xs a-s-center m-t-4 m-l-auto"
        title="{{ 'Change' | translate }}"
        type="button"
        (click)="$event.stopPropagation(); 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 -->
@if (
  config.view === 'miller' &&
  ((config.showFilter && !rootNode.root) || config.columnHeaders) &&
  !selectedDevice
) {
  <div
    class="miller-column__header sticky-top bg-inherit separator-bottom"
    [attr.inert]="isScrolledOutOfView ? '' : null"
    [ngClass]="{ 'p-t-8': config.search }"
  >
    @if (config.singleColumn && index !== 0) {
      <div class="d-flex">
        <i
          class="m-r-4"
          c8yIcon="home"
        ></i>
        <p
          class="text-12 text-muted text-truncate text-rtl m-b-4"
          title="{{ rootNode.breadcrumb || rootNode.label | translate }}"
        >
          {{ rootNode.breadcrumb || rootNode.label | translate }}
        </p>
      </div>
    }
    @if (config.columnHeaders || config.singleColumn) {
      <div class="d-flex a-i-center">
        @if (config.singleColumn && !rootNode.root && index !== 0) {
          <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"
            (click)="$event.stopPropagation(); back()"
          >
            <i c8yIcon="angle-left"></i>
          </button>
        }
        @if (!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())) {
          <label class="c8y-radio checkbox-inline m-r-8">
            <input
              title="{{ 'Select group' | translate }}"
              type="radio"
              (change)="select(rootNode.mo)"
              [checked]="isGroupSelected()"
            />
            <span></span>
          </label>
        }

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

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

@if (rootNode && !selectedDevice) {
  <c8y-asset-selector-node
    class="d-block bg-inherit p-relative"
    style="z-index: 9"
    [attr.inert]="isScrolledOutOfView ? '' : null"
    [node]="rootNode"
    [rootNode]="rootNode"
    [preselected]="selected"
    [multi]="config.multi"
    [view]="config.view"
    [index]="index"
    [active]="active"
    [disabled]="disabled"
    [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>
}