<div class="row">
    <h1 class="heading">{{title}}
         <span>[{{list.length}}]</span>
        <!-- <span>[00]</span> -->
        <!--<pre>{{list | json}}</pre>-->
    </h1>
    <div class="row">
        <app-slider [valueStep]='300'>
            <div *ngFor="let reviewer of list; let i = index ">
                <div class="col-md-3 commoncard" (click)="eventChange(reviewer.userDetails.userInfoMstrId)">
                    <div class="profilecard">
                        <div class="cardimg">
                            <!-- <img [src]="getUserImage()" class="img-responsive img-circle" alt=""> -->
                            <app-avatar-pic [pic]="image" [initials]="getInitials(reviewer.userDetails.fullName)"></app-avatar-pic>
                        </div>
                        <div class="cardinf">
                            <p class="employeename">{{reviewer.userDetails.fullName}}</p>
                            <p class="employeeid">{{reviewer.userDetails.employeeId}}</p>
                        </div>
                    </div>

                    <ul *ngIf="title === 'Technical UseCase Assessment'" class="revlist">
                        <li *ngFor="let review of reviewer.employeeEvents; let rowCount = index">
                            <div *ngIf="review.technical.length !== 0 && rowCount < 3 ">
                                <div class="cardimg">
                                    <img [src]="getImageByValue(getStatus(review.assessmentStatus))" class="img-responsive" alt="">
                                </div>
                                <div class="cardinf">
                                    <p class="courseename">{{review.technical[0].usecaseTitle}}</p>
                                    <p class="courseecategory"></p>
                                    <p class="courseelevel">{{review.technical[0].pgExperienceLevel.experienceLevel }} Level</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul *ngIf="title === 'Business UseCase Assessment'" class="revlist">
                        <li *ngFor="let review of reviewer.employeeEvents; let rowCount = index ">

                            <div *ngIf="review.business.length !== 0 && rowCount < 3">
                                <div class="cardimg">
                                    <img [src]="getImageByValue(getStatus(review.assessmentStatus))" class="img-responsive" alt="">
                                </div>
                                <div class="cardinf">
                                    <p class="courseename">{{review.business[0].usecaseTitle}}</p>
                                    <p class="courseecategory"></p>
                                    <p class="courseelevel">{{review.business[0].pgExperienceLevel.experienceLevel }} Level</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul *ngIf="title === 'Primary Skills Evaluation'" class="revlist">
                        <li *ngFor="let review of reviewer.employeeEvents; let rowCount = index">
                            <div *ngIf="review.primary.length !== 0 && rowCount < 3 ">

                                <div class="cardimg">
                                    <img [src]="getImageByValue(getStatus(review.assessmentStatus))" class="img-responsive" alt="">
                                </div>
                                <div class="cardinf">
                                    <p class="courseename">{{review.primary[0].assessmentName}}</p>
                                    <p class="courseecategory"></p>
                                    <p class="courseelevel">{{review.primary[0].pgSkillTrackMstr.skillTrackName }} Level</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul *ngIf="title === 'Learning Path'" class="revlist">
                        <li *ngFor="let review of reviewer.empLpList; let rowCount = index">
                            <div *ngIf="rowCount < 3 ">
                                <div class="cardimg">
                                    <img [src]="getImageByValue(getStatus(review.userStatus))" class="img-responsive" alt="">
                                </div>
                                <div class="cardinf">
                                    <p class="courseename">{{review.name}}</p>
                                    <p class="courseecategory"></p>
                                    <p class="courseelevel">{{review.pgExperienceLevelName}} Level</p>
                                </div>
                            </div>
                        </li>

                    </ul>
                    <ul *ngIf="title === 'Course'" class="revlist">
                        <li *ngFor="let review of reviewer.courseList; let rowCount = index">
                            <div *ngIf="rowCount < 3 ">
                                <div class="cardimg">
                                    <img [src]="getImageByValue(getStatus(review.status))" class="img-responsive" alt="">
                                </div>
                                <div class="cardinf">
                                    <p class="courseename">{{review.pgCourseDetails.courseName}}</p>
                                    <p class="courseecategory"></p>
                                    <p class="courseelevel"></p>
                                </div>
                            </div>
                        </li>

                    </ul>

                    <div *ngIf="title === 'Course'">
                        <div class="moreThenCount" *ngIf="reviewer.courseList.length > 3">+{{reviewer.courseList.length - 3}}</div>
                    </div>
                    <div *ngIf="title === 'Learning Path'">
                        <div class="moreThenCount" *ngIf="reviewer.empLpList.length > 3">+{{reviewer.empLpList.length - 3}}</div>
                    </div>
                    <div *ngIf="title === 'Primary Skills Evaluation'">
                        <div class="moreThenCount" *ngIf="reviewer.employeeEvents.length > 3">+{{reviewer.employeeEvents.length - 3}}</div>
                    </div>
                    <div *ngIf="title === 'Technical UseCase Assessment'">
                        <div class="moreThenCount" *ngIf="reviewer.employeeEvents.length > 3">+{{reviewer.employeeEvents.length - 3}}</div>
                    </div>
                    <div *ngIf="title === 'Business UseCase Assessment'">

                        <div class="moreThenCount" *ngIf="reviewer.employeeEvents.length > 3">+{{reviewer.employeeEvents.length - 3}}</div>
                    </div>
                </div>
            </div>
        </app-slider>
    </div>
</div>
