<div class="navbar navbar-inverse bg-inverse">
    <a class="navbar-brand">SKLEP SPORTOWY</a>
</div>

<div class="m-a-1">
    <h2 class="text-xs-center">Koszyk</h2>
    <table class="table table-bordered table-striped p-a-1">
        <thead>
            <tr>
                <th>Ilość</th>
                <th>Produkt</th>
                <th class="text-xs-right">Cena</th>
                <th class="text-xs-right">Wartość</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngIf="cart.lines.length == 0">
                <td colspan="4" class="text-xs-center">
                    Koszyk jest pusty
                </td>
            </tr>
            <tr *ngFor="let line of cart.lines">
                <td>
                    <input type="number" class="form-control-sm"
                            style="width:5em"
                            [value]="line.quantity"
                            (change)="cart.updateQuantity(line.product,
                                $event.target.value)"/>
                </td>
                <td>{{line.product.name}}</td>
                <td class="text-xs-right">
                    {{line.product.price | currency:"zł":true:"2.2-2"}}
                </td>
                <td class="text-xs-right">
                    {{(line.lineTotal) | currency:"zł":true:"2.2-2" }}
                </td>
                <td class="text-xs-center">
                    <button class="btn btn-sm btn-danger"
                            (click)="cart.removeLine(line.product.id)">
                        Usuń
                    </button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" class="text-xs-right">Razem:</td>
                <td class="text-xs-right">
                    {{cart.cartPrice | currency:"zł":true:"2.2-2"}}
                </td>
            </tr>
        </tfoot>
    </table>
</div>
<div class="text-xs-center">
    <button class="btn btn-primary" routerLink="/store">Kontynuuj zakupy</button>
    <button class="btn btn-secondary" routerLink="/checkout"
            [disabled]="cart.lines.length == 0">
        Do kasy
    </button>
</div>
