



<ion-header>
  <ion-toolbar class="header-toolbar-new">
      <ion-buttons slot="start">
        <nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
      </ion-buttons>
      <ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','MyHR-request')}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- <div>
  <ion-row [ngClass]="direction == 'en' ? 'empty-en':'empty-ar' ">{{ts.trPK('general','empty')}}</ion-row>
  </div> -->
  <div>
    <ion-card class="result-container" >
    <ion-card-content>
      <ion-row style="margin-left: -3px; margin-right: -9px;">
        <ion-col style="color: #e69f44;" > {{status}}</ion-col>
        <ion-col class="date">{{ts.trPK('userProfile','postedDate')}}{{date}}</ion-col>
      </ion-row>
      <ion-col [size]="12">
        <h2 class="labels">{{ts.trPK('userProfile','refrence')}}</h2>
        <p class="text">{{ticketRefre}}</p>
      </ion-col>
      <ion-col [size]="12">
        <h2 class="labels"> {{ts.trPK('userProfile','section')}}</h2>
        <p class="text">{{section}}</p>
      </ion-col>
      <ion-col [size]="12">
        <h2 class="labels"> {{ts.trPK('userProfile','topic')}}</h2>
        <p class="text">{{topic}}</p>
      </ion-col>
      <ion-col [size]="12">
        <h2 class="labels">{{ts.trPK('userProfile','Description')}}</h2>
        <p class="DescrText">{{description}}</p>
      </ion-col>
    </ion-card-content>
  </ion-card>
  </div>

  <div>
    <ion-card  class="result-containerList" >
    <ion-card-content>
  <div *ngFor="let action of actionInfo ;let i = index" style="position: relative;">
    <div [ngClass]=" direction == 'en'? 'request-list-container' : 'request-list-container-ar'" >
      <div>
      <!-- <div *ngFor="let formattedAction of showFormattedAction;  let i = index"> -->
        <span [ngClass]="direction == 'en'? 'text-span':'text-span-ar'">{{ts.trPK('userProfile','actionBy')}}{{action.actionBy}}</span>
        <div  class="action-data">
          <p >{{action.comments}}</p>
          <span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{(action.actionDate)?.substring(0,10)}}</span>
        </div>
        </div>
      </div>
    </div>
  </ion-card-content>
</ion-card>
</div>

</ion-content>


