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

<div [class.removed]="annotation.item.isRemoved" 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
            *ngIf="!annotation.item.pending"
            (click)="showComments = !showComments"
            [matTooltip]="'comments.comments' | translate: { count: annotation.item.numberOfComments }"
            class="comments-counter"
            iqserStopPropagation
            matTooltipPosition="above"
        >
            <mat-icon svgIcon="red:comment"></mat-icon>
            {{ annotation.item.numberOfComments }}
        </div>

        <div *ngIf="multiSelectService.inactive()" class="actions">
            <redaction-annotation-actions
                [annotations]="[annotation.item]"
                [actionsHelpModeKey]="actionsHelpModeKey"
                [canPerformAnnotationActions]="pdfProxyService.canPerformActions()"
            ></redaction-annotation-actions>
        </div>
    </div>

    <ng-container *ngIf="showComments">
        <redaction-comments [annotation]="annotation.item"></redaction-comments>

        <div
            (click)="showComments = false"
            class="all-caps-label pointer hide-comments"
            iqserStopPropagation
            translate="comments.hide-comments"
        ></div>
    </ng-container>
</div>

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