@if (canPerformAnnotationActions && annotationPermissions()) {
    <div [class.always-visible]="alwaysVisible || (helpModeService.isHelpModeActive$ | async)" class="annotation-actions">
        <!-- Resize Mode for annotation -> only resize accept and deny actions are available-->
        <ng-container *ngIf="resizing() && annotationPermissions().canResizeAnnotation">
            <iqser-circle-button
                (action)="acceptResize()"
                [buttonId]="
                    annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-accept_resize' : 'annotations-accept_resize'
                "
                [class.disabled]="!resized"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="resized ? ('annotation-actions.resize-accept.label' | translate) : ''"
                [type]="buttonType"
                icon="iqser:check"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="cancelResize()"
                [buttonId]="
                    annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-cancel_resize' : 'annotations-cancel_resize'
                "
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.resize-cancel.label' | translate"
                [type]="buttonType"
                icon="iqser:close"
            ></iqser-circle-button>
        </ng-container>

        <!-- Not resizing - standard actions -->
        <ng-container *ngIf="!resizing()">
            <iqser-circle-button
                (action)="resize()"
                *ngIf="canResize()"
                [attr.help-mode-key]="helpModeKey('resize')"
                [buttonId]="annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-resize' : 'annotations-resize'"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.resize.label' | translate"
                [type]="buttonType"
                icon="iqser:resize"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="annotationActionsService.editRedaction(annotations())"
                *ngIf="canEdit()"
                [attr.help-mode-key]="helpModeKey('edit')"
                [buttonId]="annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-edit' : 'annotations-edit'"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.edit-redaction.label' | translate"
                [type]="buttonType"
                icon="iqser:edit"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="acceptRecommendation()"
                *ngIf="canAcceptRecommendation()"
                [attr.help-mode-key]="helpModeKey('accept')"
                [buttonId]="
                    annotations().length === 1
                        ? 'annotation-' + annotations()[0].id + '-accept_recommendation'
                        : 'annotations-accept_recommendation'
                "
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.accept-recommendation.label' | translate"
                [type]="buttonType"
                icon="iqser:check"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="annotationActionsService.convertHighlights(annotations())"
                *ngIf="viewModeService.isEarmarks()"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.convert-highlights.label' | translate"
                [type]="buttonType"
                icon="red:convert"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="annotationActionsService.removeHighlights(annotations())"
                *ngIf="viewModeService.isEarmarks()"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.remove-highlights.label' | translate"
                [type]="buttonType"
                icon="iqser:trash"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="annotationActionsService.undoDirectAction(annotations())"
                *allow="roles.redactions.deleteManual; if: annotationPermissions().canUndo"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.undo' | translate"
                [type]="buttonType"
                icon="red:undo"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="annotationReferencesService.show(annotations()[0])"
                *ngIf="multiSelectService.inactive() && annotations()[0].reference.length"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.see-references.label' | translate"
                [type]="buttonType"
                icon="red:reference"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="annotationActionsService.forceAnnotation(annotations())"
                *ngIf="canForceRedaction()"
                [attr.help-mode-key]="isImageHint() ? helpModeKey('redact') : helpModeKey('force')"
                [buttonId]="
                    annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-force_redaction' : 'annotations-force_redaction'
                "
                [icon]="isImageHint() ? 'red:pdftron-action-add-redaction' : 'iqser:thumb-up'"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="
                    isImageHint()
                        ? ('annotation-actions.force-redaction.label-image-hint' | translate)
                        : ('annotation-actions.force-redaction.label' | translate)
                "
                [type]="buttonType"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="annotationActionsService.forceAnnotation(annotations(), true)"
                *ngIf="canForceHint()"
                [attr.help-mode-key]="actionsHelpModeKey"
                [buttonId]="annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-force_hint' : 'annotations-force_hint'"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.force-hint.label' | translate"
                [type]="buttonType"
                icon="iqser:thumb-up"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="hideAnnotation()"
                *ngIf="isImage() && isVisible() && !hideSkipped()"
                [attr.help-mode-key]="helpModeKey('hide')"
                [buttonId]="annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-hide' : 'annotations-hide'"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.hide' | translate"
                [type]="buttonType"
                icon="iqser:visibility-off"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="showAnnotation()"
                *ngIf="isImage() && !isVisible() && !hideSkipped()"
                [buttonId]="annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-show' : 'annotations-show'"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.show' | translate"
                [type]="buttonType"
                icon="iqser:visibility"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="removeRedaction()"
                *ngIf="canRemoveRedaction()"
                [attr.help-mode-key]="helpModeKey('remove')"
                [buttonId]="annotations().length === 1 ? 'annotation-' + annotations()[0].id + '-remove' : 'annotations-remove'"
                [tooltipPosition]="tooltipPosition"
                [tooltip]="'annotation-actions.remove-annotation.remove-redaction' | translate"
                [type]="buttonType"
                icon="iqser:trash"
            ></iqser-circle-button>
        </ng-container>
    </div>
}