<div class="ui vertical stripe segment">
    {{#if notice.hasNotice }}
    <div class="ui segment container">
        {{#if notice.userError }}
        <div class="ui error message">
            <!-- <div class="header">There was a problem logging you in.</div> -->
            <ul class="list">
                {{#each notice.userError }}
                <li>{{ this }}</li>
                {{/each }}
            </ul>
        </div>
        {{/if }}
    </div>
    {{/if }}

    <div class="ui segment container">
        <a class="ui button" href="/clerk"><i class="icon left arrow"></i> Back</a>
        <h4 class="ui medium header">Add Transaction</h4>

        <form class="ui form" method="{{ form.method }}" action="{{ form.action }}" onkeypress="return event.keyCode != 13;">
            <div class="inline field">
                <div class="ui checkbox">
                  <input tabindex="0" class="hidden" name="startBalance" type="checkbox" {{#if startBalance }}checked="{{ startBalance }}"{{/if }}>
                  <label>Balance Starting Point</label>
                </div>
            </div>
            <div class="field">
                <label>Actual Date</label>
                <!-- <p class="note">Leave blank if you do not remember original date.</p> -->
                <input name="date" placeholder="Select Date" type="date" value="{{ date }}"/>
            </div>
            <div class="field">
                <label>Cleared Account Date</label>
                <p class="note">Leave blank if has NOT cleared to account yet.</p>
                <input name="clearDate" placeholder="Select Date" type="date" value="{{ clearDate }}"/>
            </div>
            <div class="field">
                <label>Amount</label>
                <input name="amount" placeholder="Amount" type="number" step="any" value="{{ amount }}"/>
            </div>
            <div class="field">
                <label>Source</label>
                <input name="source" placeholder="Source" type="text" value="{{ source }}"/>
            </div>
            <div class="field">
                <label>Account</label>
                <select name="account" class="ui fluid search dropdown">
                    <option value="">Account...</option>

                    {{#each accountList }}
                    <option value="{{ @key }}" {{#if selected}}selected="{{ selected }}"{{/if }}>{{ name }}</option>
                    {{/each }}

                </select>
            </div>
            <div class="field">
                <label>Category</label>
                <select name="category" class="ui fluid search dropdown">
                    <option value="">Category...</option>

                    {{#each categoryList }}
                    <option value="{{ @key }}" {{#if selected}}selected="{{ selected }}"{{/if }}>{{ name }}</option>
                    {{/each }}

                </select>
            </div>
            <div class="field">
                <label>Tags</label>
                <select name="tagList" multiple="" class="ui fluid search dropdown">
                    <option value="">Tag...</option>

                    {{#each tagList }}
                    <option value="{{ @key }}" {{#if selected}}selected="{{ selected }}"{{/if }}>
                        {{#if name }}
                            {{ name }}
                        {{else }}
                            {{ keyToString @key }}
                        {{/if }}
                    </option>
                    {{/each }}

                </select>
            </div>
            <div class="field">
                <label>Sort Order</label>
                <input name="sortOrder" placeholder="Sort Order" type="number" value="{{ sortOrder }}"/>
            </div>
            <div class="field">
                <label>Notes</label>
                <textarea name="note">{{ note }}</textarea>
            </div>
            <div class="inline field">
                <div class="ui checkbox">
                    <input tabindex="0" name="addMore" class="hidden" type="checkbox">
                    <label>Add more on save</label>
                </div>
            </div>
            <button class="ui button green" type="submit">Save</button>
        </form>
    </div>
</div>
