<ion-content *ngIf="userInfo.CompanyMainCompany == 'CS'" dir="ltr">
  <img *ngIf="userInfo.PAYROLL_CODE === 'CS' " style="width: 100%; max-width: 100%; height: 30%;" src="../../../assets/imgs/IDTOP.png">
  <img *ngIf="userInfo.PAYROLL_CODE !== 'CS' " style="width: 100%; max-width: 100%;" src="../../../assets/imgs/IDTOP_HMG.png.png">
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngIf="userInfo.EMPLOYEE_IMAGE != null">
        <img class="digital-id-image-size"
         [src]="'data:image/png;base64,'+userInfo.EMPLOYEE_IMAGE">
      </ion-col>
      <ion-col size="6" *ngIf="userInfo.EMPLOYEE_IMAGE == null">
        <img style="width: 70%;height: 180%; ; bottom: 0%; position: absolute; border: 1px solid #e6e6e6; border-radius: 20px;"
         src="../../../assets/imgs/profilePic.png">
      </ion-col>
      <ion-col size="6">
        <p><b style="font-size: 25px !important; font-family: sans-serif;">{{userInfo.ASSIGNMENT_NUMBER}}</b></p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <p><b style="font-size: 20px !important;">{{userInfo.EMPLOYEE_DISPLAY_NAME}}</b></p>
        <p style="font-size: 15px !important;">{{userJobName}}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img style="width: 50%; max-width: 100%; margin-left: 25%;" [src]="userInfo.EmployeeQR">
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-content *ngIf="userInfo.CompanyMainCompany != 'CS'" dir="ltr">
  <ion-grid>
    <ion-row>
      <ion-col size="3"></ion-col>
      <ion-col size="9" *ngIf="userInfo.EMPLOYEE_IMAGE != null" padding>
        <img *ngIf="userInfo.EMPLOYEE_IMAGE != null" [src]="'data:image/png;base64,'+userInfo.EMPLOYEE_IMAGE" style="width: 60%; height: 100%; border: 3px solid black;">
        <img *ngIf="userInfo.EMPLOYEE_IMAGE == null" src="../../../assets/imgs/profilePic.png" style="width: 60%; height: 100%; border: 3px solid black;">
      </ion-col>
    </ion-row>
    <ion-row style="padding: 0%;">
      <ion-col style="text-align: center;font-weight: bold;font-family: 'WorkSans-Bold'; padding: 0%;">
        <p style="font-size: 20px; padding: 0%;">{{userInfo.EMPLOYEE_NUMBER}}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col style="text-align: center;font-weight: bold;font-family: 'WorkSans-Bold'; padding: 0%;">
        <p style="font-size: 20px; padding: 0%;">{{userInfo.EMPLOYEE_DISPLAY_NAME}}</p>
      </ion-col>
    </ion-row>
    <ion-row  style="padding: 0%;">
      <ion-col style="text-align: center;font-weight: bold;font-family: 'WorkSans-Bold'; padding: 0%;">
        <p style="font-size: 15px; padding: 0%;">{{userJobName}}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img *ngIf="userInfo.CompanyImageURL" style="width: 90%; max-width: 100%; margin-left: 6%;" [src]="userInfo.CompanyBadge">
        <img *ngIf="!userInfo.CompanyImageURL" style="width: 50%; max-width: 100%; margin-left: 16%;" src="../../../assets/imgs/HMG_LOGO.png">
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img style="width: 50%; max-width: 100%; margin-left: 25%;" [src]="userInfo.EmployeeQR">
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer>
  <div class="centerDiv" style="margin-top: 20px !important;">
    <ion-button class="button-login" (click)="dismiss()"><b>{{ts.trPK('general','close')}}</b></ion-button>
  </div>
</ion-footer>