<section *ngIf="dossier$ | async as dossier" class="dialog">
    <div
        [innerHTML]="'edit-dossier-dialog.header' | translate : { dossierName: dossier.dossierName }"
        class="dialog-header heading-l"
        id="editDossierHeader"
    ></div>

    <div class="dialog-content">
        <iqser-side-nav [title]="'edit-dossier-dialog.side-nav-title' | translate">
            <div *ngFor="let item of navItems">
                <div
                    *ngIf="!item.hide"
                    (click)="changeTab(item.key)"
                    [class.active]="item.key === activeNav"
                    [attr.help-mode-key]="item.helpModeKey"
                    class="item"
                >
                    {{ item.sideNavTitle || item.title | translate }}
                    <mat-icon *ngIf="item.readonly" svgIcon="red:read-only"></mat-icon>
                </div>
            </div>
        </iqser-side-nav>

        <div>
            <div [class.no-actions]="!showActionButtons" [class.no-padding]="noPaddingTab" class="content">
                <div *ngIf="showHeading" class="heading">
                    {{ activeNavItem.title | translate }}
                </div>

                <div *ngIf="activeNavItem.readonly" class="read-only-indicator all-caps-label primary">
                    <mat-icon class="mr-8" svgIcon="red:read-only"></mat-icon>
                    {{ 'readonly' | translate }}
                </div>

                <redaction-edit-dossier-general-info
                    *ngIf="activeNav === 'dossierInfo'"
                    [dossier]="dossier"
                ></redaction-edit-dossier-general-info>

                <redaction-edit-dossier-download-package
                    *ngIf="activeNav === 'downloadPackage'"
                    [dossier]="dossier"
                ></redaction-edit-dossier-download-package>

                <redaction-edit-dossier-dictionary
                    *ngIf="activeNav === 'dossierDictionary'"
                    [dossier]="dossier"
                ></redaction-edit-dossier-dictionary>

                <redaction-edit-dossier-team *ngIf="activeNav === 'members'" [dossier]="dossier"></redaction-edit-dossier-team>

                <redaction-edit-dossier-attributes
                    *ngIf="activeNav === 'dossierAttributes'"
                    [dossier]="dossier"
                ></redaction-edit-dossier-attributes>
            </div>

            <div *ngIf="showActionButtons" class="dialog-actions">
                <iqser-icon-button
                    (action)="save()"
                    [disabled]="disabled || !valid || !changed"
                    [label]="'edit-dossier-dialog.actions.save' | translate"
                    [type]="iconButtonTypes.primary"
                    buttonId="editDossierSaveButton"
                ></iqser-icon-button>

                <iqser-icon-button
                    (action)="save({ closeAfterSave: true })"
                    [buttonId]="'saveAndClose'"
                    [disabled]="disabled || !valid || !changed"
                    [label]="'edit-dossier-dialog.actions.save-and-close' | translate"
                    [type]="iconButtonTypes.dark"
                ></iqser-icon-button>

                <div (click)="revert()" class="all-caps-label cancel" id="revert" translate="edit-dossier-dialog.actions.revert"></div>

                <iqser-help-button *deny="roles.getRss" [dialogButton]="true"></iqser-help-button>
            </div>
        </div>
    </div>

    <iqser-circle-button (action)="close()" buttonId="editDossierCloseButton" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>
