<div class="container-fluid">
    <div class="row">
      <div class="col bg-dark text-white">
        <a class="navbar-brand">SKLEP SPORTOWY</a>
      </div>
    </div>
    <div class="row">
      <div class="col mt-2">
        <h2 class="text-center">Koszyk</h2>
        <table class="table table-bordered table-striped p-2">
          <thead>
            <tr>
              <th>Ilość</th>
              <th>Produkt</th>
              <th class="text-right">Cena</th>
              <th class="text-right">Wartość</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngIf="cart.lines.length == 0">
              <td colspan="4" class="text-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-right">
                  {{line.product.price | currency:"PLN":"symbol":undefined:"pl-PL" }}
              </td>
              <td class="text-right">
                  {{(line.lineTotal) | currency:"PLN":"symbol":undefined:"pl-PL"  }}
              </td>
              <td class="text-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-right">Razem:</td>
              <td class="text-right">
                {{cart.cartPrice | currency:"PLN":"symbol":undefined:"pl-PL" }}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col">
      <div class="text-center">
        <button class="btn btn-primary m-1" routerLink="/store">
            Kontynuuj zakupy
        </button>
        <button class="btn btn-secondary m-1" routerLink="/checkout"
                [disabled]="cart.lines.length == 0 || !connected">
          {{  connected ?  'Do kasy' : 'Offline' }}
        </button>
      </div>
    </div>
  </div>
  