@if (displayBreadcrumbs) {
  <div class="breadcrumbs-section" id="breadcrumbs">
    <div class="container">
      <!-- label -->
      <strong id="breadcrumbs-label">{{ 'Breadcrumbs.YouAreHere' | translate }}:</strong>

      <!-- list of breadcrumbs -->
      <ol class="breadcrumbs" aria-labelledby="breadcrumbs-label">
        @for (breadcrumb of breadcrumbs; track breadcrumb; let i = $index) {
          @if (breadcrumb.label !== '') {
            <li class="breadcrumbs__item">
              <!-- breadcrumb as link -->
              @if (!breadcrumb.lastChild && !(i + 1 === breadcrumbs.length - 1 && breadcrumbs[i + 1].label === '')) {
                <a
                  [routerLink]="breadcrumb.segments"
                  [innerHtml]="
                    breadcrumb.label.length > 32 ? (breadcrumb.label | slice: 0 : 32) + '...' : breadcrumb.label
                  ">
                </a>
              }
              @if (breadcrumb.lastChild || (i + 1 === breadcrumbs.length - 1 && breadcrumbs[i + 1].label === '')) {
                <span
                  [innerHtml]="
                    breadcrumb.label.length > 32 ? (breadcrumb.label | slice: 0 : 32) + '...' : breadcrumb.label
                  "></span>
              }
              <!-- breadcrumb as text (last breadcrumb) -->
            </li>
          }
        }
      </ol>
    </div>
  </div>
}