@if (folderNode) {
    <nav
        data-automation-id="breadcrumb"
        class="adf-breadcrumb-container"
        role="navigation"
        [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
    >
        @if (hasPreviousNodes()) {
            <button
                tabindex="0"
                class="adf-breadcrumb-dropdown-trigger"
                (click)="open()"
                [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
            >
                <div class="adf-breadcrumb-dropdown-trigger-icon">
                    <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
                    <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
                </div>
            </button>
            <mat-select
                #dropdown
                class="adf-breadcrumb-dropdown-path"
                tabindex="-1"
                role="button"
            >
            @for (node of previousNodes; track node.id) {
                <mat-option
                    (click)="onRoutePathClick(node, $event)"
                    (onSelectionChange)="onRouteClick(node)"
                    class="adf-breadcrumb-path-option"
                    [disabled]="readOnly"
                >
                    {{ node.name ?? '' | translate }}
                </mat-option>
            }
            </mat-select>
        }

        @for (item of lastNodes; track item.id; let last = $last) {
            <div
                [class.adf-active]="last"
                title="{{ item.name ?? '' | translate }}"
                class="adf-breadcrumb-item">
            @if (breadcrumbItemIsAnchor(last)) {
                <a
                    href="#"
                    [attr.data-automation-id]="'breadcrumb_' + item.name"
                    class="adf-breadcrumb-item-anchor"
                    (click)="onRoutePathClick(item, $event)"
                >
                    {{ item.name ?? '' | translate }}
                </a>
            } @else {
                <div class="adf-breadcrumb-item-current" aria-current="location">
                    {{ (selectedRowItemsCount < 1 ? item.name ?? '' : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
                </div>
            }

            @if (!last) {
                <mat-icon class="adf-breadcrumb-item-chevron" adf-icon="chevron_right" />
            }
            </div>
        }
    </nav>

    @if (!folderNode && hasRoot) {
        <nav
            data-automation-id="breadcrumb"
            role="navigation"
            [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
        >
            <div class="adf-breadcrumb-item adf-active" role="group">
                <div class="adf-breadcrumb-item-current">
                    {{ root ?? '' | translate }}
                </div>
            </div>
        </nav>
    }
}