<div *ngFor="let comment of comments(); trackBy: trackBy" class="comment">
    <div class="comment-details-wrapper">
        <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
            <strong> {{ comment.userId | name }} </strong>
            {{ comment.date | date: 'sophisticatedDate' }}
        </div>

        <div class="comment-actions">
            <iqser-circle-button
                (action)="remove(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)="add($event)"
    *ngIf="permissionsService.canAddComment(state.file(), state.dossier())"
    [placeholder]="'comments.add-comment' | translate"
    autocomplete="off"
    icon="iqser:collapse"
    width="full"
></iqser-input-with-action>
