<!-- Hierarchy tree -->
<div
  *ngIf="view === 'tree'"
  class="c8y-asset-selector__item"
  [attr.role]="view === 'tree' ? 'tree' : 'list'"
  [ngClass]="{
    'c8y-asset-selector__item--more': node?.icon === 'plus',
    'c8y-asset-selector__item--start': level === 0
  }"
  [ngStyle]="{
    'margin-left': level > 1 ? 16 + 'px' : '0'
  }"
>
  <div
    *ngIf="node && !node.root && !node.hidden"
    class="c8y-asset-selector__node"
    [attr.role]="view === 'tree' ? 'treeitem' : 'listitem'"
    [ngClass]="{ 'c8y-asset-selector__node--open': node?.open }"
    title="{{ breadcrumb | translate }}"
  >
    <div class="d-flex a-i-center p-t-4 p-b-4 m-r-8" *ngIf="node.toString() !== 'LoadMoreNode'">
      <label [ngClass]="{ 'c8y-checkbox': multi, 'c8y-radio': !multi }">
        <input
          [attr.aria-label]="node.label | translate"
          [type]="multi ? 'checkbox' : 'radio'"
          (change)="selected(node)"
          [checked]="isSelected()"
          [disabled]="!node.groupsSelectable && node.isGroup()"
        />
        <span></span>
      </label>
    </div>

    <!-- group button -->
    <button
      *ngIf="node.isGroup() || node.hasChildDevices()"
      class="c8y-asset-selector__btn text-truncate"
      (click)="click()"
      [attr.aria-expanded]="!node.open"
    >
      <i
        [c8yIcon]="node.icon"
        *ngIf="node.icon === 'c8y-group-smart'"
        [title]="'Smart group' | translate"
        class="c8y-icon c8y-icon-duocolor m-r-4 text-16"
      ></i>
      <i
        [c8yIcon]="node.icon"
        *ngIf="node.icon !== 'c8y-group-smart'"
        [title]="'Group' | translate"
        class="c8y-icon c8y-icon-duocolor m-r-4 text-16"
      ></i>
      <span title="{{ breadcrumb }}">
        {{ node.label | translate }}
        <!-- use just for search results to display the path -->
        <p *ngIf="showPath" class="text-truncate">
          <small class="text-muted" title="{{ breadcrumb }}">
            <em>{{ breadcrumb }}</em>
          </small>
        </p>
        <!-- up to here -->
      </span>
    </button>
    <!-- not a group button -->
    <button
      *ngIf="!node.isGroup() && !node.hasChildDevices()"
      class="flex-grow"
      [ngClass]="{
        'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',
        'c8y-asset-selector__btn text-truncate': node.icon != 'plus'
      }"
      (click)="selected(node)"
      type="button"
      title="{{ breadcrumb }}"
    >
      <i
        [c8yIcon]="node.icon"
        *ngIf="node.icon === 'c8y-group-smart'"
        [title]="'Smart group' | translate"
        class="c8y-icon c8y-icon-duocolor m-r-4 text-16"
      ></i>
      <i
        [c8yIcon]="node.icon"
        *ngIf="node.icon !== 'c8y-group-smart'"
        [title]="'Group' | translate"
        [ngClass]="{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }"
        class="c8y-icon m-r-4"
      ></i>
      <span title="{{ breadcrumb }}">
        {{ node.label | translate }}
        <!-- use just for search results to display the path -->
        <p *ngIf="showPath" class="text-truncate text-muted small">
          <em>{{ breadcrumb }}</em>
        </p>
        <!-- up to here -->
      </span>
    </button>
    <!-- expand button (only for groups) -->
    <div *ngIf="node.isGroup() || node.hasChildDevices()">
      <button
        [title]="expandTitle"
        class="collapse-btn btn"
        (click)="click()"
        [attr.aria-expanded]="node.open"
      >
        <i c8yIcon="angle-down"></i>
      </button>
    </div>
  </div>
  <div
    *ngIf="node.countChildren()"
    class="collapse"
    [collapse]="!node.open"
    [isAnimated]="true"
    [attr.role]="'group'"
  >
    <c8y-asset-selector-node
      *ngFor="let childNode of node.children"
      [node]="childNode"
      [preselected]="preselected || []"
      [multi]="multi"
      [active]="active"
      [attr.role]="view === 'tree' ? 'treeitem' : 'listitem'"
      (onSelect)="onSelect.emit($event)"
      (onDeselect)="onDeselect.emit($event)"
    ></c8y-asset-selector-node>
  </div>
</div>

<!-- Miller columns -->
<div *ngIf="view === 'miller'">
  <div
    *ngIf="node && !node.root && !node.hidden && node !== rootNode"
    class="miller-column__item bg-inherit"
    [ngClass]="{
      active: isActive(),
      'miller-column__item--more': node.toString() === 'LoadMoreNode'
    }"
    title="{{ breadcrumb | translate }}"
  >
    <div
      class="m-l-4 m-r-4 miller-column__item__checkbox"
      *ngIf="node.toString() !== 'LoadMoreNode'"
    >
      <label [ngClass]="{ 'c8y-radio': !multi, 'c8y-checkbox': multi }">
        <input
          [attr.aria-label]="node.label | translate"
          [type]="multi ? 'checkbox' : 'radio'"
          (change)="selected(node)"
          [checked]="isGroupSelected()"
          [disabled]="!node.groupsSelectable && node.isGroup()"
        />
        <span></span>
      </label>
    </div>

    <button
      [ngClass]="{
        'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-8':
          node.toString() === 'LoadMoreNode',
        'miller-column__item__btn': node.toString() !== 'LoadMoreNode',
        'btn-pending': node.loading && node.toString() === 'LoadMoreNode'
      }"
      title="{{ breadcrumb | translate }}"
      (click)="millerViewClick(node)"
      type="button"
    >
      <i
        [c8yIcon]="node.icon"
        class="c8y-icon m-r-4"
        [ngClass]="{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }"
      ></i>
      <div class="text-left text-truncate">
        <p title="{{ node.label | translate }}" class="text-truncate">
          {{ node.label | translate }}
        </p>
        <!-- use just for search results to display the path -->
        <small *ngIf="showPath" class="text-muted text-truncate" title="{{ breadcrumb }}">
          <em>{{ breadcrumb }}</em>
        </small>
        <!-- up to here -->
      </div>
      <span *ngIf="node.isGroup() || node.hasChildDevices()" class="p-l-4 m-l-auto">
        <i c8yIcon="angle-right"></i>
      </span>
    </button>
  </div>

  <div *ngIf="node" [ngClass]="{ hidden: node !== rootNode }" role="list">
    <c8y-asset-selector-node
      *ngFor="let childNode of node.children"
      [node]="childNode"
      [rootNode]="rootNode"
      [preselected]="preselected || []"
      [multi]="multi"
      [view]="view"
      [index]="index"
      [selectedItems]="selectedItems"
      [active]="active"
      [handleNextMillerViewColumn]="handleNextMillerViewColumn"
      (onSelect)="onSelect.emit($event)"
      (onDeselect)="onDeselect.emit($event)"
      role="listitem"
    ></c8y-asset-selector-node>
  </div>
</div>