<div class="margin-333">
    <table class="cart-table default-bg mat-elevation-z1" 
    *ngIf="cart.length" 
    [@animate]="{value:'*',params:{delay: '100ms', x:'-50px'}}">
      <thead>
        <tr>
          <th class="text-muted">Remove</th>
          <th class="text-muted">Thumbnail</th>
          <th class="text-muted">Product</th>
          <th class="text-muted">Price</th>
          <th class="text-muted">Quantity</th>
          <th class="text-muted">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of cart">
          <td><button mat-icon-button color="warn" (click)="removeProduct(item)"><mat-icon>close</mat-icon></button> </td>
          <td><img class="cart-thumbnail" [src]="item.product.photo" style="cursor: pointer" [routerLink]="['/shop/products', item.product._id]"></td>
          <td><span style="cursor: pointer" [routerLink]="['/shop/products', item.product._id]">{{item.product.name}}</span></td>
          <td>{{item.product.price.sale | currency}}</td>
          <td><input class="quantity-input default-bg" id="quantity" min="1" name="quantity" type="number" (change)="onQuantityChange()" [(ngModel)]="item.data.quantity"></td>
          <td>{{item.product.price.sale * item.data.quantity | currency}}</td>
        </tr>
      </tbody>
    </table>
    
    <div fxLayout="row" fxLayout.lt-md="column" *ngIf="cart.length" [@animate]="{value:'*',params:{delay: '100ms', x:'50px'}}">
      <div fxFlex></div>
      <div fxFlex="25">
        <mat-card class="m-0">
          <div class="line mb-16">
            <span class="fw-500">Subtotal:</span>
            <span fxFlex></span>
            <span class="text-muted">${{subTotal}}</span>
          </div>
          <div class="line mb-16">
            <span class="fw-500">VAT:</span>
            <span fxFlex></span>
            <span class="text-muted">{{vat}}%</span>
          </div>
          <mat-divider class=""></mat-divider>
          <div class="line mb-16 pt-16">
            <span class="fw-500">Total:</span>
            <span fxFlex></span>
            <span class="text-muted">${{total}}</span>
          </div>
          <mat-card-actions>
            <span fxFlex></span>
            <button mat-raised-button color="primary" routerLink="/shop">Back To Shop</button>
            <button mat-raised-button color="warn" routerLink="/shop/checkout">Checkout</button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
    <div *ngIf="!cart.length" [@animate]="{value:'*',params:{delay: '100ms', y:'-50px'}}">
      <mat-card class="text-center">
        <p>Your cart is empty</p>
        <button mat-raised-button color="accent" routerLink="/shop">Go Back To Shop</button>
      </mat-card>
    </div>
</div>
