
<div class="container-full">
  <header style="padding: 5px 0;" (mouseleave)="leaveLogout($event)">
    <div>
      <div class="col-sm-1 col-md-1 col-lg-1 togelBlocks">
        <a (click)="goToDashboard()"><figure><img src="{{imageUrl}}/assets/img/dashboard/togel.png"></figure></a>
      </div>
      <div class="col-sm-10 col-md-10 col-lg-10">
        <h1>{{name}} 's Playground</h1>
      </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>
  <div  class="container-fluid " *ngIf="CandidateData">

    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12 candidateContainer">
        <h3 class="listofProf">Edit Profile</h3>
      </div>
      <div class="col-md-2">

      <!--<div class="input-group add-on searchBtn">
        <input class="form-control textBox" placeholder="Job ID" name="srch-term" id="srch-term" type="text">
        <div class="input-group-btn">
          <button class="btn btnSearch" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
      </div>-->

      </div>
      <div class="col-md-8">

        <ul class="nav listBtn">

          <span (click)="stepF1()" class="btn-text" data-toggle="tab"><button [class.active]="Act == 'basicDetails'"  ><span >Basic Details</span></button></span>
          <span (click)="stepF2()" class="btn-text" data-toggle="tab"> <button [class.active]="Act == 'contactDetails'" ><span >Contact Details</span></button></span>
          <span (click)="stepF3()" class="btn-text" data-toggle="tab"><button [class.active]="Act == 'skillDetails'" ><span >Skill Details</span></button></span>
          <span (click)="stepF4()" class="btn-text " data-toggle="tab"><button [class.active]="Act == 'resume'" ><span >Resume</span></button></span>

        </ul>
      </div>
      <div class="col-md-2">
        <div class="clearBtn">
          <a (click)="gotoTaDashboard(_Status)"><img src="{{imageUrl}}/assets/img/Taflow/ic_clear.png"></a>
        </div>
      </div>
      <!--<div class="col-md-2"></div>-->



    </div>
    <div class="row">
      <div class="col-md-2">
        <!-- <div class="row">
           <div class="nav-side-menu">
             <div class="brand">Filter By</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 data-toggle="collapse" data-target="#level" class="collapsed" >
                   <a> Level <span class="arrow"></span></a>
                 </li>
                 &lt;!&ndash;<ul class="sub-menu collapse" id="level">&ndash;&gt;
                 &lt;!&ndash;<li *ngFor="let level of levels" (click)="levelFilter(level.experienceInYrs)"><a >{{level.experienceInYrs}}</a></li>&ndash;&gt;
                 &lt;!&ndash;</ul>&ndash;&gt;

                 <li data-toggle="collapse" data-target="#skill" class="collapsed" >
                   <a> Skills <span class="arrow"></span></a>
                 </li>
                 &lt;!&ndash;<ul class="sub-menu collapse" id="skill">&ndash;&gt;
                 &lt;!&ndash;<li *ngFor="let skill of skills" (click)="skillFilter(skill.pgSkillTrackDtls.description)"><a >{{skill.pgSkillTrackDtls.description}}</a></li>&ndash;&gt;

                 &lt;!&ndash;</ul>&ndash;&gt;


                 <li data-toggle="collapse" data-target="#jtitle" class="collapsed" >
                   <a> Job Title<span class="arrow"></span></a>
                 </li>
                 &lt;!&ndash;<ul class="sub-menu collapse" id="jtitle">&ndash;&gt;

                 &lt;!&ndash;<li *ngFor="let job of jobTitles" (click)="jobTitleFilter(job.pgSkillTrackDtls.pgSkillTrackMstr.description)"><a >{{job.pgSkillTrackDtls.pgSkillTrackMstr.description}}</a></li>&ndash;&gt;

                 &lt;!&ndash;</ul>&ndash;&gt;
               </ul>
             </div>
           </div>
         </div>-->

      </div>
      <div class="col-md-1"></div>
      <div class="col-md-9">
        <div class="row">
          <div class="container-fluid containDiv">

            <div  *ngIf="isSuccess" class="alert alert-success" role="alert" id="success_message">{{successMessage}}</div>

            <!--Error Messag-->
            <div  *ngIf="isError" class="alert alert-Err" role="alert" id="error_message">{{errorMessage}}.</div>

            <form class="example-form" *ngIf="step1Form">

              <mat-form-field class=" fNm">
                <input matInput [class.error]="Error == 'firstName'" (click)="clearError(Error)" placeholder="First name"  [(ngModel)]="firstName" name="firstName">
              </mat-form-field>
              <mat-form-field class="fNm">
                <input matInput [class.error]="Error == 'lastName'" (click)="clearError(Error)" placeholder="Last name "  [(ngModel)]="lastName" name="lastName">
              </mat-form-field>

              <mat-form-field class="example-full-width">
                <input matInput [class.error]="Error == 'jobId'" (click)="clearError(Error)" placeholder="Job Title"  [(ngModel)]="jobId" name="jobId">
              </mat-form-field>

              <mat-form-field class="example-full-width hide">
                <input matInput [class.error]="Error == 'location'" (click)="clearError(Error)" placeholder="Location"  [(ngModel)]="location" name="location">
              </mat-form-field>

              <div id="matSelectlocation" [class.redline]="Error == 'location'" (click)="clearError(Error)">
                <mat-select class="example-full-width slet" placeholder="Location" [(ngModel)]="location" name="location">
                  <mat-option  *ngFor="let list of locations" [value]="list.locationId">
                    {{ list.city }}
                  </mat-option>
                </mat-select></div><br>


              <mat-form-field class="fNm">
                <input matInput [class.error]="Error == 'contact'" placeholder="Contact" (click)="clearError(Error)" [(ngModel)]="contact" name="contact">
              </mat-form-field>
              <mat-form-field class="fNm">
                <input matInput [class.error]="Error == 'govtId'" placeholder="Government ID" (click)="clearError(Error)" [(ngModel)]="govtId" name="govtId">
              </mat-form-field>
              <mat-form-field class="example-full-width">
                <input matInput  placeholder="Email" [(ngModel)]="email" name="email" readonly>
              </mat-form-field>
              <div>
                <div class="row">
                  <div class="col-md-2">
                  </div>
                  <div class="col-md-8"></div>
                  <div class="col-md-2">
                    <img (click)="form1Submit()" class="backImg" src="{{imageUrl}}/assets/img/Taflow/Next_Button.png">

                  </div>
                </div>

              </div>
            </form>

            <form class="example-form" *ngIf="step2Form">
              <mat-form-field class="example-full-width">
                <input matInput class="inText" placeholder="Alternate Email" [(ngModel)]="altrEmail" name="altrEmail">
              </mat-form-field>

              <mat-form-field class="example-full-width">
                <input matInput [class.error]="Error == 'address'" placeholder="Address" [(ngModel)]="address" (click)="clearError(Error)" name="address">
              </mat-form-field>
              <mat-form-field class="example-full-width">
                <input matInput [class.error]="Error == 'city'" placeholder="City" [(ngModel)]="city" name="city">
              </mat-form-field>
              <mat-form-field class="fNm">
                <input matInput class="inText" placeholder="Alternate Contact" [(ngModel)]="altrContact" name="altrContact">
              </mat-form-field>
              <mat-form-field class="fNm">
                <input matInput class="inText" placeholder="Facebook ID (Optional)" [(ngModel)]="faceBookId" name="faceBookId">
              </mat-form-field>
              <mat-form-field class="fNm">
                <input matInput class="inText" placeholder="Google S (Optional)" [(ngModel)]="twitterId" name="twitterId">
              </mat-form-field>
              <mat-form-field class="fNm">
                <input matInput class="inText" placeholder="LinkedIn ID (Optional)" [(ngModel)]="linkedInId" name="linkedInId">
              </mat-form-field>
              <div>
                <div class="row">
                  <div class="col-md-2">
                    <img (click)="stepF1()" class="backImg" src="{{imageUrl}}/assets/img/Taflow/Back_Button.png">
                  </div>
                  <div class="col-md-8"></div>
                  <div class="col-md-2">
                    <img (click)="form2Submit()" class="backImg" src="{{imageUrl}}/assets/img/Taflow/Next_Button.png">
                  </div>
                </div>

              </div>

            </form>

            <form class="example-form" *ngIf="step3Form">

              <mat-form-field class="example-full-width hide">
                <input matInput [class.error]="Error == 'experience'" (click)="clearError(Error)" placeholder="Experience"  [(ngModel)]="experience" name="experience">
              </mat-form-field>

              <div id="matSelectExp" [class.redline]="Error == 'experience'" (click)="clearError(Error)">
                <mat-select class="example-full-width slet" placeholder="Experience" [(ngModel)]="experience" name="experience">
                  <mat-option  *ngFor="let list of expLevels" [value]="list.experienceLevelId">
                    {{ list.experienceLevel }}
                  </mat-option>
                </mat-select></div><br>



              <mat-form-field class="example-full-width hide" multiple=true>
                <input matInput [class.error]="Error == 'primarySkill'" [class.error]="Error == 'address'" placeholder="Primary Skill" [(ngModel)]="primarySkill" name="primarySkill">
              </mat-form-field>


              <div id="matSelectprimaryskill" [class.redline]="Error == 'primarySkill'">
                <mat-select multiple=true  placeholder="Primary Skill" [(ngModel)]="primarySkill" name="primarySkill"><!--[(ngModel)]="primarySkill"-->
                  <mat-option  *ngFor="let assessment of Skills" [value]="assessment.skillTrackDtlsId">
                    {{ assessment.description }}
                  </mat-option>
                </mat-select>
              </div><br>

              <mat-form-field class="example-full-width hide">
                <input matInput class="inText" placeholder="Secondary Skill" [(ngModel)]="secondarySkill" name="secondarySkill">
              </mat-form-field>

              <mat-select class="example-full-width slet hide" placeholder="Secondary Skill" [(ngModel)]="secondarySkill" name="secondarySkill">
                <mat-option  *ngFor="let assessment2 of Skills" [value]="assessment2.skillTrackMstrId">
                  {{ assessment2.description }}
                </mat-option>
              </mat-select>

              <mat-form-field class="example-full-width">
                <input matInput class="inText" placeholder="Others" [(ngModel)]="other" name="other">
              </mat-form-field>

              <div class="row">
                <div class="col-md-2">
                  <img (click)="stepF2()" class="backImg" src="{{imageUrl}}/assets/img/Taflow/Back_Button.png">
                </div>
                <div class="col-md-8"></div>
                <div class="col-md-2">
                  <img (click)="form3Submit()" class="backImg" src="{{imageUrl}}/assets/img/Taflow/Next_Button.png">
                </div>
              </div>
            </form>
            <form class="example-form " *ngIf="step4Form">
              <div class="row uploadDiv">
                <img class="uploadImg" src="{{imageUrl}}/assets/img/Taflow/ic_file_upload.png" ><br>

                <span>
                <b class="uploadText"> Upload  your Resume here</b>

                <h3 class="uploadText2"> Supports .pdf,.doc and .docx format</h3>

              </span>

              </div>



              <input type="file" max-size=2154 (change)="fileChange(file.files)" accept=".doc,.docx,.xml,application/msword,application/pdf" #file style="display:none">
              <button mat-raised-button class="mdButton upload" color="primary" (click)="file.click()"><span class="textBtn">Upload Resume</span></button><br>

              <h3 class="uploadName"> <strong>File name : </strong> {{uploadFileName}}</h3>
              <br>
              <mat-form-field class="example-full-width hide">
                <input matInput class="inText" placeholder="link" [(ngModel)]="link" name="link">
              </mat-form-field>

              <div class="row">
                <div class="col-md-2">
                  <img (click)="stepF3()" class="backImg" src="{{imageUrl}}/assets/img/Taflow/Back_Button.png">
                </div>
                <div class="col-md-6"></div>
                <div class="col-md-4">
                  <button (click)="fileChange(file.files)" mat-raised-button class="mdButton" color="primary"><span class="textBtn"><a href="/ta">Cancel</a></span></button>
                  <button (click)="uploadSumbit()" mat-raised-button class="mdButton" color="primary"><span class="textBtn">Save</span></button>


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


          </div>
        </div>

      </div>

    </div>



    <!-- /.flex-row  -->


  </div>
</div>
