<ngb-alert [dismissible]="false" type="danger" *ngIf="error">
  <img src="/src/static/svg/red-triangle.svg" alt="" width="16" height="" class="mr-2">
  <h6 class="mr-2 d-inline font-weight-bold">Error while processing request: {{error}}</h6>
</ngb-alert>

<table class="table table-sm table-bordered table-hover">
  <thead class="thead-light">
  <tr>
    <th>Product ID</th>
    <th>Transaction ID</th>
    <th>Store</th>
    <th style="width: 180px">Purchase Time</th>
    <th style="width: 180px">Create Time</th>
  </tr>
  </thead>
  <tbody>
  <ng-template ngFor let-i="index" let-p   [ngForOf]="purchases">
    <tr>
      <td>
        <div class="arrow" (click)="purchasesRowsOpen[i]=!purchasesRowsOpen[i];">
          <div class="arrow-right" *ngIf="!purchasesRowsOpen[i]"></div>
          <div class="arrow-down" *ngIf="purchasesRowsOpen[i]"></div>
        </div>
        {{p.product_id}}
      </td>
      <td>{{p.transaction_id}}</td>
      <td>{{getStoreText(p.store)}}</td>
      <td>{{p.purchase_time}}</td>
      <td>{{p.create_time}}</td>
    </tr>
    <tr *ngIf="purchasesRowsOpen[i]" class="open-row">
      <td colspan="7">
        <div class="p-2">
          <div><small><b>Provider Response</b></small></div>
          <div>
            <pre class="pre-wrap m-0 p-0"><small>{{p.provider_response}}</small></pre>
          </div>
        </div>
      </td>
    </tr>
  </ng-template>
  <tr *ngIf="purchases.length === 0"><td colspan="5" class="text-muted">No purchases were found.</td></tr>
  </tbody>
</table>

<div *ngIf="nextCursor" class="col-12 text-center">
  <button (click)="loadOlderPurchases()" class="btn btn-outline-primary mt-3">Load more entries</button>
</div>

