<div class="container">
    <br><br>
    <div class="row pgTitle"> reviewer list</div><br><br>
    <!-- <div>
        <ngx-datatable #myTable class="material expandable" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [reorderable]="'reorderable'" [sorts]="[{prop: 'assessmentCompletedBy', dir: 'asc'}]" [limit]="10" (page)="onPage($event)">
            <ngx-datatable-column [width]="100" [sortable]="true" prop='assessmentCompletedBy' name="Employee Name">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <span class="row">{{getValue(row.assessmentCompletedBy)}}</span>
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [width]="100" [sortable]="true" prop='usecaseTitle' name="Usecase Title">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <span class="row">{{getValue(row.usecaseTitle)}}</span>
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [width]="50" [sortable]="true" prop='assessmentStatus' name="Status">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <span class="row">{{getValue(row.assessmentStatus) | removeUnderscore}}</span>
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [width]="100" [sortable]="true" prop='reviewerName' name="Reviewer Name">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <div *ngIf="row.reviewerDetails; else revStmt">
                        <div *ngFor="let item of row.reviewerDetails; let color=index" class="initialShow">
                            <app-avatar-pic [initials]="getInitials(getValue(item.reviewerName))" [style.backgroundColor]="colors[color]" matTooltip='{{item.reviewerName}} - {{getStatus(item.reviewerStatus)}}' (mouseleave)="matTooltip.hide()"></app-avatar-pic>
                        </div>
                    </div>
                    <ng-template #revStmt>
                        <div class="revStmt">
                            Reviewer Not Assigned
                        </div>
                    </ng-template>
                </ng-template>
                <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)">
                    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                        <div style="float: right; position: absolute; right: 20px;" *ngIf="row.reviewerDetails">
                            <div *ngFor="let item of row.reviewerDetails; let color = index" class="detailedPgm">
                                <app-avatar-pic [initials]="getInitials(getValue(item.reviewerName))" [style.backgroundColor]="colors[color]"></app-avatar-pic><span class="revName"> {{item.reviewerName}} </span> <span class="revName" [ngClass]="getStatus(item.reviewerStatus) === 'Completed' ? 'completed' : 'in-review'"><span class="circle-sm" [ngStyle]="{'background-color':getcolor(getStatus(item.reviewerStatus))}"></span>{{getStatus(item.reviewerStatus)}}</span>
                            </div>
                        </div>
                    </ng-template>
                </ngx-datatable-row-detail>
            </ngx-datatable-column>
            <ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false" [canAutoResize]="false">
                <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
                    <div *ngIf="row.reviewerDetails" class="tglArrow">
                        <a href="javascript:void(0)" [class.datatable-icon-right]="!expanded" [class.datatable-icon-down]="expanded" title="Expand/Collapse Row" (click)="toggleExpandRow(row)">
                        </a>
                    </div>
                </ng-template>
            </ngx-datatable-column>
        </ngx-datatable>

        <br/>
        <br/>
    </div> -->
    <div class="row">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th colspan="2" (click)="sortFn('rvdata.assessmentCompletedBy')">Employee Name</th>
                    <th colspan="2" (click)="sortFn('rvdata.usecaseTitle')">Usecase Title</th>
                    <th (click)="sortFn('rvdata.coursassessmentStatuseCount')">Status</th>
                    <th colspan="2" (click)="sortFn('rvdata.primaryAssessCount')">Reviewers</th>
                    <th>&nbsp; &nbsp;</th>
                </tr>
            </thead>
            <tbody *ngIf="rows">
                <tr *ngFor="let rvdata of pagedItems; let i=index" [class.active]="i == rowIndex">
                    <td colspan="2">{{rvdata.assessmentCompletedBy}}</td>
                    <td colspan="2">{{rvdata.usecaseTitle}}</td>
                    <td>{{rvdata.assessmentStatus | removeUnderscore}}</td>
                    <td colspan="2">
                        <div *ngIf="rvdata.reviewerDetails; else revStmt">
                            <div *ngIf="!((i === rowIndex) && showFNm)" class="prev-didv">
                                <div *ngFor="let rvr of rvdata.reviewerDetails; let color = index" class="revr-icon">
                                    <app-avatar-pic [initials]="getInitials(getValue(rvr.reviewerName))" [style.backgroundColor]="colors[color]" matTooltip='{{rvr.reviewerName}} - {{getStatus(rvr.reviewerStatus)}}'></app-avatar-pic>
                                </div>
                            </div>
                            <div *ngIf="((i === rowIndex) && showFNm)">
                                <table>
                                    <tr *ngFor="let rvr of rvdata.reviewerDetails; let color = index" class="rest-icon">
                                        <td style="min-width: 200px;">
                                            <app-avatar-pic [initials]="getInitials(getValue(rvr.reviewerName))" [style.backgroundColor]="colors[color]"></app-avatar-pic>
                                            <span class="revName"> {{rvr.reviewerName}} </span>
                                        </td>
                                        <td>
                                            <span class="" [ngClass]="getStatus(rvr.reviewerStatus) === 'Completed' ? 'completed' : 'in-review'">
                                            <span class="circle-sm" [ngStyle]="{'background-color':getcolor(getStatus(rvr.reviewerStatus))}"></span> {{getStatus(rvr.reviewerStatus)}}
                                            </span>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                        </div>
                        <ng-template #revStmt>
                            <div class="revStmt">
                                Reviewer Not Assigned
                            </div>
                        </ng-template>
                    </td>
                    <td>
                        <span class="pull-right iconDiv" (click)="toggleRvRow(i)" *ngIf="rvdata.reviewerDetails">
                        <mat-icon  *ngIf="!((i === rowIndex) && showFNm)">
                            expand_more
                        </mat-icon>
                        <mat-icon *ngIf="((i === rowIndex) && showFNm)">
                                expand_less
                            </mat-icon>
                        </span>
                    </td>
                </tr>
            </tbody>
            <tbody *ngIf="!rows">
                <tr>
                    <td colspan=7> No Records Available</td>
                </tr>
            </tbody>
        </table>
        <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
            <li><span>{{pager.startIndex+1}} - {{pager.endIndex+1}} of {{pager.totalItems}}</span></li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(1)">First</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(pager.currentPage - 1)"><img src="{{usr_img_path + 'prev.png'}}"></a>
            </li>
            <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                <a (click)="setPage(page)">{{page}}</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.currentPage + 1)"><img src="{{usr_img_path + 'next.png'}}"></a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.totalPages)">Last</a>
            </li>
        </ul>
    </div>
</div>