<!-- form start -->
<form class="form-horizontal">
  <div class="box-body">
    <div class="form-group">
      <label for="inputCountry" class="col-sm-2 control-label">Product</label>
      <div class="col-sm-10">
        {{#power-select selected=product placeholder="Please, select product" searchField="name"
          options=products onchange=(action "setProduct") as |product| }}
          {{product.name}}
        {{/power-select}}
      </div>
    </div>
    <div class="form-group">
      <label for="inputQuantity" class="col-sm-2 control-label">Quantity</label>

      <div class="col-sm-10">
        {{input type="text" class="form-control" id="inputQuantity" placeholder="Quantity"
				value=model.quantity}}
      </div>
    </div>
    <div class="form-group">
      <label for="inputAmount" class="col-sm-2 control-label">Cost</label>

      <div class="col-sm-10">
        {{input type="text" class="form-control" id="inputAmount" placeholder="Amount"
				value=model.cost}}
      </div>
    </div>
    <div class="form-group">
      <label for="inputTotal" class="col-sm-2 control-label">Total</label>

      <div class="col-sm-10">
        {{input type="text" class="form-control" id="inputTotal" placeholder="Total"
				value=model.amount readonly=true}}
      </div>
    </div>

  </div>
  <!-- /.box-body -->
  <div class="box-footer">
    <button type="button" class="btn btn-primary {{if save.isRunning 'disabled'}}" onclick= {{perform save}}>{{if save.isRunning 'Saving' 'Save'}}</button>
    <button type="button" class="btn btn-default {{if cancel.isRunning 'disabled'}}"
      onclick= {{perform cancel}}>{{if cancel.isRunning 'Canceling' 'Cancel'}}</button>
    {{#if canDelete}}
      <button type="button" class="btn btn-info pull-right {{if delete.isRunning 'disabled'}}"
        onclick= {{perform delete}}>{{if delete.isRunning 'Deleting' 'Delete'}}</button>
    {{/if}}
  </div>
  <!-- /.box-footer -->
</form>