

<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>
    <ion-card  class="result-container" >
    <ion-card-content>
      <div class="div">
        <div class="status">{{status}}</div>
        <div class="postedDate">{{ts.trPK('userProfile','postedDate')}}{{date}}</div>
      </div>
      <!-- <ion-row [ngClass]=" direction == 'en'? 'card-content' : 'card-content-ar'"  >
         <ion-col style="color: #259CB8; font-weight: bold;" > {{status}}</ion-col> 
        <ion-col [ngClass]=" direction == 'en'? 'date' : 'date-ar'"  >{{ts.trPK('userProfile','postedDate')}}{{date}}</ion-col>
      </ion-row> -->
      <ion-col [size]="12">
        <h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' " >{{ts.trPK('userProfile','refrence')}}</h2>
        <p [ngClass]="direction == 'en' ? 'text':'text-ar' " >{{ticketRefre}}</p>
      </ion-col>
      <ion-col [size]="12">
        <h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' "> {{ts.trPK('userProfile','section')}}</h2>
        <p [ngClass]="direction == 'en' ? 'text':'text-ar' ">{{section}}</p>
      </ion-col>
      <ion-col [size]="12">
        <h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' "> {{ts.trPK('userProfile','topic')}}</h2>
        <p [ngClass]="direction == 'en' ? 'text':'text-ar' ">{{topic}}</p>
      </ion-col>
      <ion-col [size]="12">
        <h2 [ngClass]="direction == 'en' ? 'labels':'labels-ar' ">{{ts.trPK('userProfile','Description')}}</h2>
        <p [ngClass]="direction == 'en' ? 'DescrText':'DescrText-ar' " >{{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">
    <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 [ngClass]="direction == 'en' ? 'action-data':'action-data-ar' "  >
          <p >{{action.comments}}</p>
          <!-- <span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{(action.actionDate)?.substring(0,10)}}</span> -->
        </div>
        <div class="div">
          <div ></div>
          <div class="postedDate">{{(action.actionDate)?.substring(0,10)}}</div>
        </div>
        </div>
      </div>
    </div>
  </ion-card-content>
</ion-card>
</div>

</ion-content>


