<div class="flex-2 visible-lg breadcrumbs-container">
    <ng-container *ngIf="dossierTemplate$ | async as dossierTemplate">
        <a
            *ngIf="root || dossierTemplate"
            [routerLink]="'/main/admin/dossier-templates' | tenant"
            class="breadcrumb"
            translate="dossier-templates.label"
        ></a>

        <mat-icon svgIcon="iqser:arrow-right"></mat-icon>

        <a
            [class.active]="(activeDictionary$ | async) === undefined"
            [routerLink]="dossierTemplate.routerLink | tenant"
            class="breadcrumb ml-0"
        >
            {{ dossierTemplate.name }}
        </a>

        <ng-container *ngIf="activeDictionary$ | async as activeDictionary">
            <mat-icon svgIcon="iqser:arrow-right"></mat-icon>
            <a [routerLink]="dossierTemplate.routerLink + '/entities' | tenant" class="breadcrumb ml-0">
                {{ 'admin-side-nav.entities' | translate }}
            </a>

            <mat-icon svgIcon="iqser:arrow-right"></mat-icon>
            <a [routerLink]="activeDictionary.routerLink | tenant" class="breadcrumb ml-0" routerLinkActive="active">
                {{ activeDictionary.label }}
            </a>
        </ng-container>
    </ng-container>
</div>
