<div *ngIf="breadcrumbsService.breadcrumbs$ | async as breadcrumbs" [attr.help-mode-key]="'navigate_breadcrumbs'" class="breadcrumbs">
    <a *ngIf="breadcrumbs.length === 0; else items" class="breadcrumb back" redactionNavigateLastDossiersScreen>
        <mat-icon svgIcon="iqser:expand"></mat-icon>
        {{ 'top-bar.navigation-items.back' | translate }}
    </a>

    <ng-template #items>
        <ng-container *ngFor="let breadcrumb of breadcrumbs; first as first">
            <mat-icon *ngIf="!first" svgIcon="iqser:arrow-right"></mat-icon>

            <a
                *ngIf="is(breadcrumb, 'text')"
                [class.clamp]="breadcrumb.options.clamp"
                [id]="first ? 'navigateToActiveDossiers' : ''"
                [matTooltip]="breadcrumb.options.clamp && (breadcrumb.name$ | async)"
                [routerLinkActiveOptions]="breadcrumb.options.routerLinkActiveOptions || { exact: false }"
                [routerLink]="breadcrumb.options.routerLink | tenant"
                class="breadcrumb"
                routerLinkActive="active"
            >
                {{ breadcrumb.name$ | async }}
            </a>

            <ng-container *ngIf="is(breadcrumb, 'dropdown')">
                <iqser-chevron-button
                    [label]="breadcrumb.name$ | async"
                    [matMenuTriggerFor]="dropdownMenu"
                    class="dropdown-breadcrumb"
                ></iqser-chevron-button>

                <mat-menu #dropdownMenu="matMenu" class="padding-bottom-8">
                    <div id="breadcrumbs-menu-items">
                        <a
                            *ngFor="let option of breadcrumb.options.options"
                            [routerLink]="option.options.routerLink | tenant"
                            mat-menu-item
                            routerLinkActive="active"
                        >
                            {{ option.name$ | async }}
                            <mat-icon class="checkmark" svgIcon="iqser:check"></mat-icon>
                        </a>
                    </div>
                </mat-menu>
            </ng-container>
        </ng-container>
    </ng-template>
</div>
