@if (isDocumine) {
    <iqser-circle-button
        [attr.help-mode-key]="'component_download'"
        [icon]="'red:extract'"
        [matMenuTriggerFor]="bulkComponentDownloadMenu"
        [tooltip]="'documine-export.export-tooltip' | translate"
        [tooltipPosition]="tooltipPosition"
        dropdownButton
    ></iqser-circle-button>
}

<ng-container *ngFor="let btn of displayedButtons; trackBy: trackBy">
    <iqser-circle-button
        (action)="btn.action($event)"
        *ngIf="btn.type === 'circleBtn'"
        [attr.aria-expanded]="btn.ariaExpanded && btn.ariaExpanded | async"
        [buttonId]="btn.id"
        [disabled]="btn.disabled"
        [icon]="btn.icon"
        [showDot]="btn.showDot"
        [tooltipClass]="btn.tooltipClass"
        [tooltipPosition]="tooltipPosition"
        [tooltip]="btn.tooltip | translate"
        [type]="btn.buttonType || buttonType"
        [attr.help-mode-key]="helpModeKey(btn)"
    ></iqser-circle-button>

    <!-- download redacted file-->
    <redaction-file-download-btn
        *ngIf="btn.type === 'downloadBtn'"
        [buttonId]="btn.id"
        [disabled]="btn.disabled"
        [dossier]="btn.dossier"
        [files]="btn.files"
        [tooltipClass]="btn.tooltipClass"
        [tooltipPosition]="tooltipPosition"
        [type]="buttonType"
        [attr.help-mode-key]="helpModeKey(btn)"
    ></redaction-file-download-btn>

    <!-- exclude from redaction -->
    <div *ngIf="btn.type === 'toggle'" class="iqser-input-group">
        <mat-slide-toggle
            (change)="btn.action()"
            [checked]="btn.checked"
            [disabled]="btn.disabled"
            [id]="btn.id"
            [matTooltipPosition]="tooltipPosition"
            [matTooltip]="btn.tooltip | translate"
            [ngClass]="btn.class"
            [attr.help-mode-key]="helpModeKey(btn)"
            color="primary"
            iqserStopPropagation
        ></mat-slide-toggle>
    </div>
</ng-container>

<iqser-circle-button
    (menuClosed)="expanded = false"
    (menuOpened)="expanded = true"
    *ngIf="hiddenButtons?.length > 0"
    [attr.aria-expanded]="expanded"
    [icon]="'iqser:more-actions'"
    [matMenuTriggerFor]="hiddenButtonsMenu"
    [type]="buttonType"
    buttonId="file-actions-menu-trigger-btn"
></iqser-circle-button>

<mat-menu #hiddenButtonsMenu="matMenu" class="padding-bottom-8">
    <button (click)="onButtonClick(btn, $event)" *ngFor="let btn of hiddenButtons" [disabled]="btn.disabled" mat-menu-item>
        <ng-container *ngIf="btn.type === 'circleBtn'">
            <mat-icon [svgIcon]="btn.icon"></mat-icon>
            {{ btn.tooltip | translate }}
        </ng-container>

        <ng-container *ngIf="btn.type === 'downloadBtn'">
            <mat-icon svgIcon="iqser:download"></mat-icon>
            {{ 'dossier-overview.download-file' | translate }}
        </ng-container>

        <ng-container *ngIf="btn.type === 'toggle'">
            <mat-slide-toggle [checked]="btn.checked" [disabled]="btn.disabled" class="ml-0" color="primary"></mat-slide-toggle>
            {{ btn.tooltip | translate }}
        </ng-container>
    </button>
</mat-menu>

<mat-menu #bulkComponentDownloadMenu="matMenu">
    <button (click)="downloadComponentAsJSON()" [innerHTML]="'component-download.json' | translate" mat-menu-item></button>
    <button (click)="downloadComponentAsXML()" [innerHTML]="'component-download.xml' | translate" mat-menu-item></button>
</mat-menu>