{{#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}}