
<div class="container col-sm-12 col-md-12 col-lg-12 ">

  <div class="row">

    <header *ngIf="modal === ''" (mouseleave)="leaveLogout($event)" style="padding: 5px 0;">
      <div>
        <div class="col-sm-1 col-md-1 col-lg-1 togelBlock">
          <a (click)="gocfLanding()"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
        </div>
        <div class="col-sm-10 col-md-10 col-lg-10 heading" >

          <span class="heading_text"> Candidate's Details</span>

        </div>
        <div class="col-sm-1 col-md-1 col-lg-1">
          <figure (mouseover)="callMe()"><a class="profileIcon">{{ Initials(fullName) }}</a></figure>
          <p class="logout" *ngIf="userIcon == 'logout'" (click)="logout()" class=" ">Logout</p>
        </div>
      </div>
    </header>


    <div class='loading' *ngIf="!CandidateData">
      <img  width="20%" src='{{imageUrl}}/assets/img/Blocks.gif'  />
    </div>
    <section class="Section col-sm-12 col-md-12 col-lg-12" *ngIf="CandidateData">

      <div class="col-sm-12 col-md-12 col-lg-12 modal_coach" *ngIf="modal === 'showModal'">

        <div class="col-sm-4 col-md-4 col-lg-4"></div>
        <div class="col-sm-8 col-md-8 col-lg-8 modalWindow">

          <div class="col-sm-12 col-md-12 col-lg-12 modalHead">

            <span class="title"><img src="{{imageUrl}}/assets/img/pgflow/coach_icon@2xcopy.png"/> Assign Coach - {{testStatus}} Usecase</span>
            <span class="closeModal" (click)="closeModal(modal)"><img src="{{imageUrl}}/assets/img/pgflow/exit_icon.png"/></span>
          </div>

          <div class="col-sm-12 col-md-12 col-lg-12 modalBody" >

            <div class="col-sm-12 col-md-6 col-lg-6 modal_left_block">

              <div class="col-sm-12 col-md-12 col-lg-12 candidate_info">
                <div class="cdt_top_card">
                  <div class="initials">
                    <a  class="IMG">
                      {{ Initials(coachData.userInfoMstr.fullName)}}
                    </a>
                  </div>
                  <div class="col-sm-12 col-md-12 col-lg-12 candidate">

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

                    <h5 >

                      <span>{{coachData.userInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.pgSkillTrackMstr.description}}</span> &nbsp;  &nbsp; <span  *ngIf="coachData.pgExperienceLevel !== null" class="exp_level hide">{{getSubstring(coachData.pgExperienceLevel.experienceLevel)}}</span>
                    </h5>

                    <div class="col-sm-12 col-md-12 col-lg-12 primary_skills ">

                      <div class = " primarySkills" style="background-color: #A0D6E3;">
                        {{coachDatauserInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.description}}
                      </div>

                    </div>

                  </div>




                </div>
                <div class="col-sm-12 col-md-12 col-lg-12 cdt_bottom_card hide">

                  <div  class="col-sm-4 col-md-4 col-lg-4  tests" >

                    <div class="completed">
                      <h5>80</h5>

                      <div class = "Progress">

                        <span class="progress_fill" [style.width]="80 "></span>
                      </div>

                      <h6 class="test_title">Primary Skills Evaluation</h6>

                    </div>
                  </div>

                </div>
              </div>


            </div>

            <div class="col-sm-12 col-md-6 col-lg-6  modal_right_block">
              <div class="coachCandidate">
                        <div *ngIf="role == 'technical'" class="candidate">
                          <span class="ext">
                            <span class="butn">
                              <h5 >
                                 Technical
                               </h5>
                            </span>
                          <h5 (click)="setRole('business')">Business</h5>
                          </span>
                        </div>
                        <div *ngIf="role == 'business'" class="coach">
                          <span class="ext">
                            <h5 (click)="setRole('technical')">Technical</h5>
                            <span class="butn">
                              <h5>
                                Business
                              </h5>
                            </span>
                          </span>
                        </div>
                      </div>
              <div class="cdt_top_card" *ngFor="let candt of Candidates; let idx = index">

                <a class="IMG">

                  {{ Initials(candt.infoDetails.userInfoMstr.fullName) }}

                </a>

                <div class="candidate">

                  <h4 >
                    {{candt.infoDetails.userInfoMstr.fullName}}
                  </h4>

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


                  <div class = "scores"  >
                    <h3>80</h3>
                    <h4>Primary</h4>
                  </div>
                  <div class = "scores" >
                    <h3>80</h3>
                    <h4>Technical</h4>
                  </div>
                </div>

                <input type="checkbox" name="radiogroup"
                       [value]="candt.infoDetails.userInfoDtlsId"
                       (change)="onSelectionChange(coach)">
              </div>

            </div>
            <div class="confirmCoach" (click)="submitCoachtoCandidateAssignment()"></div>
          </div>
        </div>
      </div>


      <div class="col-sm-12 col-md-3 col-lg-3 left_block">

        <div class="col-sm-12 col-md-12 col-lg-12 candidate_info">
          <div class="cdt_top_card">

            <a class="IMG">

              {{ Initials(coachData.userInfoMstr.fullName)}}

            </a>
            <img class="coachStatus" src="{{imageUrl}}/assets/img/pgflow/check-green.png"/>
            <div class="col-sm-12 col-md-12 col-lg-12 candidate">

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

              <h5 >
                <span>{{coachData.userInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.pgSkillTrackMstr.description }}</span>  &nbsp; <span *ngIf="coachData.pgExperienceLevel !== null" class="exp_level">{{getSubstring(coachData.pgExperienceLevel.experienceLevel)}}</span>
              </h5>

              <div class="col-sm-12 col-md-12 col-lg-12 primary_skills ">

                <div class = " primarySkills" style="background-color: #A0D6E3;">
                  {{coachData.userInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.description}}
                </div>

              </div>

            </div>
            <div class="col-sm-12 col-md-12 col-lg-12 location"><img src="{{imageUrl}}/assets/img/pgflow/Location-icon.png" /> <h5>{{coachData.userInfoMstr.pgLocation.city}}</h5></div>

            <div class="col-sm-12 col-md-12 col-lg-12 location"><img src="{{imageUrl}}/assets/img/pgflow/Time-icon.png"/><h5 style="margin-bottom: 0px;">{{coachData.createdDt | date:'EEEE, MMMM d, y, h:mm:ss a' }}</h5></div>

            <span class="col-sm-12 col-md-12 col-lg-12 time-zone"><h6> Eastern Standard Time(UTC/GMT-5 hours)</h6></span>


            <!--<div *ngIf="candidate.unreadMessages"  class="message_notification">
              <h6>   {{candidate.unreadMessages}}   </h6>
            </div>-->




          </div>
        </div>

        <div class="col-sm-12 col-md-12 col-lg-12 candidate_contact_info">

          <h2>Coach Details</h2>

          <div class="contact_info">
            <h6>Email:</h6>
            <h6>{{coachData.emailId}}</h6>
          </div>

          <div class="contact_info">
            <h6>Phone:</h6>
            <h6>{{coachData.contactNumber}}</h6>
          </div>


        </div>

      </div>

      <div class="col-sm-12 col-md-9 col-lg-9 right_block">

        <div class="col-sm-12 col-md-12 col-lg-12 Tests">

          <span class="evaluatingTest"><img src="{{imageUrl}}/assets/img/pgflow/AssignedCandidates-icon.png"/> <h2 >Assigned Candidates({{Candidates.length}})</h2></span>

          <div  class="col-sm-12 col-md-12 col-lg-12 candidateCard" >
            <div class="cdt_top_card" *ngFor="let candt of Candidates">

              <!--<span class="status"></span>-->
              <a class="IMG">

                {{ Initials(candt.infoDetails.userInfoMstr.fullName) }}

              </a>

              <div class="candidate">

                <h4 >
                  {{candt.infoDetails.userInfoMstr.fullName}}
                </h4>

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

                <div class = "scores" *ngFor="let evnt of candt.eventDetails" >
                  <h3>{{evnt.eventScore}}</h3>
                  <h4>{{ replace(evnt.eventName) }}</h4>
                </div>
                <div class = "scores hide" >
                  <h3>80</h3>
                  <h4>Technical</h4>
                </div>

              </div>


            </div>
            <div class="assignCandidate hide" (click)="showmodal('showModal')"><img src="{{imageUrl}}/assets/img/pgflow/add_button.png"/></div>



          </div>

        </div>

        <span class="evaluatingTest hide"><h2 >Project(s) Details</h2></span>


        <div  class="col-sm-12 col-md-12 col-lg-12 hidereport">



        </div>

        <span  class="acptrjct arprimary hide">

          <span class="reject" ><h5>Reject</h5></span>

          <span class="approve"><h5>Approve</h5></span>

        </span>


      </div>

    </section>


  </div>

  <!--<div class="pull-right chatbotBlock hide" ><figure><img src="../../assets/img/dashboard/ChatBot.png"></figure></div>-->
</div>
