<div class="container-fuild bg-white">
    <div class="container py-5">
        <mat-card class="w-100" style="overflow: hidden">
            <table class="table">
                <thead>
                <tr>
                    <th>No.</th>
                    <th>Item</th>
                    <th>Quantity</th>
                    <th>Cost</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of app.cart; let i = index">
                    <td>{{i + 1}}</td>
                    <td>
                        <a [routerLink]="['/products', item.item]">{{item.item}}</a>
                    </td>
                    <td>{{item.quantity}}</td>
                    <td>{{item.currency}} {{item.price | currency}}</td>
                    <td (click)="app.cartRemove(i)" style="width: 50px">
                        <button mat-icon-button>
                            <mat-icon>delete</mat-icon>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div id="paypal-button" class="float-right mt-3"></div>
        </mat-card>
    </div>
</div>
