<style>
    input.ng-dirty.ng-invalid {
        border: 2px solid #ff0000
    }

    input.ng-dirty.ng-valid {
        border: 2px solid #6bc502
    }
</style>

<div class="col-xs-4">
    <form novalidate [formGroup]="form" (ngSubmit)="submitForm(form)">
        <div class="form-group" *ngFor="let control of form.productControls">
            <label>{{control.label}}</label>
            <input class="form-control" [(ngModel)]="newProduct[control.modelProperty]" name="{{control.modelProperty}}" formControlName="{{control.modelProperty}}"
            />
            <ul class="text-danger list-unstyled" *ngIf="(formSubmitted || control.dirty) && !control.valid">
                <li *ngFor="let error of control.getValidationMessages()">
                    {{error}}
                </li>
            </ul>
        </div>
        <button class="btn btn-primary" type="submit" [disabled]="formSubmitted && !form.valid" [class.btn-secondary]="formSubmitted && !form.valid">
            Dodaj
        </button>
    </form>
</div>
<div class="col-xs-8">
    <div class="checkbox">
        <label>
            <input type="checkbox" [(ngModel)]="showTable" /> Pokaż tabelę
        </label>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox" [(ngModel)]="darkColor" />
            Ciemny kolor komórki
        </label>
    </div>

    <table *paIf="showTable" [paCellDarkColor]="darkColor"
            class="table table-sm table-bordered table-striped">
        <tr><th></th><th>Produkt</th><th>Kategoria</th><th>Cena</th><th></th></tr>
        <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-xs-center">
                <button class="btn btn-danger btn-sm" (click)="deleteProduct(i)">
                    Usuń
                </button>
            </td>
        </tr>
    </table>


</div>
