<div class="container-fluid ">
    <div class="col-md-12 col-lg-12 padd_0">
        <div class="col-xs-12 col-md-12 padd_0">
            <div class="block hide">
                <ul class="filters">
                    <li (click)="onboard()" class="filter" data-toggle="tab">
                        <button [disabled]="filterBtnStatus" [class.active]="selected == 'onboard'">Onboard</button>
                    </li>
                    <li (click)="level1()" class="filter " data-toggle="tab">
                        <button [disabled]="filterBtnStatus" [class.active]="selected == 'primary'">Primary Skill</button>
                    </li>
                    <li (click)="level2()" class="filter techbtn" data-toggle="tab">
                        <button [disabled]="filterBtnStatus" [class.active]="selected == 'technical'">Technical Usecase</button>
                    </li>
                    <li (click)="level3()" class="filter" data-toggle="tab">
                        <button [disabled]="filterBtnStatus" [class.active]="selected == 'business'">Business Usecase</button>
                    </li>
                </ul>
            </div>
            <div class="col-xs-2">
                <div *ngIf="filterBtn" class="filter-cricle" (click)="filterEnb()">
                    <i class="material-icons filter-icon">filter_list</i>
                </div>
                <h2 class="filter-title">Filters</h2>
            </div>
            <div class="col-xs-8">
                <div *ngIf="getRole() !== 'COACH' && filterBtnStatus" class="status_list ">
                    <ul>
                        <li [class.active]="filterActive == 'S1'">
                            <a (click)="step1()">ONBOARDED</a>
                        </li>

                        <li [class.active]="filterActive == 'S2'">
                            <a (click)="step2()">PRIMARY CHALLENGE</a>
                        </li>

                        <li [class.active]="filterActive == 'S3'">
                            <a (click)="step3()">CODING CHALLENGE</a>
                        </li>

                        <li [class.active]="filterActive == 'S4'">
                            <a (click)="step4()">WHITEBOARD DISCUSSION</a>
                        </li>
                        <li [class.active]="filterActive == 'S5'">
                            <a (click)="step5()">LEADERSHIP CONNECT</a>
                        </li>
                    </ul>
                </div>
                <div *ngIf="getRole() === 'COACH' && filterBtnStatus" class="status_list ">
                    <ul>



                        <li [class.active]="filterActive == 'S3'">
                            <a (click)="step3()">CODING CHALLENGE</a>
                        </li>

                        <li [class.active]="filterActive == 'S4'">
                            <a (click)="step4()">WHITEBOARD DISCUSSION</a>
                        </li>


                    </ul>
                </div>
            </div>
            <div class="col-xs-2"></div>

        </div>



        <div class="col-md-12 cardsContainer" *ngIf="isLoader">

            <div class="col-md-3 col-lg-2 filterDiv" *ngIf="!filterBtn">
                <div class="nav-side-menu ">
                    <div class="filter_title _block">
                        <div class="filter-cricle1" (click)="filterEnb()">
                            <img src="{{imageUrl}}/assets/img/Taflow/ic_clear.png">
                        </div>
                        <h4>Filter By</h4>
                        <figure>
                            <img class="filter_icon hide" (click)="resetFilters()" src="{{img_path + 'refresh-simple-line-icons.png'}}" />
                        </figure>
                    </div>
                    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
                    <div class="menu-list">
                        <ul id="menu-content" class="menu-content collapse out  ">

                            <li *ngIf="expLevels.length != 0" data-toggle="collapse" data-target="#level" class="_block _border collapsed ">
                                <a> LEVEL
                  <span class="arrow"></span>
                </a>
                            </li>
                            <ul *ngIf="expLevels.length != 0" class="sub-menu collapse" id="level">
                                <li *ngFor="let level of expLevels">
                                    <div *ngIf="level.experienceLevel != null" class="check-btn">
                                        <input type="checkbox" [checked]="levelFilters.includes(level.experienceLevel)" name="checkgroup" (click)="levelFilter(level.experienceLevel)">
                                    </div>
                                    <a *ngIf="level.experienceLevel != null">{{level.experienceLevel}}
                  </a>
                                </li>
                            </ul>

                            <li *ngIf="locations.length != 0" data-toggle="collapse" data-target="#location" class="_block _border  collapsed ">
                                <a> LOCATION
                  <span class="arrow"></span>
                </a>
                            </li>
                            <ul *ngIf="locations.length != 0" class="sub-menu collapse" id="location">
                                <li *ngFor="let _city of locations">
                                    <div *ngIf="_city.city != null" class="check-btn">
                                        <input type="checkbox" [checked]="locationFilters.includes(_city.city)" name="checkgroup" (click)="searchCity(_city.city)">
                                    </div>
                                    <a *ngIf="_city.city != null">{{_city.city}}
                  </a>
                                </li>
                            </ul>
                            <!--<li data-toggle="collapse" data-target="#skill" class="_block _border collapsed ">-->
                            <!--<a> SKILLS-->
                            <!--<span class="arrow"></span>-->
                            <!--</a>-->
                            <!--</li>-->
                            <!--<ul class="sub-menu collapse" id="skill">-->
                            <!--<li *ngFor="let skill of skills">-->
                            <!--<div *ngIf="skill != null" class="check-btn">-->
                            <!--<input type="checkbox" [checked]="skillFilters.includes(skill)" name="checkgroup" (click)="skillFilter(skill)">-->
                            <!--</div>-->
                            <!--<a *ngIf="skill != null">{{skill}}-->
                            <!--</a>-->
                            <!--</li>-->
                            <!--</ul>-->
                            <li data-toggle="collapse" data-target="#jtitle" class="_block _border collapsed ">
                                <a> JOB REQUIREMENT
                  <span class="arrow"></span>
                </a>
                            </li>
                            <ul class="sub-menu collapse" id="jtitle">
                                <li *ngFor="let job of jobAssessments">
                                    <div *ngIf="job.jobTitle != null" class="check-btn">
                                        <input type="checkbox" [checked]="jobFilters.includes(job.jobTitle)" name="checkgroup" (click)="jobTitleFilter(job.jobTitle)">
                                    </div>
                                    <a *ngIf="job.jobTitle != null">{{job.jobTitle}}
                  </a>
                                </li>
                            </ul>
                        </ul>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-5">
                    <my-date-range-picker name="mydaterange" [options]="myDateRangePickerOptions" [(ngModel)]="model" (dateRangeChanged)="getDateFormat($event)" required></my-date-range-picker>
                </div>
                <div class="col-xs-3">
                    <div class="searchIcon">
                        <input type="search" [(ngModel)]="userFilter.fullName" placeholder="Search by Candidates Name/Email/Job Name" #searchword (input)="insearch(searchword)" />
                    </div>
                </div>
            </div>


            <app-candidate-table [list]="candidateList" (approve)="selectCandidate($event)" (onSelectCandidate)="onCheckCandidate($event)" (onSelectCoach)="onSelectCoach($event)" (onPrimaryChange)="primaryChange($event)" (onCodingChange)="codingChange($event)" (onfeedBackCC)="onfeedBackCC($event)"
                (onWhiteboardChange)="whiteboardChange($event)" (onfeedBackWC)="onfeedBackCC($event)" (onleaderboardChange)="leaderboardChange($event)" [activeStatus]="filterActive" [empData]="empData" (selectedEmpForDet)="showCanDetPage($event)" [role]="getRole()"></app-candidate-table>


            <ul *ngIf="pager.pages" 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 class="dropup btn-text addProfile_btn hide">
                <img src="{{img_path + 'add.png'}}" class="dropdown-toggle" id="taPlusImg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <ul class="dropdown-menu" aria-labelledby="taPlusImg">
                    <li class="taUplBtn" [routerLink]="['/ta', 'addCandidate']">Add Candidate</li>
                    <li class="taUplBtn hide" [routerLink]="['/ta', 'taBulkUpload']" (click)="BUPage()">Bulk Upload</li>
                </ul>
            </div>
        </div>

        <div *ngIf="!isLoader" class="loader loader-default is-active" data-text="waiting for a few sec..."></div>

        <div class="cand-tab-last-info" *ngIf="footerShow">
            <span class="clrTxt" (click)="clear()">CLEAR</span>
            <span *ngIf="filterActive == 'S1'">
        <span class=""><button class="btn btn-lg btn-blue" (click)="footerSubmit()">initiate playground</button></span>
            </span>
            <span *ngIf="filterActive == 'S2'">
        <span class=""><button class="btn btn-lg btn-red" (click)="footerSubmitPC('METTL_FAILED')">REJECT </button></span>

            <span class=""><button class="btn btn-lg btn-green" (click)="footerSubmitPC('METTL_CLEARED')">APPROVE</button></span>
            </span>
            <span *ngIf="filterActive == 'S3'">
        <span class=""><button class="btn btn-lg btn-white" (click)="footerSubmitCC('assessment')">CHANGE ASSESSMENT  </button></span>

            <span class=""><button class="btn btn-lg btn-white" (click)="footerSubmitCC('coach')">CHANGE COACH</button></span>
            <span class=""><button class="btn btn-lg btn-blue hide" (click)="footerSubmitCC('initiate')">INITIATE CHALLENGE</button></span>

            </span>
            <span *ngIf="filterActive == 'S4'">
        <span class=""><button class="btn btn-lg btn-red" (click)="footerSubmitWC('WHITEBOARD_REJECTED')"> REJECT </button></span>

            <span class=""><button class="btn btn-lg btn-green" (click)="footerSubmitWC('WHITEBOARD_CLEARED')">APPROVE</button></span>

            </span>
            <span *ngIf="filterActive == 'S5'">
        <span class=""><button class="btn btn-lg btn-red" (click)="footerSubmitLC('LEADERSHIP_CONNECT_REJECTED')">  REJECT</button></span>

            <span class=""><button class="btn btn-lg btn-green" (click)="footerSubmitLC('LEADERSHIP_CONNECT_CLEARED')"> APPROVE</button></span>

            </span>

        </div>
    </div>

