<div [class]="'card '+class">
    <div class="card-body">
        <h5 class="card-title">{{ 'dashboards.new-comments' | translate }}</h5>
        <div class="dashboard-list-with-user">
            <perfect-scrollbar class="scroll" [config]="{suppressScrollX: true, wheelPropagation: false}">
                <div *ngFor="let item of data" class="d-flex flex-row mb-3 pb-3 border-bottom">
                    <a routerLink="/app/pages/product/details">
                        <img [src]="item.thumb" [alt]="item.title"
                            class="img-thumbnail border-0 rounded-circle list-thumbnail align-self-center xsmall" />
                    </a>
                    <div class="pl-3 pr-2">
                        <a routerLink="/app/pages/product/details">
                            <p class="font-weight-medium mb-0">{{item.title}}</p>
                            <p class="text-muted mb-0 text-small">
                                {{item.detail}}
                            </p>
                            <div *ngIf="displayRate" class="form-group mb-1 mt-2">
                                <rating [readonly]="true" [max]="5" [(ngModel)]="item.rate" [customTemplate]="t">
                                </rating>
                                <ng-template #t let-index="index" let-value="value">{{index < value ? '' : ''}}
                                </ng-template>
                            </div>
                        </a>
                    </div>
                </div>
            </perfect-scrollbar>
        </div>
    </div>
</div>