{{#if isLoading}}<div data-template-id="loading-template"></div>{{/if}}

{{#if hasError}}<div data-template-id="error-template"></div>{{/if}}

{{#if isLoaded}}

<div class="row">

<div class="col">

<!--

For this example css classes ".hide-after-form-load" and ".show-after-form-load"

are not needed however they are displayed here for reference as they are usefull

when loading large and complex forms. For example if a form has a number of

child/related/line-item tables with 100's of controls with some being jQuery plugins

these classes can be used to make the form appear nice while it is loading.

-->

<div class="hide-after-form-load"><div data-template-id="loading-template"></div></div>

<form hidden class="show-after-form-load">

<div class="form-group">

<!--

All <input>, <select>, and <textarea> starting with [id="field-*"]

will be loaded from the download JSON Data [data-url] and when the

[Save] button is clicked they will be used to generate a model object

for submitting to the web service defined in [data-save-url].

Additionally [data-type="float|int"] can be used for validating

and casting prop data types when the record to save is generated.

The standard <input type="number"> could be used to avoid letters

and symbols however for this app a standard <input> is used for

the numeric column to provide an example of validation.

-->

{{#if newRecord}}

<label for="field-id">(New Record)</label>

<input class="form-control" id="field-id" data-type="int" type="hidden" value="">

{{else}}

<label for="field-id">Id</label>

<input class="form-control" id="field-id" data-type="int" readonly value="">

{{/if}}

</div>

<div class="form-group">

<label for="field-label">Label</label>

<input class="form-control" id="field-label" value="Default Value" required>

</div>

<div class="form-group">

<label for="field-num_value">Number</label>

<input class="form-control" id="field-num_value" data-type="float">

</div>

<div class="form-group">

<label for="field-category">Category</label>

<select class="form-control" id="field-category">

<option></option>

{{#each categories}}

<option>{{this}}</option>

{{/each}}

</select>

</div>

<div class="form-group">

<label for="field-date_value">Date</label>

<input class="form-control datepicker" id="field-date_value">

</div>

<div class="form-group">

<label for="field-active">Active</label>

<input class="form-control" id="field-active" type="checkbox" checked>

</div>

<div class="form-group">

<label for="field-comment">Comment</label>

<textarea class="form-control" rows="3" id="field-comment"></textarea>

</div>

<!--

Selectors for buttons [Save and Delete] along with info messages can be set

from the route script <script type="text/x-template" data-engine="handlebars">

that defined the entry form. For this app the default selectors are used:

data-save-button-selector=".btn-save"

data-delete-button-selector=".btn-delete"

data-info-selector=".info-message"

data-error-selector=".error-message"

data-error-list-selector=".error-list"

-->

<div class="form-group alert alert-info info-message"></div>

<div class="form-group alert alert-danger error-message"></div>

<ul class="form-group alert alert-danger error-list"></ul>

<div class="form-group">

<button type="button" class="btn btn-primary btn-save">Save</button>

<button type="button" class="btn btn-danger btn-delete">Delete</button>

</div>

</form>

</div>

</div>

{{/if}}