<div class="container-fuild">
    <div class="row">
        <div class="col-lg-3 right_block">

            <h3 class="empName">Employees</h3>

            <div class="EmployeeSearchIcon">
                <input type="search" #empSrc (keyup)="keySearch(empSrc.value)" class="" placeholder="Search by Id or Name">
            </div>

            <div class="checkBoxEmp" [hidden]=" empLists.length === 0">

                <mat-card class="searchEmp" *ngFor="let candidate of empLists">
                    <div class="searchEmp">
                        <div class="row">
                            <div class="col-lg-10">
                                <app-pgm-candidate-info [fullName]="candidate.userInfoMstr.fullName" [experienceLevel]="candidate.experienceLevel" [jobId]="candidate.jobId"> </app-pgm-candidate-info>
                                <app-skills [skills]="candidate.userInfoMstr.pgUserSkillMapping"></app-skills>
                            </div>
                            <div class="col-lg-2">
                                <input type="checkbox" name="radiogroup" #empSelect [value]="candidate.userInfoMstr.userInfoMstrId" (change)="onSelectionChange(candidate,$event,empSelect.value)">
                            </div>
                        </div>
                    </div>
                </mat-card>
            </div>

        </div>
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-3">
                    <select class="dropdowns" id="f" [(ngModel)]="PrimarySkill" (change)="onchangeSkillMstr(PrimarySkill)" #skillMstr>
            <option selected="selected">Select</option>
            <option *ngFor="let _skill of Skills" [value]="_skill.skillTrackMstrId">{{ _skill.skillTrackName }}</option>
          </select>
                </div>
                <div class="col-lg-9">
                    <div class="skillDtlsDiv">

                        <div class="ParentDiv " *ngFor="let skill of selectedSkillDtls">
                            <div>
                                <div class="ChildDiv">
                                    <span>
                  <span class="dtlsSkill"> {{skill.skillTrackDtlsName}} </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row assessmentList" *ngIf="statusOf">
                <div class="col-lg-3">
                    <div class="row capability-categories">
                        <div class="assessmentCard" *ngFor="let area of assessment; let catIndex = index;" (click)="selectAssessment(catIndex,area.name)">
                            <mat-card>

                                <div class="col-md-10 tile-title">{{area.name}}</div>
                                <div *ngIf="area.selected" class="col-md-1 tile-selected-container"><img src="{{checkImg}}" alt=""></div>
                                <div class="col-md-1"></div>

                            </mat-card>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <ng-container *ngIf="selectedTest == assessment[0].name">
                        <mat-card style="height: 450px;">
                            <div class="row skillDetailsDiv">
                                <mat-select class="skills" placeholder="Select Assessment" (change)="onSkillMaster($event, skillTrackName.value)" #skillTrackName ngDefaultControl>
                                    <!-- [(value)]="skillmaster_selected" -->
                                    <mat-option *ngFor="let sdata of assessments" [value]="sdata" name="first">
                                        <span class="pull-left">{{ sdata.assessmentDesc }} </span>
                                    </mat-option>
                                </mat-select>
                            </div>

                            <div class="row skillDetailsDiv" *ngIf="selectedSkillValues !== undefined">
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6 secnd">
                                    <span class="secondarySkill">Secondary Skills :</span>
                                    <div *ngFor="let sdata of assessments">

                                        <div *ngIf="selectedSkillValues == sdata.assessmentId">

                                            <div class="ParentDiv" *ngFor="let ck of sdata.pgAssessmentSkillMapping">
                                                <div class="ChildDiv">
                                                    <span>
                  <span class="skillDtlsName"> {{ck.pgSkillTrackDtls.skillTrackDtlsName}} </span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3"></div>

                            </div>
                            <div class="row skillDetailsDiv" *ngIf="selectedSkillValues !== undefined">
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6 secnd">
                                    <div class="secondarySkill">Assessment Description :</div><br>
                                    <div class="assessmentDescDiv">
                                        <div class="assessmentDesc">{{selectedAssessment.assessmentDesc}}</div>
                                    </div>
                                </div>
                                <div class="col-lg-3"></div>

                            </div>
                        </mat-card>
                    </ng-container>
                    <ng-container *ngIf="selectedTest == assessment[1].name">
                        <mat-card style="height: 450px;">
                            <div class="row hide">
                                <input type="text" [(ngModel)]="useCaseFilter.usecaseTitle" class="form-control searchUsecase" placeholder="Search usecase" />
                            </div>
                            <div class="techUsecase">
                                <app-usecase-detail *ngFor="let details of technicalDesc | filterBy: useCaseFilter; let rowCount = index;" [useCase]="'technical'" [role]="true" [selected]='rowCount' [ucDescp]="details" (ucSelectEvent)=selectUsecase($event)></app-usecase-detail>
                            </div>
                            <div class="row">
                                <h2 *ngIf="techMore" class="usecaseMore" (click)="changeUC('tech')">
                                    Change Technical Usecase
                                </h2>
                            </div>
                        </mat-card>
                    </ng-container>
                    <ng-container *ngIf="selectedTest == assessment[2].name">
                        <mat-card style="height: 450px;">
                            <div class="row hide">
                                <input type="text" [(ngModel)]="useCaseFilter.usecaseTitle" class="form-control searchUsecase" placeholder="Search usecase" />
                            </div>
                            <div class="techUsecase">
                                <app-usecase-detail *ngFor="let details of bussniessDesc | filterBy: useCaseFilter; let rowCount = index;" [useCase]="'bussiness'" [role]="true" [selected]='rowCount' [ucDescp]="details" (ucSelectEvent)=selectUsecase($event)></app-usecase-detail>
                            </div>
                            <div class="row">
                                <h2 *ngIf="bussMore" class="usecaseMore" (click)="changeUC('buss')">
                                    Change Bussiness Usecase
                                </h2>
                            </div>
                        </mat-card>
                    </ng-container>
                    <ng-container *ngIf="selectedTest == ''">
                        <mat-card style="height: 450px;"></mat-card>
                    </ng-container>

                    <div class="row">
                        <div class="col-lg-8"></div>
                        <div class="col-lg-4">
                            <div class="row buttonDiv">
                                <button class="cancelBtn btn btn-danger" (click)="cancel()">Cancel</button>
                                <button class="doneBtn btn btn-primary" (click)="onSubmit()">Done</button>
                                <!--<button class="doneBtn btn btn-primary" (click)="done()">Done</button>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div *ngIf="!statusOf">
                <div class="row ">
                    <div class="">
                        <mat-card class="compleAssessment">
                            <div class="row">
                                <div class="col-lg-4">
                                    <mat-card class="compleAssessmentInside">
                                        <div>
                                            <h2>Primary Skill Assessment</h2>
                                            <img *ngIf="assessment[0].selected" src="{{checkImg}}" alt="">
                                        </div>
                                    </mat-card>
                                </div>
                                <div class="col-lg-4">
                                    <mat-card class="compleAssessmentInside">
                                        <div>
                                            <h2>Technical UseCase </h2>

                                            <img *ngIf="assessment[1].selected" src="{{checkImg}}" alt="">
                                        </div>

                                    </mat-card>
                                </div>
                                <div class="col-lg-4">
                                    <mat-card class="compleAssessmentInside">
                                        <div>
                                            <h2>Business UseCase</h2>
                                            <img *ngIf="assessment[2].selected" src="{{checkImg}}" alt="">
                                        </div>
                                    </mat-card>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-4"></div>
                                <div class="col-lg-4">
                                    <div class="datePickerDiv">
                                        <my-date-picker [placeholder]="placeholder" [(ngModel)]="model" name="mydaterange" [options]="myDateRangePickerOptions" (dateChanged)="onDateChanged($event)" required></my-date-picker>
                                        <h2 *ngIf="selectCoach.length == 0" class="assignCoachText" (click)="assignBtnClick()">
                                            Assign Coach
                                        </h2>

                                        <div *ngIf="selectCoach.length !== 0">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <a class="IMG">

                       {{ Intials(selectCoach[0].userInfoMstr.fullName) }}

                     </a>

                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="selectedCoachDetails">

                                                        <h2>
                                                            Assigned Coach
                                                        </h2>
                                                        <h4>
                                                            {{selectCoach[0].userInfoMstr.fullName}}
                                                        </h4>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <h2 class="assignCoachText" (click)="assignBtnClick()">
                                                        Change
                                                    </h2>
                                                </div>

                                            </div>
                                        </div>

                                    </div>


                                </div>
                                <div class="col-lg-4"></div>
                            </div>

                        </mat-card>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8"></div>
                    <div class="col-lg-4">
                        <div class="row buttonDiv">
                            <button class="cancelBtn btn btn-danger" (click)="cancelFirst()">Cancel</button>
                            <button class="doneBtn btn btn-primary" (click)="onSubmit()">Done</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

