

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

<ion-content>
  <!-- <div>
  <ion-row [ngClass]="direction == 'en' ? 'empty-en':'empty-ar' ">{{ts.trPK('general','empty')}}</ion-row>
  </div> -->
  <div  *ngIf="ticketsInfo.length !=0">
    <ion-card *ngFor="let ticket of ticketsInfo ;let i = index"  class="result-container"  (click)="openRequestDetailsPage(ticket)">
    <ion-card-content>
      <div class="div">
        <div class="text">{{ticket.ticketTypeName}}</div>
        <div  [ngClass]=" direction == 'en'? 'date' : 'date-ar'" >{{ts.trPK('userProfile','postedDate')}} {{(ticket.created)?.substring(0,10)}}</div>
      </div>
      <!-- <ion-row style="margin-left: -3px; margin-right: -9px;">
        <ion-col class="text">{{ticket.ticketTypeName}}</ion-col>
        <ion-col [ngClass]=" direction == 'en'? 'date' : 'date-ar'" >{{ts.trPK('userProfile','postedDate')}} {{(ticket.created)?.substring(0,10)}}</ion-col>
      </ion-row> -->
      <ion-row class="desc">{{ticket.description}}</ion-row>
      <!--  <ion-row  [ngClass]="{
        'New': ticket.ticketStatusId === 1 ,
        'ReOpen': ticket.ticketStatusId === 2,
        'AssToManager': ticket.ticketStatusId === 3,
        'AssToSpec': ticket.ticketStatusId === 4,
        'Pending': ticket.ticketStatusId === 5,
        'BackToSpec': ticket.ticketStatusId === 6,
        'Closed': ticket.ticketStatusId === 7,
        'BackToManager': ticket.ticketStatusId === 8,
         'AssignedToHR': ticket.ticketStatusId === 9,}">{{ticket.ticketStatusName}}</ion-row> -->
       <ion-row class="status">{{ticket.ticketStatusName}}</ion-row> 
    </ion-card-content>
  </ion-card>
  <div *ngIf=" ticketsInfo.length >= 10 && ticketTotal != ticketsInfo.length" style=" position: relative; display: flex;">
  <button [ngClass]=" direction == 'en'? 'show' : 'show-ar'"   (click)="getTicketsByEmployee()" >{{ts.trPK('userProfile','showMore')}}</button>
</div>
</div>

  <div class="no-data-available" *ngIf="ticketsInfo.length === 0">
    <span>{{ts.trPK('work-list','No-data-available')}}</span>
  </div>
</ion-content>
<ion-footer class="footer">
  <div class="Btn">
  <ion-button  class="CreateBtn" (click)="openHRRequestPage()"  >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
</div>
</ion-footer>

