<div class="active-bar-marker"></div>

<div [class.removed]="annotation.item.isChangeLogRemoved" class="annotation">
    <redaction-annotation-card
        [annotation]="annotation.item"
        [isSelected]="annotation.isSelected"
        [matTooltip]="annotation.item.content"
        matTooltipPosition="above"
    ></redaction-annotation-card>

    <div *ngIf="!annotation.item.isEarmark" class="actions-wrapper">
        <div
            (click)="comments.toggleExpandComments()"
            [matTooltip]="'comments.comments' | translate : { count: annotation.item.comments?.length }"
            class="comments-counter"
            iqserStopPropagation
            matTooltipPosition="above"
        >
            <mat-icon svgIcon="red:comment"></mat-icon>
            {{ annotation.item.comments.length }}
        </div>

        <div *ngIf="_multiSelectService.inactive()" class="actions">
            <redaction-annotation-actions
                [annotations]="[annotation.item]"
                [attr.help-mode-key]="actionsHelpModeKey"
                [canPerformAnnotationActions]="_pdfProxyService.canPerformActions()"
            ></redaction-annotation-actions>
        </div>
    </div>

    <redaction-comments #comments [annotation]="annotation.item"></redaction-comments>
</div>

<redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
