<ion-content>
  <div class="head-title">

    <app-generic-header showImage="false" showBack="true" [headerText]="'general,concurrent-report' | translate">
    </app-generic-header>
  </div>
  <div class="header"></div>
  <div class="bottom"></div>

  <div class="main-container">

    <div *ngIf="transactionList && transactionList.length>0" class="transaction-list">
      <ion-card *ngFor="let transaction of transactionList">
        <div [ngClass]="direction =='rtl' ? 'date_ar' :'date'" >{{getDate(transaction.REQUEST_DATE)}}</div>
        <ion-label class="ion-text-wrap">
          <ion-text color="primary">
           <div>
            <p class="display-created" >{{'transaction, request-id' | translate}}</p> 
            <P class="inline-display">
              {{transaction.REQUEST_ID}}
            </P>
          </div>
            <p class="display-created" >{{'transaction, phase' | translate}}</p>
            <p class="display-created bold padding">{{transaction.CCP_PHASE}}</p>
          </ion-text>
         
          <ion-text color="secondary">
            <div class="name-container">
            <p class="color-black display-inline">{{'transaction,program-name' | translate}}</p>
            <p class="display-inline red">{{transaction.CONCURRENT_PROGRAM_NAME}}</p>
          </div>
          </ion-text>

          
            <div class="output-container" >
            <p class="color-black display-inline">{{'transaction,output' | translate}}</p>
            <p class="display-inline" (click)="getCppOutput(transaction)" [ngClass]="transaction.CCP_PHASE =='Running'  || transaction.CCP_PHASE =='Pending'? 'disabled-icon' : '' " ><ion-icon name="download" class="download"></ion-icon></p>
            <p class="display-inline" (click)="refresh(transaction)" *ngIf="transaction.CCP_PHASE =='Running'  || transaction.CCP_PHASE =='Pending'"><ion-icon name="refresh" class="refresh" > </ion-icon></p>
          </div>
          
        </ion-label>
      </ion-card>
  
    </div>

</div>

</ion-content>