</div>

<!--  Model Assign coach modal  -->
<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#assignModal"></button>
<div id="assignModal" class="modal fade skill-modal" role="dialog">
    <div class="modal-dialog admin-modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <div class="row rowCls">
                    <div class="col-lg-6">
                        <h4 class="modal-title">Employee</h4>
                    </div>

                    <div class="col-lg-6">
                        <h4 class="modal-title">Assign Coach</h4>

                        <a (click)="closeModal()">
                            <button type="button" id="closeAssignCoachModal" class="close" data-dismiss="modal">&times;</button>
                        </a>
                    </div>


                </div>
                <!--<button type="button" id="" class="close" data-dismiss="modal">&times;</button>-->
            </div>

            <div class="row rowCls">
                <div class="col-lg-6 splitLine">
                    <div class="modal-title" *ngFor="let course of selectedEmployeeDetails">

                        <div *ngIf="course">
                            <app-candidate-info [fullName]="course.userInfoMstr.fullName" [experienceLevel]="course.experienceLevel" [jobId]="course.jobId"> </app-candidate-info>
                            <app-skills [skills]="course.userInfoMstr.pgUserSkillMapping"></app-skills>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6" *ngIf="true">
                    <div class="modal-title">

                        <div class="rightDiv" *ngIf="coaches.length !== 0; else noCoach">

                            <div class="coachCard" *ngFor="let coach of coaches; let idx = index">

                                <!-- <a class="IMG">

                   {{ Intials(coach.userInfoMstr.fullName) }}

                 </a>
                 <div class="candidate">

                   <h4 >
                     {{coach.userInfoMstr.fullName}}
                   </h4>

                   <h5 >
                     <span>{{coach.userInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.pgSkillTrackMstr.description}}</span> &nbsp;  <span class="exp_level"></span>
                   </h5>


                 </div>-->
                                <div class="cdt_top_cards">
                                    <app-assign-coach-details fullName={{coach.userInfoMstr.fullName}} position={{coach.jobId}} role="UI Developer"></app-assign-coach-details>


                                    <input class="radioBtn" type="radio" name="radiogroup" #coachSelected (change)="onSelectCoach(coach,coach.userInfoMstr.userInfoMstrId)">
                                </div>
                            </div>

                        </div>
                        <ng-template #noCoach>
                            <div class="col-sm-12 col-md-6 col-lg-6 modal_right_block">

                                <h3 class="noCoach">No Coach Available</h3>

                            </div>
                        </ng-template>
                        <!-- <div *ngIf="coaches.length !== 0" class="confirmCoach" (click)="submitCoachtoCandidateAssignment(selectedEntry.userInfoMstr.userInfoMstrId, candidateInfo.userInfoMstr.userInfoMstrId, candidateInfo.adId)"></div> -->

                    </div>


                    <div class="row">

                        <div class="rectBox" (click)="scheduleAssignCoach()">

                            <img class="checkIcon" src="https://pgassets.altimetrik.com/assets/img/pgflow/Check_icon.png">

                        </div>
                    </div>

                </div>


                <!--<button (click)="clickExpend()">Assign coach is UI works!</button>-->
            </div>

        </div>

    </div>
</div>