<ng-container *ngIf="loading">
  <ion-list class="skeletonList">
    <ion-item *ngFor="let i of [1,2,3,4,5,6,7]">
      <ion-label>
        <ion-skeleton-text animated style="height: 25px; width: 60%;"></ion-skeleton-text>
        <ion-skeleton-text animated style="height: 20px; width: 45%;"></ion-skeleton-text>
        <ion-skeleton-text animated style="width: 100%; height: 20px;"></ion-skeleton-text>
      </ion-label>
    </ion-item>
  </ion-list>
</ng-container>
<ng-container *ngIf="!loading && list.length">
  <ion-list class="ion-padding-horizontal">
    <ion-item-sliding *ngFor="let item of list">
      <ion-item class="ion-no-padding __white" detail="true" (click)="onBtnTrigger('Detail', item?.invoice_id)">
        <ion-label>
          <p>{{item.subject.title}}</p>
          <ion-row class="smallText">
            <p class="ion-float-left marginInlineEnd16">{{item.milestone_price | currency:'USD':'symbol':'1.2-2'}}</p>
            <p class="ion-float-left _medium">{{item.subject.milestone_title}}</p>
          </ion-row>
          <ion-row class="smallText">
            <ion-col class="ion-no-padding ion-align-self-center _medium" size="4">{{item.date}}</ion-col>
            <ion-col class="ion-no-padding ion-align-self-center" size="4"><ion-text color="danger">{{item.due_date}}</ion-text></ion-col>
            <ion-col class="ion-no-padding ion-align-self-center ion-text-right" size="4">
              <ion-chip class="ion-no-margin customChip xSmallText _white" [ngStyle]="{'background': 'var(--'+item.status_class+')'}">{{item.status}}</ion-chip>
            </ion-col>
          </ion-row>
        </ion-label>
      </ion-item>
      <ng-container *ngIf="item.status=='Pending'">
      <ion-item-options side="end">
        <ion-item-option class="_bg_primary" (click)="onBtnTrigger('mark_as_paid', item?.invoice_id)">Approve</ion-item-option>
        <ion-item-option class="_bg_success" (click)="onBtnTrigger('remind', item?.invoice_id)">Remind</ion-item-option>
      </ion-item-options>
      </ng-container>
    </ion-item-sliding>
  </ion-list>
  <ion-infinite-scroll threshold="100px" (ionInfinite)="onBtnTrigger('infiniteLoading', $event)">
    <ion-infinite-scroll-content loadingText="Hold on, loading content"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ng-container>
<ng-container *ngIf="!loading && !list.length">
  <div class="noDataDiv">
    <ion-icon color="primary" [src]="helper._IMG.ATM" mode="ios"></ion-icon>
    <p>There are no invoices yet.</p>
  </div>
</ng-container>
