<app-generic-header
  showBack="true"
  [headerText]="'userProfile, title' | translate">
</app-generic-header>

<ion-content class="colorBG">
  <div class="header-div">
    <div class="centerDiv homeBox">
      <div class="centerDiv homeBox">
        <!-- <div class="profileDiv"> -->
          <img class="profileImg" [src]="imageSrc">
         </div>
      <!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
      <!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> -->
      <div *ngIf="personalInfo">
        <p class="Text">{{personalInfo.EMPLOYEE_NAME}}</p>
      </div>
    </div>


    <div [ngClass]=" direction == 'ltr' ?  'changeImgBtn' : 'changeImgBtn-ar'">
      <button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
        <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon>
      </button>
    </div>

  </div>    <!-- end header-div -->
  <div>

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

    <!-- <ion-card-header class="boxHdr">
              <div  class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</div>
          </ion-card-header> -->
    <!-- <ion-card-content> -->
    <div *ngIf="personalInfo">

      <ion-grid>
        <div class="profileGrid">
          <ion-row  style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col class="line">
              <ion-row>
                <label class="lebl">
                  {{ts.trPK('userProfile','empNo')}}</label></ion-row>
              <ion-row > <label
                  class="rowBolds">{{personalInfo.EMPLOYEE_NUMBER}}</label> </ion-row>
            </ion-col>
            <ion-col>
              <ion-row> <label class="lebl">{{ts.trPK('userProfile','category')}}</label>
              </ion-row>
              <ion-row>
                <label class="rowBolds">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label> </ion-row>
            </ion-col>
          </ion-row>

          <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('userProfile','address')}}</label>
              </ion-row>
              <ion-row>
                <label class="rowBolds"></label>
              </ion-row>
            </ion-col>
          </ion-row>

          <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('general','mobile')}}</label>
              </ion-row>
              <ion-row>
                <label class="rowBolds">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</label>
              </ion-row>
            </ion-col>
          </ion-row>

          <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('userProfile','busG')}}</label>
              </ion-row>
              <ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_NAME}}</label>
              </ion-row>
            </ion-col>
          </ion-row>

          
          <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('userProfile','job')}}</label>
              </ion-row>
              <ion-row>
                <label class="rowBolds">{{personalInfo.JOB_NAME}}</label>
              </ion-row>
            </ion-col>
          </ion-row>

          <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('userProfile','payrol')}}</label>
              </ion-row>
              <ion-row>
                <label class="rowBolds">{{personalInfo.PAYROLL_NAME}}</label>
              </ion-row>
            </ion-col>
          </ion-row>

         
          <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('userProfile','orgEmail')}}</label>
              </ion-row>
              <ion-row>
                <label class="rowBolds">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
              </ion-row>
            </ion-col>
          </ion-row>

          <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('userProfile','position')}}</label>
              </ion-row>
              <ion-row>
                <label class="rowBolds">{{personalInfo.POSITION_NAME}}</label>
              </ion-row>
            </ion-col>
          </ion-row>

      
          <ion-row>
            <ion-col>
              <ion-row>
                <label class="lebl">{{ts.trPK('userProfile','grade')}} </label>
              </ion-row>
              <ion-row>
                <label class="rowBolds">{{personalInfo.GRADE_NAME}}</label>
              </ion-row>
            </ion-col>
          </ion-row>

        </div>
      </ion-grid>
    </div>
    <!-- </ion-card-content> -->
    <!-- </ion-card> -->
  </div>
</ion-content>