

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


<ion-content>
  <div class="contentBg">
    <div class="result-graph" >
        <div class="user-info">
          <div class="user-image-container">
            <div class="user-image">
              <img class="img" [src]="EmpImg ? 'data:image/png;base64,'+ EmpImg : '../assets/imgs/profile.png'" alt="Team Member Image"/>
            </div>
          </div>
          <div style="margin-top: 25px;">
          
          <span  class="Nametext">{{EmpName}}</span>
          <p class="p1">{{EmpEmail}}</p>
        </div>
          <div >
            <ion-row>
              <ion-col style="border-right: 1px solid rgb(221 221 221);">
                <p class="p">{{ts.trPK('userProfile','role')}}</p>
                  <span class="Boldtext">{{EmpPosition}}</span>
                 
              </ion-col>
              <ion-col>
                <p class="p" style="line-height: 12px !important;">{{ts.trPK('userProfile','empNo')}}</p>
               
                <span class="Boldtext">{{EmpNum}}</span>
              </ion-col>
            </ion-row>
          </div>
        </div>
    </div>

    <div [ngClass]="direction == 'en' ? 'employee-information-indetail':'employee-information-indetail-ar' ">
      <ion-row style="padding-left: 13px;">
        <ion-col>
          <div [ngClass]="direction == 'en' ? 'title':'title-ar' " >{{ts.trPK('userProfile','profile-details')}}</div>
        </ion-col>
        <ion-col style="margin-bottom: -22px;" [size]="12">
          <h2>{{ts.trPK('userProfile','category')}}</h2>
          <p>{{EmpCatMeaning}}</p>
         
        </ion-col >
        <ion-col style="margin-bottom: -22px;" [size]="12">
          <h2>{{ts.trPK('userProfile','address')}}</h2>
          <p class="hL">{{EmpLocation}}</p>
         
        </ion-col>
        <ion-col style="margin-bottom: -22px;" [size]="12">
          <h2>{{ts.trPK('userProfile','phone-no')}}</h2>
          <p>{{EmpMobile}}</p>
        
        </ion-col>
        <ion-col style="margin-bottom: -22px;" [size]="12">
          <h2>{{ts.trPK('userProfile','busG')}}</h2>
          <p>{{EmpOrgName}}</p>
          
        </ion-col>
        <ion-col style="margin-bottom: -22px;" [size]="12">
          <h2>{{ts.trPK('userProfile','job')}}</h2>
          <p>{{EmpPosition}}</p>
         
        </ion-col>
        <ion-col style="margin-bottom: -22px;" [size]="12">
          <h2>{{ts.trPK('userProfile','payrol')}}</h2>
          <p>{{EmpPayrol}}</p>
        </ion-col>
  
        <ion-col style="margin-bottom: -22px;" [size]="12">
          <h2>{{ts.trPK('userProfile','position')}}</h2> 
          <p class="hL">{{EmpPosition}}</p>
       
        </ion-col>
        <ion-col style="margin-bottom: -22px;" [size]="12" style="border-bottom: none;">
          <h2>{{ts.trPK('userProfile','grade')}}</h2>
          <p>{{EmpGRADENAME}}</p>
         
        </ion-col>
      </ion-row>
    </div>

  </div>

  <!-- ///////////////////////////////////////////////////////////////////next page -->

  <!-- <div>
  <div class="verify-code">
   <ion-row style=" margin-left: 9px; margin-bottom: 13px;">
    <ion-col style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','code-sent')}}</ion-col>
     <ion-col class="Boldtext"> {{EmpMobile}}</ion-col>
    </ion-row>

    <ion-row dir="ltr">
      <ion-col [size]="12">
         <ion-input type="tel"  maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
      inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()" #ref autofocus="true">
    </ion-input>
    
    <ion-input type="tel"  maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
      inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
    <ion-input type="tel"  maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
      inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
    <ion-input type="tel"  maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
      inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
  
   </ion-col>
   </ion-row> 
  </div>
  <div>
    <ion-button  class="sendVerifyBtn" (click)="VerifyCode()" >{{ts.trPK('userProfile','verify-code')}}</ion-button>
  </div>
</div> -->



  <!-- ///////////////////////////////////////////////////////////////////next page -->



</ion-content>

<ion-footer class="footer">
  <div class="Btn">
  <ion-button  class="CreateBtn" (click)="createRequest()" >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
</div>
</ion-footer>
