<ion-header>
  <ion-toolbar class="header-toolbar-new">
    <nav-buttons></nav-buttons>
    <ion-title color="light">
      {{ts.trPK('worklistMain','ITEM_HIS')}}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="colorBG">

  <!-- <ion-card>
    <ion-card-header class="boxHdr">
      <div class="hrTitle">{{'worklistMain, actionHis' | translate}}</div>
    </ion-card-header>
    <ion-card-content> -->


  <!-- <ion-card class="cardContent"> -->
  <!-- <ion-card-header class="boxHdr">
                <div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
            </ion-card-header> -->
  <!-- <ion-card-content> -->
      
  <div class="noDataDiv" [hidden]="itemHistoryRes && itemHistoryRes.length >= 0">
    <p>{{ 'general, empty' | translate}}</p>
  </div>
  <ion-list class="itemeHistoryist" *ngIf="itemHistoryRes && itemHistoryRes.length >= 0 ">
    <div>
      <ion-grid class="gridItemReq">

        <ion-item class="itemReqContent" *ngFor="let itemHistory of itemHistoryRes; let i=index; ">
          <div class="itemReqDiv">

            <ion-row>
              <ion-col class="colItemReqHeader">
                <!-- <label for="">{{ts.trPK('worklistMain','description')}}
                                </label> -->
                <!-- </ion-col>
                            <ion-col> {{itemHistory.OU_NAME}}-->
                <label for="">{{i+1}}.  </label>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','operating_unit')}}
                </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.OU_NAME}} </ion-label>
              </ion-col>
              <!-- </ion-row>

                        <ion-row> -->

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','PONumber')}} </label>
                <br />
                <!-- </ion-col>
                                <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.PO_NUMBER}} </ion-label>
              </ion-col>
            </ion-row>
            <ion-row>

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','revision')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.REVISION_NUM}} </ion-label>
              </ion-col>
              <!-- </ion-row>
                        <ion-row> -->

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','CreationDate')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.CREATION_DATE}} </ion-label>

              </ion-col>
            </ion-row>
            <ion-row>


              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','Supplier')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.SUPPLIER}} </ion-label>
              </ion-col>

              <!-- </ion-row>
                        <ion-row> -->

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','Buyer')}} </label>
                <br />
                <!-- </ion-col>
                                <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.BUYER}} </ion-label>
              </ion-col>

            </ion-row>
            <ion-row>


              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','uom')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.UOM}} </ion-label>
              </ion-col>

              <!-- </ion-row>
                        <ion-row> -->

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','quantity_ordered')}} </label>
                <br />
                <!-- </ion-col>
                                <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.QUANTITY_ORDERED}} </ion-label>
              </ion-col>

            </ion-row>
            <ion-row>


              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','quantity_received')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.QUANTITY_RECEIVED}} </ion-label>
              </ion-col>

              <!-- </ion-row>
                        <ion-row> -->

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','bonus_quantity')}} </label>
                <br />
                <!-- </ion-col>
                                <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.BONUS_QUANTITY}} </ion-label>
              </ion-col>

            </ion-row>
            <ion-row>


              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','purchase_price')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.PURCHASE_PRICE}} </ion-label>
              </ion-col>

              <!-- </ion-row>
                        <ion-row> -->

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','discount')}} </label>
                <br />
                <!-- </ion-col>
                                <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.DISCOUNT_PERCENTAGE}} </ion-label>
              </ion-col>

            </ion-row>
            <ion-row>


              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','balance_quantity')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.BALANCE_QUANTITY}} </ion-label>
              </ion-col>

              <!-- </ion-row>
                        <ion-row> -->

              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','net_price')}} </label>
                <br />
                <!-- </ion-col>
                                <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.NET_PRICE}} </ion-label>
              </ion-col>

            </ion-row>
            <ion-row>


              <ion-col class="colItems">
                <label class="colItemReq" for="">{{ts.trPK('worklistMain','closure_status')}} </label>
                <br />
                <!-- </ion-col>
                            <ion-col> -->
                <ion-label class="labelValue" for="">{{itemHistory.CLOSED_CODE}} </ion-label>
              </ion-col>


            </ion-row>
          </div>

        </ion-item>

      </ion-grid>
    </div>
  </ion-list>
  <!-- </ion-card-content> 
             </ion-card> -->

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>