<ion-header>
    <ion-toolbar  class="header-toolbar">
        <ion-buttons slot="start">
          <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
        </ion-buttons>
        <ion-title color="light" >{{ts.trPK('accrualBalances','accrualBalances')}}</ion-title>
      </ion-toolbar>
</ion-header>
<ion-content padding>
    <div  class="tipsPadding" [innerHTML]="ts.trPK('accrualBalances','tip')"></div>
    <ion-item>
        <ion-label>{{ts.trPK('accrualBalances','selectDate')}}</ion-label>
        <ion-datetime [(ngModel)]="Sdate" min="1900" max="2100" displayFormat="MMM/DD/YYYY " placeholder="MM/DD/YYYY"
          (ionChange)="getAccrualBalance()"></ion-datetime>
        
      </ion-item>

      <ul>
          <li *ngFor="let data of balance; let i=index">
      <ion-card  no-shadow text-center  >
          <div class="content-line accuralBox">
            <div class="accuralImage"><img src="../assets/imgs/accrual.png" /></div>
            <div class="accuralTxt"> <p class="balanceVal boldTxt"> {{data.ACCRUAL_NET_ENTITLEMENT}} </p>
              
              <p class="balanceTxt">{{data.ACCURAL_PLAN_NAME}}</p></div>
             
         </div>
         </ion-card>
         </li>
      </ul>
</ion-content>