<!-- Hierarchy tree -->
<div
  class="c8y-asset-selector__item"
  [ngStyle]="{
    'margin-left': level > 1 ? 16 + 'px' : '0'
  }"
  *ngIf="view === 'tree'"
  [attr.role]="view === 'tree' ? 'tree' : 'list'"
  [ngClass]="{
    'c8y-asset-selector__item--more': node?.icon === 'plus',
    'c8y-asset-selector__item--start': level === 0
  }"
>
  <div
    class="c8y-asset-selector__node"
    title="{{ breadcrumb | translate }}"
    *ngIf="node && !node.root && !node.hidden"
    [attr.role]="view === 'tree' ? 'treeitem' : 'listitem'"
    [ngClass]="{ 'c8y-asset-selector__node--open': node?.open }"
  >
    <!-- expand button -->
    <div class="c8y-asset-selector__node__btn-spacer">
      <button
        class="collapse-btn btn-dot"
        [title]="expandTitle | translate"
        [attr.aria-expanded]="node.open"
        (click)="click()"
        *ngIf="node.isGroup() || node.hasChildDevices()"
      >
        <i c8yIcon="angle-right"></i>
      </button>
    </div>
    <div
      class="d-flex a-i-center p-t-4 p-b-4"
      *ngIf="node.toString() !== 'LoadMoreNode' && isNodeSelectable"
    >
      <label [ngClass]="{ 'c8y-checkbox': multi, 'c8y-radio': !multi }">
        <input
          id="nodeLabel"
          [type]="multi ? 'checkbox' : 'radio'"
          (change)="selected(node)"
          [checked]="isSelected()"
          [disabled]="disabled || !node.groupsSelectable && node.isGroup()"
        />
        <span></span>
        <span
          class="sr-only"
          for="nodeLabel"
          translate
        >
          Node label
        </span>
      </label>
    </div>

    <!-- group button -->
    <button
      class="c8y-asset-selector__btn text-truncate"
      [attr.aria-expanded]="!node.open"
      *ngIf="node.isGroup() || node.hasChildDevices()"
      (click)="click()"
    >
      <i
        class="c8y-icon c8y-icon-duocolor m-r-4 text-16"
        [c8yIcon]="node.icon"
        [title]="'Smart group' | translate"
        *ngIf="node.icon === 'c8y-group-smart'"
      ></i>
      <i
        class="c8y-icon c8y-icon-duocolor m-r-4 text-16"
        [c8yIcon]="node.icon"
        [title]="'Group' | translate"
        *ngIf="node.icon !== 'c8y-group-smart'"
      ></i>
      <span title="{{ breadcrumb }}">
        {{ node.translateLabel ? (node.label | translate) : node.label }}
        <!-- use just for search results to display the path -->
        <p
          class="text-truncate"
          *ngIf="showPath"
        >
          <small
            class="text-muted"
            title="{{ breadcrumb }}"
          >
            <em>{{ breadcrumb }}</em>
          </small>
        </p>
        <!-- up to here -->
      </span>
    </button>
    <!-- not a group button -->
    <button
      class="flex-grow"
      title="{{ breadcrumb }}"
      type="button"
      *ngIf="!node.isGroup() && !node.hasChildDevices()"
      [ngClass]="{
        'btn btn-default btn-sm m-b-8 m-r-8 d-flex j-c-center': node.icon === 'plus',
        'c8y-asset-selector__btn text-truncate': node.icon != 'plus'
      }"
      (click)="selected(node)"
    >
      <i
        class="c8y-icon c8y-icon-duocolor m-r-4 text-16"
        [c8yIcon]="node.icon"
        [title]="'Smart group' | translate"
        *ngIf="node.icon === 'c8y-group-smart'"
      ></i>
      <i
        class="c8y-icon m-r-4"
        [c8yIcon]="node.icon"
        [title]="'Group' | translate"
        *ngIf="node.icon !== 'c8y-group-smart'"
        [ngClass]="{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }"
      ></i>
      <span title="{{ breadcrumb }}">
        {{ node.translateLabel ? (node.label | translate) : node.label }}
        <!-- use just for search results to display the path -->
        <p
          class="text-truncate text-muted small"
          *ngIf="showPath"
        >
          <em>{{ breadcrumb }}</em>
        </p>
        <!-- up to here -->
      </span>
    </button>
  </div>
  <div
    class="collapse"
    *ngIf="node.countChildren()"
    [collapse]="!node.open"
    [isAnimated]="true"
    [attr.role]="'group'"
  >
    <c8y-asset-selector-node
      *ngFor="let childNode of node.children"
      [node]="childNode"
      [preselected]="preselected || []"
      [disabled]="disabled"
      [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
    class="miller-column__item bg-inherit"
    title="{{ breadcrumb | translate }}"
    *ngIf="node && !node.root && !node.hidden && node !== rootNode"
    [ngClass]="{
      active: isActive(),
      'miller-column__item--more': node.toString() === 'LoadMoreNode'
    }"
  >
    <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
          id="nodeLabel2"
          [type]="multi ? 'checkbox' : 'radio'"
          (change)="selected(node)"
          [checked]="isSelected()"
          [disabled]="disabled || !node.groupsSelectable && node.isGroup()"
        />
        <span></span>
        <span
          class="sr-only"
          for="nodeLabel2"
          translate
        >
          Node label
        </span>
      </label>
    </div>

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

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