<section *ngIf="state.file() as file" [class.fullscreen]="fullScreen">
    <div class="page-header">
        <div class="flex flex-1">
            <redaction-view-switch></redaction-view-switch>
        </div>

        <!-- TODO: mode this file preview header to a separate component-->
        <div #actionsWrapper class="flex-2 actions-container">
            <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>

            <redaction-user-management></redaction-user-management>

            <ng-container *ngIf="permissionsService.isApprover(state.dossier()) && !!file.lastReviewer">
                <div class="vertical-line"></div>

                <div class="all-caps-label mr-16 ml-8 label">
                    {{ 'file-preview.last-assignee' | translate : { status: file.workflowStatus } }}
                </div>

                <iqser-initials-avatar
                    [user]="file.isApproved ? file.lastApprover : file.lastReviewer"
                    [withName]="true"
                ></iqser-initials-avatar>
            </ng-container>

            <div class="vertical-line"></div>

            <!-- TODO: mode these actions to a separate component -->
            <iqser-circle-button
                (action)="openRSSView()"
                *allow="roles.getRss"
                [tooltip]="'file-preview.open-rss-view' | translate"
                class="ml-8"
                icon="red:extract"
                tooltipPosition="below"
            ></iqser-circle-button>

            <redaction-file-actions
                [dossier]="state.dossier()"
                [fileActionsHelpModeKey]="'editor_document_features'"
                [file]="file"
                [minWidth]="width"
                type="file-preview"
            ></redaction-file-actions>

            <iqser-circle-button
                (action)="toggleFullScreen()"
                [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
                [tooltip]="'file-preview.fullscreen' | translate"
                class="ml-2"
            ></iqser-circle-button>

            <!-- Dev Mode Features-->
            <iqser-circle-button
                (action)="downloadOriginalFile(file)"
                *ngIf="userPreferenceService.areDevFeaturesEnabled"
                [tooltip]="'file-preview.download-original-file' | translate"
                [type]="circleButtonTypes.primary"
                class="ml-8"
                icon="iqser:download"
            ></iqser-circle-button>

            <!-- End Dev Mode Features-->

            <iqser-circle-button
                *ngIf="!fullScreen"
                [routerLink]="state.dossier().routerLink | tenant"
                [tooltip]="'common.close' | translate"
                class="ml-8"
                icon="iqser:close"
            ></iqser-circle-button>
        </div>
    </div>

    <div class="overlay-shadow"></div>

    <div class="content-inner">
        <div class="content-container">
            <!-- Here comes PDF Viewer-->
        </div>

        <div class="right-container">
            <redaction-file-preview-right-container></redaction-file-preview-right-container>
        </div>
    </div>
</section>

<ng-template #annotationFilterTemplate let-filter="filter">
    <redaction-type-filter [dossierTemplateId]="state.dossierTemplateId" [filter]="filter"></redaction-type-filter>
</ng-template>
