<div class="container tableDiv">
    <div class="row">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th *ngIf="(role === 'TA') && (activeStatus === 'S1')"><input #allSelect type="checkbox" (change)="AllChanged(allSelect.checked)"> </th>
                    <th *ngIf="role === 'HEAD_COACH'"><input #allSelect type="checkbox" [hidden]="hideCheck(list,activeStatus)" (change)="AllChanged(allSelect.checked)"> </th>
                    <th *ngIf="role === 'COACH' && activeStatus !== 'S1'"><input #allSelect type="checkbox" [hidden]="hideCheck(list,activeStatus)" (change)="AllChanged(allSelect.checked)"> </th>
                    <th colspan="2" (click)="sortFn('rvdata.assessmentCompletedBy')">Candidate</th>
                    <th colspan="1" (click)="sortFn('rvdata.primaryAssessCount')">Location</th>
                    <th colspan="2" (click)="sortFn('rvdata.usecaseTitle')"> Job Requirement</th>
                    <ng-container *ngIf="activeStatus === 'S1'">
                        <th colspan="1" (click)="sortFn('rvdata.coursassessmentStatuseCount')">Level</th>
                        <th colspan="1" (click)="sortFn('rvdata.primaryAssessCount')">AddedOn</th>
                        <th colspan="1" *ngIf="role !== 'COACH'"></th>
                    </ng-container>
                    <ng-container *ngIf="activeStatus === 'S2'">
                        <th colspan="1" (click)="sortFn('rvdata.coursassessmentStatuseCount')">Status</th>
                        <th colspan="1" (click)="sortFn('rvdata.primaryAssessCount')">Score</th>
                        <th colspan="1" *ngIf="role !== 'TA' && role !== 'COACH'"></th>
                    </ng-container>
                    <ng-container *ngIf="activeStatus === 'S3'">
                        <th colspan="1" (click)="sortFn('rvdata.primaryAssessCount')">Assessment</th>
                        <th colspan="1" (click)="sortFn('rvdata.primaryAssessCount')">Coach</th>
                        <th colspan="1" (click)="sortFn('rvdata.coursassessmentStatuseCount')">Status</th>
                        <th colspan="2" *ngIf="role !== 'TA'"></th>
                    </ng-container>
                    <ng-container *ngIf="activeStatus === 'S4'">
                        <th colspan="1" (click)="sortFn('rvdata.primaryAssessCount')">Coach</th>
                        <th colspan="1" (click)="sortFn('rvdata.coursassessmentStatuseCount')">Status</th>
                        <th colspan="2" *ngIf="role !== 'TA'"></th>
                    </ng-container>
                    <ng-container *ngIf="activeStatus === 'S5'">
                        <th colspan="1" (click)="sortFn('rvdata.primaryAssessCount')">Coach</th>
                        <th colspan="1" (click)="sortFn('rvdata.coursassessmentStatuseCount')">Status</th>
                        <th colspan="1" *ngIf="role !== 'TA' && role !== 'COACH'"></th>
                    </ng-container>

                </tr>
            </thead>
            <tbody *ngIf="list.length !== 0">
                <tr *ngFor="let rvdata of list; let i=index" [class]="stsClassfunc(rvdata, i)" [class.active]="i == rowIndex" (mouseover)="over(i)" (mouseleave)="mouseleft(i)">
                   <!---->
                    <ng-container *ngIf="role === 'TA'">
                      <ng-container *ngIf="activeStatus === 'S1'">
                        <td><input id="singleSelect" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                      </ng-container>
                    </ng-container>

                    <ng-container *ngIf="role === 'HEAD_COACH'">

                    <ng-container *ngIf="activeStatus === 'S1'">
                        <td><input id="singleSelect" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                    </ng-container>

                    <ng-container *ngIf="activeStatus === 'S2'">
                        <td><input id="singleSelect" [checked]="singleCheck" [hidden]="rvdata.userStatus ===  'METTL_FAILED'|| rvdata.userStatus ===  'METTL_INITIATED'|| rvdata.userStatus ===  'METTL_IN_PROGRESS'" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                    </ng-container>

                    <ng-container *ngIf="activeStatus === 'S3'">
                        <td><input id="singleSelect" [hidden]="rvdata.userStatus ===  'CODING_CHALLENGE_INITIATED'|| rvdata.userStatus ===  'CODING_CHALLENGE_STARTED'|| rvdata.userStatus === 'CODING_CHALLENGE_REJECTED'" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                    </ng-container>

                      <ng-container *ngIf="activeStatus === 'S4'">
                        <td><input id="singleSelect" [hidden]="rvdata.userStatus ===  'WHITEBOARD_REJECTED'" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                    </ng-container>
                    <ng-container *ngIf="activeStatus === 'S5'">
                        <td><input id="singleSelect" [hidden]="rvdata.userStatus ===  'LEADERSHIP_CONNECT_CLEARED' || rvdata.userStatus ===  'LEADERSHIP_CONNECT_REJECTED'" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                    </ng-container>

                    </ng-container>

                    <ng-container *ngIf="role === 'COACH'">

                      <ng-container *ngIf="activeStatus === 'S3'">
                        <td><input id="singleSelect" [hidden]="rvdata.userStatus ===  'CODING_CHALLENGE_INITIATED'|| rvdata.userStatus ===  'CODING_CHALLENGE_STARTED'|| rvdata.userStatus === 'CODING_CHALLENGE_REJECTED'" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                      </ng-container>

                      <ng-container *ngIf="activeStatus === 'S4'">
                        <td><input id="singleSelect" [hidden]="rvdata.userStatus ===  'WHITEBOARD_REJECTED'" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                      </ng-container>
                    </ng-container>

                    <!--<ng-container *ngIf="(role === 'TA' || role === 'HEAD_COACH') && (activeStatus === 'S1')">

                        <td><input id="singleSelect" [checked]="singleCheck" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>

                    </ng-container>
                    <ng-container *ngIf="role === 'HEAD_COACH' && activeStatus !== 'S1'">
                        <ng-container *ngIf="activeStatus !== 'S3'">
                            <td><input id="singleSelect2" [checked]="singleCheck" [disabled]="rvdata.userStatus ===  'CODING_CHALLENGE_COMPLETED'" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                        </ng-container>
                        <ng-container *ngIf="activeStatus === 'S3'">
                            <td><input id="singleSelect3" [checked]="singleCheck" [disabled]="rvdata.userStatus ===  'CODING_CHALLENGE_STARTED'" type="checkbox" (change)="singleChanged($event,rvdata.userInfoMstrId,rvdata)"> </td>
                        </ng-container>
                    </ng-container>-->

                    <td colspan="2"><span class="candy_name" (click)="showDetail(rvdata)">{{rvdata.fullName}}</span>
                        <h2 class="td-email">{{rvdata.email}}</h2>
                    </td>
                    <td colspan="1">{{rvdata.location}}</td>
                    <td colspan="2">{{rvdata.jobName}}</td>
                    <!--ONBOARD COLS-->
                    <ng-container *ngIf="activeStatus === 'S1'">
                        <td colspan="1">{{rvdata.expLevel}}</td>
                        <td colspan="1">{{rvdata.addedOn}}</td>
                        <td colspan="1" *ngIf="activeStatus === 'S1' &&  role !== 'COACH'">
                            <div>
                                <button *ngIf=" isRow == i" class="invite-btn btn btn-primary" (click)="selectedCandidate(rvdata.userInfoMstrId,'select')">Invite Playground</button>
                            </div>
                        </td>
                    </ng-container>
                    <!--PRIMARY COLS-->
                    <ng-container *ngIf="activeStatus === 'S2'">
                        <td colspan="1">
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'METTL_INITIATED' ">
                                <i class="material-icons mettlInit">send</i>
                                <h2 class="mettlInitSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus ===  'METTL_IN_PROGRESS'">
                                <i class="material-icons mettlInprogres">access_time</i>

                                <h2 class="mettlInprogresSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'METTL_FAILED' ">
                                <i class="material-icons mettlrejected">highlight_off</i>
                                <h2 class="mettlrejectedSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container hide" *ngIf="rvdata.userStatus === 'METTL_CLEARED' ">
                                <i class="material-icons mettlClear">highlight_off</i>

                                <h2 class="mettlClearSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus ===  'METTL_REVIEW' ">
                                <i class="material-icons mettlReveiw">pause_circle_outline</i>
                                <h2 class="mettlReveiwSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>

                        </td>

                        <td colspan="1">{{rvdata.marks}}</td>
                        <td colspan="1" *ngIf="role !== 'TA' && role !== 'COACH'">
                            <div *ngIf="rvdata.userStatus === 'METTL_REVIEW' ">
                                <button *ngIf=" isRow == i" class="approveBtn" (click)="primaryChange(rvdata.userInfoMstrId,'METTL_CLEARED',true,'approve')"><i class="material-icons icon-btn">check</i>
                      Approve</button>
                                <button *ngIf=" isRow == i" class="rejectBtn" (click)="primaryChange(rvdata.userInfoMstrId,'METTL_FAILED',true,'reject')"><i class="material-icons icon-btn">clear</i>
                      Reject</button>
                            </div>
                            <!-- <div *ngIf="rvdata.userStatus === 'METTL_INITIATED'" >
                    <button *ngIf=" isRow == i" class="invite-btn btn btn-primary">Initiate Challenge</button>
                  </div>-->
                        </td>

                    </ng-container>
                    <!--CODING COLS-->
                    <ng-container *ngIf="activeStatus === 'S3'">
                        <td colspan="1">{{rvdata.assessment}}
                            <div  matTooltip="Change Assessment" *ngIf="role !== 'TA' &&  role !== 'COACH' && isRow === i && (rvdata.userStatus === 'METTL_CLEARED' ||  rvdata.userStatus === 'CODING_CHALLENGE_READY')" class="editDiv" (click)="edit('assessment',rvdata)">
                                <i class="material-icons editIcon">edit</i>
                            </div>
                        </td>
                        <td colspan="1">{{rvdata.coach}}
                            <div matTooltip="Change Coach" *ngIf="role !== 'TA' &&  role !== 'COACH' && isRow === i && (rvdata.userStatus === 'METTL_CLEARED' ||  rvdata.userStatus === 'CODING_CHALLENGE_READY')" class="editDiv" (click)="edit('coach',rvdata)">
                                <i class="material-icons editIcon">edit</i>
                            </div>
                        </td>
                        <td colspan="1">
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'METTL_CLEARED' ||  rvdata.userStatus === 'CODING_CHALLENGE_READY' ">
                                <i class="material-icons mettlInit">send</i>
                                <h2 class="mettlInitSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus ===  'CODING_CHALLENGE_INITIATED'|| rvdata.userStatus ===  'CODING_CHALLENGE_STARTED'">
                                <i class="material-icons mettlInprogres">access_time</i>

                                <h2 class="mettlInprogresSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'CODING_CHALLENGE_REJECTED' ">
                                <i class="material-icons mettlrejected">highlight_off</i>
                                <h2 class="mettlrejectedSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container hide" *ngIf="rvdata.userStatus === 'METTL_CLEARED' ">
                                <i class="material-icons mettlClear">highlight_off</i>

                                <h2 class="mettlClearSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus ===  'CODING_CHALLENGE_COMPLETED' ">
                                <i class="material-icons mettlReveiw">pause_circle_outline</i>
                                <h2 class="mettlReveiwSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>

                        </td>

                        <td colspan="2" *ngIf="role !== 'TA'">
                            <div *ngIf="rvdata.userStatus === 'CODING_CHALLENGE_COMPLETED' ">
                                <button *ngIf=" isRow == i" class="approveBtn" (click)="feedBack(rvdata.userInfoMstrId,'CODING_CHALLENGE_CLEARED',true,'approve',rvdata.adId)"><i class="material-icons icon-btn">check</i>
                      Approve</button>
                                <button *ngIf=" isRow == i" class="rejectBtn" (click)="feedBack(rvdata.userInfoMstrId,'CODING_CHALLENGE_REJECTED',true,'reject',rvdata.adId)"><i class="material-icons icon-btn">clear</i>
                      Reject</button>
                            </div>
                            <div *ngIf="(rvdata.userStatus === 'METTL_CLEARED' ||  rvdata.userStatus === 'CODING_CHALLENGE_READY') && (role !== 'COACH')">
                                <button *ngIf=" isRow == i" class="invite-btn btn btn-primary" (click)="InitiateCC(rvdata.userInfoMstrId,'CODING_CHALLENGE_INITIATED',rvdata.adId)">Initiate Challenge</button>
                            </div>
                          <div *ngIf="(rvdata.userStatus === 'CODING_CHALLENGE_STARTED') && (role !== 'COACH')">
                                <button *ngIf=" isRow == i" class="invite-btn btn btn-primary" (click)="terminateWorkSpace(rvdata.userInfoMstrId,rvdata.adId)">Terminate Workspace</button>
                            </div>
                        </td>

                    </ng-container>
                    <!--WHITEBOARD COLS-->
                    <ng-container *ngIf="activeStatus === 'S4'">

                        <td colspan="1">{{rvdata.coach}}
                            <div matTooltip="Change Coach" *ngIf=" role !== 'TA' && role !== 'COACH' && isRow === i && (rvdata.userStatus === 'WHITEBOARD_READY' || rvdata.userStatus === 'CODING_CHALLENGE_CLEARED' )" class="editDiv" (click)="edit('coach',rvdata)">
                                <i class="material-icons editIcon">edit</i>
                            </div>
                        </td>
                        <td colspan="1">
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'WHITEBOARD_READY' || rvdata.userStatus === 'CODING_CHALLENGE_CLEARED'">
                                <i class="material-icons mettlInprogres">access_time</i>
                                <h2 class="mettlInprogresSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <!-- <div class="sts-container" *ngIf="rvdata.userStatus ===  'WHITEBOARD_INITIATED'">
                    <i class="material-icons mettlReveiw">pause_circle_outline</i>
      
                    <h2 class="mettlReveiwSts">{{statusJson[rvdata.userStatus]}}</h2>
                  </div>-->
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'WHITEBOARD_REJECTED' ">
                                <i class="material-icons mettlrejected">highlight_off</i>
                                <h2 class="mettlrejectedSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>


                        </td>

                        <td colspan="2" *ngIf="role !== 'TA'">
                            <div *ngIf="rvdata.userStatus === 'CODING_CHALLENGE_CLEARED'|| rvdata.userStatus === 'WHITEBOARD_READY'">
                                <button *ngIf=" isRow == i" class="approveBtn" (click)="InitiateWC(rvdata.userInfoMstrId,'WHITEBOARD_CLEARED',true,'approve',rvdata.adId)"><i class="material-icons icon-btn">check</i>
                      Approve</button>
                                <button *ngIf=" isRow == i" class="rejectBtn" (click)="InitiateWC(rvdata.userInfoMstrId,'WHITEBOARD_REJECTED',true,'reject',rvdata.adId)"><i class="material-icons icon-btn">clear</i>
                      Reject</button>
                            </div>
                            <!-- <div *ngIf="rvdata.userStatus === 'CODING_CHALLENGE_CLEARED'|| rvdata.userStatus === 'WHITEBOARD_READY'" >
                    <button *ngIf=" isRow == i" class="invite-btn btn btn-primary" (click)="InitiateWC(rvdata.userInfoMstrId,'WHITEBOARD_INITIATED')">Initiate Challenge</button>
                  </div>-->
                        </td>

                    </ng-container>
                    <!--LEADERSHIP COLS-->
                    <ng-container *ngIf="activeStatus === 'S5'">

                        <td colspan="1">{{rvdata.coach}}
                            <div matTooltip="Change Coach" *ngIf="role !== 'TA' && role !== 'COACH' && isRow === i && (rvdata.userStatus === 'WHITEBOARD_INITIATED' )" class="editDiv hide" (click)="edit('coach')">
                                <i class="material-icons editIcon">edit</i>
                            </div>
                        </td>
                        <td colspan="1">
                            <div class="sts-container hide">
                                <i class="material-icons mettlInit">send</i>
                                <h2 class="mettlInitSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'WHITEBOARD_CLEARED' || rvdata.userStatus === 'LEADERSHIP_CONNECT_READY'">
                                <i class="material-icons mettlInprogres">access_time</i>

                                <h2 class="mettlInprogresSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'LEADERSHIP_CONNECT_REJECTED' ">
                                <i class="material-icons mettlrejected">highlight_off</i>
                                <h2 class="mettlrejectedSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>
                            <div class="sts-container" *ngIf="rvdata.userStatus === 'LEADERSHIP_CONNECT_CLEARED' ">
                                <i class="material-icons mettlClear">check_circle</i>
                                <h2 class="mettlClearSts">{{statusJson[rvdata.userStatus]}}</h2>
                            </div>


                        </td>

                        <td colspan="1" *ngIf="role !== 'TA' && role !== 'COACH'">
                            <div *ngIf="rvdata.userStatus === 'WHITEBOARD_CLEARED' || rvdata.userStatus === 'LEADERSHIP_CONNECT_READY' ">
                                <button *ngIf=" isRow == i" class="approveBtn" (click)="InitiateLC(rvdata.userInfoMstrId,'LEADERSHIP_CONNECT_CLEARED',true,'approve',rvdata.adId)"><i class="material-icons icon-btn">check</i>
                      Approve</button>
                                <button *ngIf=" isRow == i" class="rejectBtn" (click)="InitiateLC(rvdata.userInfoMstrId,'LEADERSHIP_CONNECT_REJECTED',true,'reject',rvdata.adId)"><i class="material-icons icon-btn">clear</i>
                      Reject</button>
                            </div>
                            <div *ngIf="rvdata.userStatus === 'CODING_CHALLENGE_CLEARED'">
                                <button *ngIf=" isRow == i" class="invite-btn btn btn-primary">Initiate Challenge</button>
                            </div>
                        </td>

                    </ng-container>

                </tr>
            </tbody>
            <tbody *ngIf="list.length == 0">
                <tr>
                    <td colspan='9'> No Records Available</td>
                </tr>
            </tbody>
        </table>

    </div>

</div>
