<div class="row m-2">
    <div class="col-4">
        <form class="m-2" novalidate (ngSubmit)="submitForm()">
            <div class="form-group">
                <label>Produkt</label>
                <input class="form-control" name="name"
                    [(ngModel)]="newProduct.name" />
            </div>
            <div class="form-group">
                <label>Kategoria</label>
                <input class="form-control" name="category"
                    [(ngModel)]="newProduct.category" />
            </div>
            <div class="form-group">
                <label>Cena</label>
                <input class="form-control" name="price"
                    [(ngModel)]="newProduct.price" />
            </div>
            <button class="btn btn-primary" type="submit">Dodaj</button>
        </form>
    </div>
    <div class="col-8">

        <div class="checkbox">
            <label>
                <input type="checkbox" [(ngModel)]="darkColor" />
                Ciemny kolor komórki
            </label>
        </div>
    
        <table class="table table-sm table-bordered table-striped"
            [paCellDarkColor]="darkColor">
          <thead>
            <tr><th></th><th>Produkt</th><th>Kategoria</th><th>Cena</th><th></th></tr>
          </thead>
          <tbody>
            <tr *paFor="let item of getProducts(); let i = index; let odd = odd;
                    let even = even" [class.bg-info]="odd" [class.bg-warning]="even">
                <td style="vertical-align:middle">{{i + 1}}</td>
                <td style="vertical-align:middle">{{item.name}}</td>
                <td style="vertical-align:middle">{{item.category}}</td>
                <td style="vertical-align:middle">{{item.price}}</td>
                <td class="text-center">
                    <button class="btn btn-danger btn-sm" (click)="deleteProduct(item.id)">
                        Usuń
                    </button>
                </td>
              </tr>
          </tbody>
        </table>
    </div>
    
</div>
