<ng-container *ngIf="componentContext$ | async as ctx">
    <div *ngFor="let comment of annotation.comments; trackBy: trackBy" class="comment">
        <div class="comment-details-wrapper">
            <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date : 'exactDate'" class="small-label">
                <strong> {{ comment.user | name }} </strong>
                {{ comment.date | date : 'sophisticatedDate' }}
            </div>

            <div class="comment-actions">
                <iqser-circle-button
                    (action)="deleteComment(comment)"
                    *ngIf="permissionsService.canDeleteComment(comment, _state.file(), _state.dossier())"
                    [iconSize]="10"
                    [size]="20"
                    class="pointer"
                    icon="iqser:trash"
                ></iqser-circle-button>
            </div>
        </div>

        <div>{{ comment.text }}</div>
    </div>

    <iqser-input-with-action
        (action)="addComment($event)"
        *ngIf="permissionsService.canAddComment(_state.file(), _state.dossier())"
        [placeholder]="'comments.add-comment' | translate"
        autocomplete="off"
        icon="iqser:collapse"
        width="full"
    ></iqser-input-with-action>

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