@if (breadcrumbs() && breadcrumbs().length > 0) {
  <div class="breadcrumbs-container d-flex">
    @if (showToggle()) {
      <div
        class="l-h-1"
        container="body"
        dropdown
        #breadcrumbDropdown="bs-dropdown"
        [isOpen]="dropdownOpen()"
      >
        <button
          class="btn-clean btn-xs btn p-l-4 p-r-4 p-t-0 p-b-0"
          title="{{ 'Show all paths' | translate }}"
          [attr.aria-label]="'Show all paths' | translate"
          type="button"
          dropdownToggle
        >
          <i
            [c8yIcon]="breadcrumbDropdown.isOpen ? 'caret-down' : 'caret-right'"
            aria-hidden="true"
          ></i>
        </button>
        <div
          class="dropdown-menu"
          *dropdownMenu
        >
          @for (breadcrumb of alternateBreadcrumbs(); track breadcrumb) {
            <div class="p-t-8 p-r-16 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'"
                          aria-hidden="true"
                        ></i
                      ></span>
                    }
                    @if (!isLast) {
                      <a
                        class="word-break dropdown-item"
                        [routerLink]="item.path"
                      >
                        @if (item.icon) {
                          <i
                            class="m-r-4"
                            [c8yIcon]="item.icon"
                            aria-hidden="true"
                          ></i>
                        }
                        <span>{{ item.label | translate }}</span>
                      </a>
                    } @else {
                      @if (item.icon) {
                        <i
                          class="m-r-4"
                          [c8yIcon]="item.icon"
                          aria-hidden="true"
                        ></i>
                      }
                      <span>{{ item.label | translate }}</span>
                    }
                  </li>
                }
              </ul>
            </div>
          }
        </div>
      </div>
    }
    <ul
      class="breadcrumbs text-muted"
      [attr.aria-label]="'Breadcrumb' | translate"
      [attr.role]="'navigation'"
    >
      <!-- show only the inline breadcrumb; alternate paths (if any) live in the dropdown -->
      @for (
        item of inlineBreadcrumb().items;
        track item;
        let firstItem = $first;
        let isLast = $last
      ) {
        <li class="text-muted">
          @if (!firstItem) {
            <span class="l-h-1 a-s-stretch d-flex a-i-center"
              ><i
                c8yIcon="forward"
                aria-hidden="true"
              ></i
            ></span>
          }
          <ng-container
            *c8yOutlet="item.component || item.template; injector: inlineBreadcrumb().injector"
          ></ng-container>
          @if (item.label && item.path) {
            <a
              class="word-break"
              title="{{ item.label | translate }}"
              [attr.aria-label]="item.label | translate"
              [attr.aria-current]="isLast ? 'page' : null"
              [routerLink]="normalizePath(item.path)"
            >
              @if (item.icon) {
                <i
                  class="m-r-4"
                  [c8yIcon]="item.icon"
                  aria-hidden="true"
                ></i>
              }
              <span>{{ item.label | translate }}</span>
            </a>
          }
          @if (item.label && !item.path) {
            @if (item.icon) {
              <i
                class="m-r-4"
                [c8yIcon]="item.icon"
                aria-hidden="true"
              ></i>
            }
            <span
              title="{{ item.label | translate }}"
              [attr.aria-current]="isLast ? 'page' : null"
              >{{ item.label | translate }}</span
            >
          }
        </li>
      }
    </ul>
  </div>
}