<div class="row">
  <h1 class="heading">{{title}}
    <span>[{{ reviewData.userDetails.length}}]</span>
  </h1>
  <div class="row" *ngIf="reviewData.userDetails !== 0">
    <div *ngFor="let reviewer of reviewData.userDetails" (click)="navigate(reviewer)">
      <div class="col-md-3 commoncard" style="height:300px">
        <div class="profilecard">
          <div class="cardimg">
            <!-- <img [src]="getUserImage()" class="img-responsive img-circle" alt=""> -->
            <app-avatar-pic [pic]="image" [initials]="getInitials(reviewer.name)"></app-avatar-pic>
          </div>
          <div class="cardinf">
            <p class="employeename">{{reviewer.name}}</p>
            <p class="employeeid">{{reviewer.id}}</p>
          </div>
        </div>

        <ul class="revlist">
          <li *ngFor="let review of reviewer.assessmentDetails; let i = index">
              <div *ngIf="i < 2">
                <div class="cardimg">
                  <img [src]="getImageByValue(getStatus(review))" class="img-responsive" alt="">
                </div>
                <div class="cardinf">
                  <p class="courseename">
                    {{review.assessmentName}}
                  </p>
                  <p class="courseecategory">{{review.skillTrackName}}</p>
                  <p class="courseelevel">{{review.experienceLevel | titlecase}} Level</p>
                </div>
              </div>
          </li>
        </ul>
        <div *ngIf = "reviewer.assessmentDetails.length > 2" class="counter">
            <span class="badge">+{{reviewer.assessmentDetails.length - 2}}</span>
        </div>
      </div>
    </div>
  </div>
</div>
