@if (breadcrumbItems.length) {
  <nav
    class="frg-breadcrumb"
    aria-label="Breadcrumb"
    [ngClass]="{
      'frg-breadcrumb--primary': styleType === 'primary' || styleType === 'outline-primary',
      'frg-breadcrumb--secondary': styleType === 'secondary' || styleType === 'outline-secondary',
      'frg-breadcrumb--tertiary': styleType === 'tertiary' || styleType === 'outline-tertiary',
      'frg-breadcrumb--info': styleType === 'info' || styleType === 'outline-info',
      'frg-breadcrumb--success': styleType === 'success' || styleType === 'outline-success',
      'frg-breadcrumb--warning': styleType === 'warning' || styleType === 'outline-warning',
      'frg-breadcrumb--danger': styleType === 'danger' || styleType === 'outline-danger',
      'frg-breadcrumb--dark': styleType === 'dark' || styleType === 'outline-dark',
      'frg-breadcrumb--light': styleType === 'light' || styleType === 'outline-light'
    }"
  >
    <ol class="frg-breadcrumb__list">
      @for (item of breadcrumbItems; track item.label; let isLast = $last) {
        <li class="frg-breadcrumb__item" [class.is-active]="item.isActive || isLast">
          @if (item.url && !isLast) {
            <a class="frg-breadcrumb__link" [routerLink]="item.url" [attr.aria-label]="item.ariaLabel || null">
              @if (item.iconClass) {
                <span class="frg-breadcrumb__icon" [ngClass]="item.iconClass" aria-hidden="true"></span>
              }
              <span class="frg-breadcrumb__label">{{ item.label }}</span>
            </a>
          } @else {
            <span class="frg-breadcrumb__current" [attr.aria-label]="item.ariaLabel || null">
              @if (item.iconClass) {
                <span class="frg-breadcrumb__icon" [ngClass]="item.iconClass" aria-hidden="true"></span>
              }
              <span class="frg-breadcrumb__label">{{ item.label }}</span>
            </span>
          }

          @if (!isLast) {
            <span class="frg-breadcrumb__separator">{{ separator }}</span>
          }
        </li>
      }
    </ol>
  </nav>
}