<div
  class="d-flex collapsible"
  [ngClass]="{ 'expanded separator-top': node.open }"
  title="{{ breadcrumb | translate }}"
  *ngIf="!node.root && !node.hidden"
>
  <div
    class="p-t-8 p-b-8 m-r-8"
    [ngStyle]="{ 'padding-left': level < 6 ? (level - 1) * 8 + 'px' : '24px' }"
    [style.visibility]="node.routerLinkExact ? 'hidden' : 'visible'"
  >
    <label class="c8y-checkbox">
      <input type="checkbox" (change)="selected(node)" [checked]="checked" />
      <span></span>
    </label>
  </div>
  <div
    class="flex-grow flex-item-middle p-t-8 p-b-8 text-truncate p-r-8"
    [style.cursor]="node.routerLinkExact ? 'pointer' : 'normal'"
    (click)="node.routerLinkExact ? node.click() : ''"
  >
    <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>
  </div>
  <div>
    <button
      [title]="expandTitle"
      class="collapse-btn btn"
      (click)="click()"
      [attr.aria-expanded]="!node.open"
    >
      <i c8yIcon="angle-down" [ngClass]="{ 'text-primary': node.open }"></i>
    </button>
  </div>
</div>
<div class="collapse" [ngClass]="{ 'separator-bottom': node.open }" [collapse]="!node.open">
  <c8y-asset-selector-node
    *ngFor="let childNode of node.children"
    [node]="childNode"
    [preselected]="preselected || []"
  ></c8y-asset-selector-node>
</div>