<mat-list class="adf-comment-list">
    <mat-list-item *ngFor="let comment of comments"
                  (click)="selectComment(comment)"
                  class="adf-comment-list-item"
                  [class.adf-is-selected]="comment.isSelected"
                  id="adf-comment-{{comment?.id}}">
        <div id="comment-user-icon" class="adf-comment-img-container">
            <div
                *ngIf="!isPictureDefined(comment.createdBy)"
                class="adf-comment-user-icon">
                {{getUserShortName(comment.createdBy)}}
            </div>
            <div>
                <img [alt]="comment.createdBy" *ngIf="isPictureDefined(comment.createdBy)"
                      class="adf-people-img"
                     [src]="getUserImage(comment.createdBy)" />
            </div>
        </div>
        <div class="adf-comment-contents">
            <div matLine id="comment-user" class="adf-comment-user-name">
                {{comment.createdBy?.firstName}} {{comment.createdBy?.lastName}}
            </div>
            <div matLine id="comment-message" class="adf-comment-message" [innerHTML]="comment.message"></div>
            <div matLine id="comment-time" class="adf-comment-message-time">
                {{ comment.created | adfTimeAgo: currentLocale }}
            </div>
        </div>
    </mat-list-item>
</mat-list>