<div
  class="breadcrumbs-container"
  [ngClass]="{
    multiple: breadcrumbs.length > 1,
    open: showAll
  }"
  *ngIf="breadcrumbs && breadcrumbs.length > 0"
>
  <button
    *ngIf="breadcrumbs.length > 1"
    class="btn-show-all-breadcrumbs pull-left"
    (click)="showAll = !showAll"
  >
    <i
      *ngIf="!showAll"
      [c8yIcon]="'caret-right'"
      tooltip="{{ 'Show all breadcrumbs' | translate }}"
      container="body"
      placement="top"
    ></i>
    <i
      *ngIf="showAll"
      [c8yIcon]="'caret-down'"
      tooltip="{{ 'Collapse breadcrumbs' | translate }}"
      container="body"
      placement="top"
    ></i>
  </button>

  <ul class="breadcrumbs text-muted" *ngFor="let breadcrumb of breadcrumbs; let first = first">
    <ng-container *ngIf="first || showAll">
      <li class="text-muted" *ngFor="let item of breadcrumb.items; let firstItem = first">
        <span *ngIf="!firstItem"> > </span>
        <ng-container *c8yOutlet="item.template"></ng-container>
        <ng-container *ngIf="item.label && item.path">
          <a
            [routerLink]="normalizePath(item.path)"
            class="word-break"
            title="{{ item.label | translate }}"
          >
            <i [c8yIcon]="item.icon" *ngIf="firstItem" class="m-r-4"></i>
            <span>{{ item.label | translate }}</span>
          </a>
        </ng-container>
        <ng-container *ngIf="item.label && !item.path">
          <i [c8yIcon]="item.icon" *ngIf="firstItem" class="m-r-4"></i>
          <span>{{ item.label | translate }}</span>
        </ng-container>
      </li>
    </ng-container>
  </ul>
</div>