<ng-container *ngIf="items.length > 0">
  <div class="table-responsive">
    <table class="table table-striped table-hover table-light">
      <thead>
        <tr>
          <th scope="col">
            <div class="p-2 px-3 text-uppercase">Product</div>
          </th>
          <th class="text-center" scope="col">
            <div class="p-2 px-3 text-uppercase">Price</div>
          </th>
          <th class="text-center" scope="col">
            <div class="p-2 px-3 text-uppercase">quantity</div>
          </th>
          <th class="text-center" scope="col">
            <div class="p-2 px-3 text-uppercase">Total</div>
          </th>
          <th *ngIf="isBasket" class="text-center" scope="col">
            <div class="p-2 px-3 text-uppercase">Remove</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of items">
          <th scope="row">
            <div class="p-2">
              <img class="img-fluid" style="max-height: 50px" src="{{item.pictureUrl}}" alt="{{item.productName}}">
              <div class="ms-3 d-inline-block align-middle">
                <h5 class="mb-0">
                  <a class="text-dark" routerLink="/shop/{{item.id || item.productId }}">{{item.productName}}</a>
                </h5>
                <span *ngIf="item.type" class="text-muted font-weight-normal font-italic d-block">Type: {{item.type}}</span>
              </div>
            </div>
          </th>
          <td class="align-middle text-center">{{item.price | currency}}</td>
          <td class="align-middle text-center">
            <div class="d-flex-align-items-center">
              <i *ngIf="isBasket" (click)="decrementItemQuantity(item)" class="fa fa-minus-circle text-warning me-2" style="cursor: pointer;"></i>
              <span class="font-weight-bold">{{item.quantity}}</span>
              <i *ngIf="isBasket" (click)="incrementItemQuantity(item)" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer;"></i>
            </div>
          </td>
          <td class="align-middle text-center">{{item.price * item.quantity | currency}}</td>
          <td *ngIf="isBasket" class="align-middle text-center">
            <a class="text-danger" style="cursor: pointer">
              <i (click)="removeBasketItem(item)" class="fa fa-trash" style="font-size: 2em"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</ng-container>
