<p-breadcrumb [model]="items()">
    <ng-template pTemplate="item" let-item>
        @if (item.routerLink) {
        <a [routerLink]="item.routerLink" class="inline-flex items-center gap-2 text-sm font-medium text-[var(--p-text-color)] hover:text-[var(--p-primary-color)]">
            @if (item.favicon) {
            <app-site-favicon [site]="item.favicon" />
            }
            <span class="truncate max-w-[220px]">{{ item.label }}</span>
        </a>
        } @else {
        <span class="inline-flex items-center gap-2">
            @if (item.favicon) {
            <app-site-favicon [site]="item.favicon" />
            } @if (item.isCurrent) {
            <h1 class="m-0 text-sm font-semibold leading-none text-[var(--p-text-color)]">{{ item.label }}</h1>
            } @else {
            <span class="text-sm font-medium leading-none text-[var(--p-text-color)]">{{ item.label }}</span>
            }
        </span>
        }
    </ng-template>
</p-breadcrumb>
