
  <ion-header>
      <ion-toolbar  class="header-toolbar">
          <ion-buttons slot="start">
            <nav-buttons [navigate] = "false" (backClick)="goback()"></nav-buttons>
              <ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="modalFlag" (click)="dismiss()"></ion-icon>
            </ion-buttons>
            <ion-title color="light" >{{headerTitle}}</ion-title>
              <!-- <ion-buttons slot="end">
                  <button ion-button icon-only class="btnBack" *ngIf="isSpecialist == false" (click)="goToSubordinate();">
                      <ion-icon  class="search-icons" color="light" name="search"></ion-icon>
                    </button>
                </ion-buttons> -->
    </ion-toolbar>
    </ion-header>
  <ion-content padding>
      <div *ngIf="employee">
        <ion-card>
  
          <ion-card-header class="boxHdr">
            <div class="hrTitle">{{employee.EMPLOYEE_NAME}}</div>
          </ion-card-header>
          <ion-card-content>
            <div>
              <div class="centerDiv profileDiv">
                <!-- <p class="TxtPlace boldTxt">{{User_name_Emp}}</p> -->
                <ion-img class="profileImg"
                  [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
                </ion-img>
              </div>
              <ion-grid class="profile-grid">
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','empNo')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.EMPLOYEE_NUMBER}}</label>
                  </ion-col>
                </ion-row>
                <!-- <ion-row>
              <ion-col class="colBold" col-5>
                <label>{{"userProfile.name" | translate}}</label>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col col-7>
                <label>{{employee.EMPLOYEE_NAME}}</label>
              </ion-col>
            </ion-row> -->
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','busG')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.BUSINESS_GROUP_NAME}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','job')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.JOB_NAME}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','locName')}} </label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.LOCATION_NAME}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','payrol')}} </label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.PAYROLL_NAME}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','orgEmail')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','orgName')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.ORGANIZATION_NAME}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','position')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.POSITION_NAME}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','grade')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.GRADE_NAME}}</label>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col class="colBold" col-5>
                    <label>{{ts.trPK('userProfile','category')}}</label>
                  </ion-col>
                  <ion-col col-7>
                    <label>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</label>
                  </ion-col>
                </ion-row>
                <!-- <ion-row (click)="getMenuEntries(employee);">
              <ion-col col-7> -->
                <!-- <label for="">Request for {{employee.EMPLOYEE_NAME}}</label> -->
                <!-- </ion-col>
            </ion-row> -->
              </ion-grid>
            </div>
          </ion-card-content>
        </ion-card>
        <div class="centerDiv">
            <ion-button  color="customnavy" (click)="getMenuEntries(employee)">{{ts.trPK('myTeam','requestFor')}}
            {{employee.EMPLOYEE_NAME}}</ion-button>
        </div>
      </div>
      <div *ngIf="isSpecialist == false" >
      <ion-list no-lines *ngIf="empSubordinate && empSubordinate.length>0">
        <ion-item no-border *ngFor="let subordinate of empSubordinate;let i=index" (click)="getDetails(i);">
          <ion-avatar slot="start">
            <!-- <img *ngIf="subordinate.EMPLOYEE_IMAGE" src="data:image/*;base64,{{ subordinate.EMPLOYEE_IMAGE}}"> -->
            <img
              [src]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
          </ion-avatar>
          <p class="boldTxt">{{subordinate.EMPLOYEE_NAME}}</p>
          <p>{{subordinate.POSITION_NAME}}</p>
          <ion-badge slot="end">{{subordinate.NUM_OF_SUBORDINATES}}</ion-badge>
        </ion-item>
      </ion-list>
   
      <ion-infinite-scroll threshold="100px" (ionInfinite)="doInfinite($event)">
          <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="Loading more data...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </div>
  </ion-content>
  