<ion-header>
    <ion-toolbar  class="header-toolbar">
        <ion-buttons slot="start">
          <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
        </ion-buttons>
        <ion-title color="light" > {{ts.trPK('userProfile','title')}}</ion-title>
      </ion-toolbar>
</ion-header>


  <ion-content>
      <ion-card *ngIf="personalInfo">

          <ion-card-header class="boxHdr">
              <div class="hrTitle">{{personalInfo.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]="imageSrc"></ion-img>
              </div>
              <ion-grid class="profile-grid">
                <div>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label> {{ts.trPK('userProfile','empNo')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.EMPLOYEE_NUMBER}}</label>
                    </ion-col>
                  </ion-row>
                
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','busG')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.BUSINESS_GROUP_NAME}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','job')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.JOB_NAME}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','locName')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.LOCATION_NAME}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','payrol')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.PAYROLL_NAME}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','orgEmail')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','orgName')}} </label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.ORGANIZATION_NAME}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','position')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.POSITION_NAME}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','grade')}} </label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.GRADE_NAME}}</label>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col class="colBold" size="5">
                      <label>{{ts.trPK('userProfile','category')}}</label>
                    </ion-col>
                    <ion-col size="7">
                      <label>{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
                    </ion-col>
                  </ion-row>
                </div>
              </ion-grid>
            </div>
          </ion-card-content>
        </ion-card>
  </ion-content>