<iqser-status-bar [configs]="statusBarConfig()" [small]="true"></iqser-status-bar>

<ng-container *ngIf="state.file() as file">
    <div class="all-caps-label mr-16 ml-8 label">
        {{ translations[file.workflowStatus] | translate }}
    </div>

    <iqser-initials-avatar
        *ngIf="!editingReviewer"
        [id]="'assignee'"
        [user]="file.assignee"
        [withName]="!!file.assignee"
    ></iqser-initials-avatar>

    <div
        (click)="editingReviewer = true"
        *ngIf="!editingReviewer && _canAssignReviewer()"
        [id]="'assign-reviewer'"
        [translate]="'file-preview.assign-reviewer'"
        class="assign-reviewer pointer"
    ></div>

    <redaction-assign-user-dropdown
        (cancel)="editingReviewer = false"
        (save)="assignReviewer(file, $event)"
        *ngIf="editingReviewer"
        [options]="_usersOptions()"
        [value]="file.assignee"
    ></redaction-assign-user-dropdown>

    <div *ngIf="!editingReviewer && _canAssign()" class="assign-actions-wrapper">
        <iqser-circle-button
            (action)="editingReviewer = true"
            *ngIf="_canAssignOrUnassign() && !!file.assignee"
            [attr.help-mode-key]="'editor_assign_user'"
            [buttonId]="'change-assignee'"
            [icon]="'iqser:edit'"
            [tooltip]="assignTooltip() | translate"
        ></iqser-circle-button>

        <iqser-circle-button
            (action)="fileAssignService.assignToMe([file])"
            *ngIf="_canAssignToSelf()"
            [icon]="'red:assign-me'"
            [tooltip]="'file-preview.assign-me' | translate"
            buttonId="assign-me"
        ></iqser-circle-button>
    </div>
</ng-container>