</div>
<app-ta-modal-select-reject></app-ta-modal-select-reject>

<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#assignModal"></button>

<div id="assignModal" class="ta-modal modal fade skill-modal" role="dialog">
    <div class="modal-dialog admin-modal-dialog">
        <div class="ta-modal-content">
            <div *ngIf="!FBmodal" class="row">
                <div class="col-lg-6 left-side">
                    <div class="row text1">
                        <h2>
                            SELECTED CANDIDATE(S)
                        </h2>
                    </div>
                    <div class="" *ngFor="let emp of empList">
                        <div class="searchEmp">
                            <div class="row empContainerDiv">
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="col-lg-2">
                                            <a class="IMG">
                        {{ Initials(emp.fullName) }}
                      </a>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="employeeDtls">
                                                <h4 class="empName">
                                                    {{emp.fullName}}
                                                </h4>
                                                <h5 *ngIf="selectModalValue === 'coach'" class="empAdId">
                                                    Coach : {{emp.coach}}
                                                </h5>
                                                <h5 *ngIf="selectModalValue === 'assessment'" class="empAdId">
                                                    Assessment : {{emp.assessment}}
                                                </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 right-side">
                    <div class="row">
                        <i class="material-icons icon-close" (click)="closeModal()" id="closeAssignCoachModal" data-dismiss="modal">highlight_off</i>
                    </div>
                    <div *ngIf="selectModalValue === 'coach'">
                        <div class="text1">
                            <h2>Would you like to change the coach?</h2>
                        </div>
                        <div class="text2">
                            <h2>Select from the below list of coaches to change</h2>
                        </div>
                        <div class="row">
                            <mat-select class="ta-select-box" placeholder="Select coach" #coach (change)="selectedCoach(coach.value)">
                                <mat-option *ngFor="let coach of coaches" [value]="coach.userInfoMstrId">
                                    {{coach.fullName}}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="row btnDiv">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-2">
                                <span class="cancelBtn" (click)="closeModal()">CANCEL</span>

                            </div>
                            <div class="col-lg-4">
                                <span class=""><button class="btn btn-lg changeBtn" (click)="submitCoachUpdate()">CHANGE</button></span>
                            </div>
                            <div class="col-lg-2"></div>

                        </div>

                    </div>
                    <div *ngIf="selectModalValue === 'assessment'">
                        <div class="text1">
                            <h2>Would you like to change the Assessment?</h2>
                        </div>
                        <div class="text2">
                            <h2>Select from the below list of assessments to change</h2>
                        </div>
                        <div class="row">
                            <mat-select class="ta-select-box" placeholder="Select assessment" #assessment (change)="selectedAssess(assessment.value)">
                                <mat-option *ngFor="let assess of assessments" [value]="assess.id">
                                    {{assess.usecaseTitle}}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="row btnDiv">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-2">
                                <span class="cancelBtn" (click)="closeModal()">CANCEL</span>

                            </div>
                            <div class="col-lg-4">
                                <span class=""><button class="btn btn-lg changeBtn" (click)="submitAssessmentUpdate()">CHANGE</button></span>
                            </div>
                            <div class="col-lg-2"></div>

                        </div>
                    </div>
                </div>
            </div>
            <div *ngIf="FBmodal" class="row feeback-container">
                <div class="row">
                    <i class="material-icons icon-close1" (click)="closeModal()" id="closeAssignCoachModal" data-dismiss="modal">highlight_off</i>
                </div>
                <h2 class="feedback-heading">
                    Would you like to {{modalData}} this candidate to next stage?
                </h2>
                <div>
                    <input type="text" class="feedback-text" #feedbacktext>
                </div>
                <div class="row btnDiv">
                    <div class="col-lg-2"></div>
                    <div class="col-lg-2">
                        <span class="cancelBtn" (click)="closeModal()">CANCEL</span>

                    </div>
                    <div class="col-lg-4" *ngIf="modalData === 'approve'">
                        <span class=""><button class="btn btn-lg btn-green" (click)="feedbackSubmit(feedbacktext.value)">APPROVE</button></span>
                    </div>
                    <div class="col-lg-4" *ngIf="modalData === 'reject'">
                        <span class=""><button class="btn btn-lg btn-red" (click)="feedbackSubmit(feedbacktext.value)">REJECT</button></span>
                    </div>
                    <div class="col-lg-2"></div>

                </div>
            </div>
        </div>
    </div>
</div>