@if (breadcrumbs && breadcrumbs.length > 0) {
  <div class="breadcrumbs-container d-flex">
    @if (breadcrumbs.length > 1) {
      <div
        container="body"
        dropdown
        #breadcrumbDropdown="bs-dropdown"
        [isOpen]="dropdownOpen"
      >
        <button
          class="btn-clean btn-xs btn p-l-4 p-r-4"
          title="{{ 'Show all paths' | translate }}"
          type="button"
          dropdownToggle
        >
          <i [c8yIcon]="breadcrumbDropdown.isOpen ? 'caret-down' : 'caret-right'"></i>
        </button>
        <div
          class="dropdown-menu"
          *dropdownMenu
        >
          @for (breadcrumb of breadcrumbs; track breadcrumb; let i = $index; let first = $first) {
            <!-- in dropdown menu, show all breadcrumbs except the first one -->
            @if (!first) {
              <div class="p-t-8 p-r-8 p-b-8 p-l-16 separator-bottom">
                <ul class="breadcrumbs text-muted m-l-4">
                  @for (
                    item of breadcrumb.items;
                    track item;
                    let isLast = $last;
                    let isFirst = $first
                  ) {
                    <li class="text-muted">
                      @if (!isFirst) {
                        <span><i [c8yIcon]="'forward'"></i></span>
                      }
                      @if (!isLast) {
                        <a
                          class="word-break"
                          [routerLink]="item.path"
                        >
                          @if (item.icon) {
                            <i
                              class="m-r-4"
                              [c8yIcon]="item.icon"
                            ></i>
                          }
                          <span>{{ item.label | translate }}</span>
                        </a>
                      } @else {
                        @if (item.icon) {
                          <i
                            class="m-r-4"
                            [c8yIcon]="item.icon"
                          ></i>
                        }
                        <span>{{ item.label | translate }}</span>
                      }
                    </li>
                  }
                </ul>
              </div>
            }
          }
        </div>
      </div>
    }
    <ul
      class="breadcrumbs text-muted"
      [attr.role]="'navigation'"
    >
      <!-- show only first breadcrumb- applicable both for single and multiple breadcrumb cases (for multiple breadcrumbs, rest are in dropdown) -->
      @for (item of breadcrumbs[0].items; track item; let firstItem = $first) {
        <li class="text-muted">
          @if (!firstItem) {
            <span><i c8yIcon="forward"></i></span>
          }
          <ng-container
            *c8yOutlet="item.component || item.template; injector: breadcrumbs[0].injector"
          ></ng-container>
          @if (item.label && item.path) {
            <a
              class="word-break"
              title="{{ item.label | translate }}"
              [attr.aria-label]="'breadcrumb'"
              [routerLink]="normalizePath(item.path)"
            >
              <i
                class="m-r-4"
                [c8yIcon]="item.icon"
              ></i>
              <span>{{ item.label | translate }}</span>
            </a>
          }
          @if (item.label && !item.path) {
            <i
              class="m-r-4"
              [c8yIcon]="item.icon"
            ></i>
            <span title="{{ item.label | translate }}">{{ item.label | translate }}</span>
          }
        </li>
      }
    </ul>
  </div>
}