<div class="row">
    <div class="col-sm-12">
        <div class="list-group">
            <div *ngFor="let documentComment of documentComments" class="list-group-item list-group-item-action"
                aria-current="true">
                <h6 class="m-b-1">
                    {{documentComment.comment}}
                    <span *hasClaim="['ALL_DOCUMENTS_MANAGE_COMMENT','ASSIGNED_DOCUMENTS_MANAGE_COMMENT']" role="button"
                        class="badge" (click)="onDelete(documentComment.id)">
                        <i-feather name="trash" class="small-icon text-danger"></i-feather>
                    </span>
                </h6>
                <div class="w-100">
                    <small class="m-r-10">
                        {{documentComment.createdDate | utcToLocalTime:'short'}}
                    </small>
                    <small class="text-primary">{{documentComment?.createdByName}}
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" *hasClaim="['ALL_DOCUMENTS_MANAGE_COMMENT','ASSIGNED_DOCUMENTS_MANAGE_COMMENT']">
    <div class="col-sm-12 mb-0">
        <form [formGroup]="commentForm">
            <div class="row">
                <div class="col-md-12 m-t-10">
                    <textarea class="form-control" formControlName="comment" rows="3"></textarea>
                    <div class="text-danger"
                        *ngIf="commentForm.get('comment').touched && commentForm.get('comment').hasError('required')">
                        {{'COMMENT_IS_REQUIRED' | translate}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 mb-0">
                    <button (click)="addComment()" type="submit" class="btn btn-success btn-sm m-r-10">
                        <i-feather name="send" class="small-icon"></i-feather>
                        {{'ADD_COMMENT' | translate}}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>