cowbell/splittypie

{{#mobile-toolbar}}
  {{back-button}}
  <span class="navbar-brand">{{title}}</span>
  <button type="submit" {{action "save"}} disabled={{event.isSaving}} class="btn btn-link save-event navbar-btn">
    {{saveButtonText}}
  </button>
{{/mobile-toolbar}}

<h4 class="hidden-xs">{{title}}</h4>

<form>
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-group {{if transaction.formErrors.payer.message "has-error"}}">
        <label class="control-label">Who paid?</label>
        {{my-select
          class="transaction-payer"
          options=users
          selected=transaction.payer
          prompt="Select payer..."
          optionValuePath="id"
          optionLabelPath="name"
        }}
        <div class="help-block with-errors">
          {{transaction.formErrors.payer.message}}
        </div>
      </div>

      <div class="form-group {{if transaction.formErrors.name.message "has-error"}}">
        <label class="control-label">For what?</label>
        {{input value=transaction.name class="form-control transaction-name" placeholder="Example: Tickets to museum"}}
        <div class="help-block with-errors">
          {{transaction.formErrors.name.message}}
        </div>
      </div>

      <div class="form-group {{if transaction.formErrors.amount.message "has-error"}}">
        <label class="control-label">How much?</label>
        <div class="input-group">
          <span class="input-group-addon">{{transaction.event.currency.code}}</span>
          {{input value=transaction.amount type="number" class="form-control transaction-amount" placeholder="Amount"}}
        </div>
        <div class="help-block with-errors">
          {{transaction.formErrors.amount.message}}
        </div>
      </div>

      <div class="form-group {{if transaction.formErrors.date.message "has-error"}}">
        <label class="control-label">When? (this is optional)</label>
        {{date-picker value=transaction.date className="transaction-date" min="2000-01-01" max=maxDate}}
        <div class="help-block with-errors">
          {{transaction.formErrors.date.message}}
        </div>
      </div>

      <div class="form-group {{if transaction.formErrors.participants.message "has-error"}}">
        <label class="control-label">Divide the cost among:</label>
        {{my-checkbox-list
          class="transaction-participants"
          content=users
          selection=transaction.participants
          optionValuePath="id"
          optionLabelPath="name"
        }}
        <div class="help-block with-errors">
          {{transaction.formErrors.participants.message}}
        </div>
      </div>

      {{#unless transaction.isNew}}
        <div class="form-group">
          <label class="control-label">Other options:</label>
          <div class="input-group">
            <button {{action "delete"}} class="btn btn-danger delete-transaction">Delete Transaction</button>
          </div>
        </div>
      {{/unless}}
    </div>
  </div>

  <div class="form-group hidden-xs">
    <button {{action "save"}} type="submit" disabled={{transaction.isSaving}} class="btn btn-success save-transaction">
      {{saveButtonText}}
    </button>
    or
    {{#back-button}}
      Cancel
    {{/back-button}}
  </div>
</form>