<div *tdLoading="'invoice'">
  <form *ngIf="invoice" [formGroup]="invoiceForm" (ngSubmit)="save()">
    <md-card>
      <md-card-header>Edytuj fakturę</md-card-header>
      <md-card-content>
        <md-input-container>
          <input name="service" mdInput type="text" placeholder="Usługa"
     formControlName="service">
          <md-error *ngIf="invoiceForm.get('service').touched && invoiceForm.
     get('service').invalid">
            Usługa jest wymagana
          </md-error>
        </md-input-container>
        <md-input-container>
          <input mdInput [mdDatepicker]="picker" placeholder="Wybierz datę"
     formControlName="date">
          <button type="button" mdSuffix [mdDatepickerToggle]="picker"></button>
          <md-error *ngIf="invoiceForm.get('date').touched && invoiceForm.
     get('date').invalid">
            Data jest wymagana
          </md-error>
        </md-input-container>
        <md-datepicker #picker></md-datepicker>
        <app-hours-control formControlName="hours"></app-hours-control>
        <md-input-container>
          <input name="rate" mdInput type="number" placeholder="Stawka"
     formControlName="rate">
          <md-error *ngIf="invoiceForm.get('rate').touched && invoiceForm.
     get('rate').invalid">
            Stawka godzinowa jest wymagana
          </md-error>
        </md-input-container>
        <div>
          <md-select name="customerId" placeholder="Klient"
     formControlName="customerId">
            <md-option [value]="customer.id" *ngFor="let customer of
     customers">{{customer?.name}}</md-option>
          </md-select>
        </div>
        <div class="toggler">
          <md-slide-toggle formControlName="paid">Zapłacono</md-slide-toggle>
        </div>
        <div class="total">
          Suma: {{total | currency:'USD':true:'.2'}}
        </div>
      </md-card-content>
      <md-card-actions>
        <button type="button" md-button (click)="delete()" *ngIf="invoice.
     id">Usuń</button>
        <button type="button" md-button (click)="cancel()">Anuluj</button>
        <button type="submit" md-raised-button color="primary"
     [disabled]="invoiceForm.invalid">Zapisz</button>
      </md-card-actions>
    </md-card>
  </form>
</div>
