<div class="card">
    <div class="card-body">
        <h4 class="card-title">Recent Comments</h4>
    </div>
    <div class="comment-widgets scrollable">
        <!-- Comment Row -->
        <div class="d-flex flex-row comment-row m-t-0" *ngFor='let comment of userComments'>
            <div class="p-2">
                <img [src]=comment.image alt="user" width="50" class="rounded-circle">
            </div>
            <div class="comment-text w-100">
                <h6 class="font-medium">{{comment.name}}</h6>
                <span class="m-b-15 d-block">{{comment.comment}} </span>
                <div class="comment-footer">
                    <span class="text-muted float-right">{{comment.date}}</span>
                    <span class="label label-rounded {{comment.labelClass}}">{{comment.status}}</span>
                    <span class="action-icons">
                        <a href="javascript:void(0)"><i class="ti-pencil-alt"></i></a>
                        <a href="javascript:void(0)"><i class="ti-check"></i></a>
                        <a href="javascript:void(0)"><i class="ti-heart"></i></a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>