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

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

    <div>


      <div class="centerDiv homeBox">
        <!-- <div class="profileDiv"> -->
          <img class="profileImg" [src]="user_image">
         </div>
      
      <!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
      <div *ngIf="personalInfo">
        <p class="empName">{{User_name_Emp}}</p>
            <p class="empJob"> {{User_Job_name}}</p>
      </div>
    </div>

  </div>    

  <ion-grid *ngIf="personalInfo">
    <div class="gridService">
      <ion-row>
        <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
          <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
        <br>  <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label>
        </ion-col>
        <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
          <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
        <br>  <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>
        </ion-col>
        <ion-col [ngClass]=" direction == 'ltr' ?  'columns' : 'columns-ar'">
          <label [ngClass]=" direction == 'ltr' ?  'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
       <br>   <label [ngClass]=" direction == 'ltr' ?  'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>
        </ion-col>
      </ion-row>

    
    </div>
  </ion-grid>


<div class="list">
  <ion-list class="list-ios">
    <div class="p">
      <p>{{ts.trPK('userProfile','Years of Services')}}</p>
    </div>

    <ion-item class="itemline" (click)="openEditprofile()">
      <ion-thumbnail slot="start" class="menu-thumb">
        <img style= "height: 22px !important;"  src="../assets/imgs/profile_icon.png" item-left>
      </ion-thumbnail>
 
      <ion-label class="profile">
        {{ts.trPK('userProfile','edit-profile')}}
      </ion-label>
      <ion-icon [ngClass]=" direction == 'ltr' ?  'arrow' : 'arrow-ar'" name="arrow-forward"  item-right></ion-icon>
    </ion-item>

    <ion-item class="itemlins" (click)="openPerormance()">
      <ion-thumbnail slot="start" class="menu-thumb">
        <ion-icon style= "width: 23px; height: 24px !important;"  name="speedometer" item-left></ion-icon>
    
      </ion-thumbnail>
      <ion-label class="profile">
        {{ts.trPK('userProfile','performance-evaluation')}}
      </ion-label>
      <ion-icon [ngClass]=" direction == 'ltr' ?  'arrow' : 'arrow-ar'" name="arrow-forward"  item-right></ion-icon>
    </ion-item>

  </ion-list>
</div>
</ion-content>