<div *tdLoading="'invoice'">
  <form *ngIf="invoice">
    <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">
        </md-input-container>
        <md-input-container>
          <input mdInput [mdDatepicker]="picker" placeholder="Wybierz datę">
          <button type="button" mdSuffix [mdDatepickerToggle]="picker"></button>
        </md-input-container>
        <md-datepicker #picker></md-datepicker>
        <md-input-container>
          <input name="hours" mdInput type="number" placeholder="Godziny">
        </md-input-container>
        <md-input-container>
          <input name="rate" mdInput type="number" placeholder="Stawka">
        </md-input-container>
        <div>
          <md-select name="customerId" placeholder="Klient">
            <md-option [value]="customer.id" *ngFor="let customer of customers">{{customer?.name}}</md-option>
          </md-select>
        </div>
        <div class="toggler">
          <md-slide-toggle>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>Usuń</button>
        <button type="button" md-button>Anuluj</button>
        <button type="submit" md-raised-button color="primary">Zapisz</button>
      </md-card-actions>
    </md-card>
  </form>
</div>
