@if(complaintCommentList.length > 0) {
<div class="card shadow-sm border-0">
  <div class="card-header bg-primary text-white py-2">
    <h6 class="mb-0">
      <mat-icon class="me-2 fs-5 align-middle">chat</mat-icon>
      {{ 'COMMENTS' | translate }}
    </h6>
  </div>
  <div class="card-body p-0">
    <div class="list-group list-group-flush">
      @for (complaintComment of complaintCommentList; track complaintComment) {
      <div class="list-group-item d-flex align-items-start border-0 border-bottom px-3 py-3 bg-light">
        <div class="me-3 pt-1 d-flex align-items-center justify-content-center" style="height:36px;">
          <button *hasClaim="'DELETE_COMPLAINT_COMMENT'"
            class="btn btn-outline-danger btn-sm rounded-circle d-flex align-items-center justify-content-center"
            style="width:36px; height:36px; padding:0; border-width:2px;"
            (click)="deleteComplaintComment(complaintComment.id)" title="Delete Comment">
            <mat-icon class="fs-5 d-flex align-items-center justify-content-center">delete</mat-icon>
          </button>
        </div>
        <div class="flex-grow-1">
          <div class="mb-2 text-dark fs-6" [innerHTML]="complaintComment.commentText"></div>
          <div class="d-flex align-items-center">
            <small class="text-muted me-2">
              {{'BY' | translate}}
              <span class="fw-semibold text-primary">{{complaintComment?.commentedByName}}</span>
            </small>
            <small class="text-muted">
              {{'AT' | translate}}
              <span class="badge bg-success ms-1">
                {{complaintComment.commentedAt | utcToLocalTime:'shortDate'}}
              </span>
            </small>
          </div>
        </div>
      </div>
      }
    </div>
  </div>
</div>
}