<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="editnote">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link icon-only" onclick="router.back({force: true, ignoreCache: true})">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">{{title}}</div>
        </div>
    </div>

    <div class="fab fab-extended fab-right-bottom">
        <a id="savenotebtn" data-noteid="{{noteid}}">
            <i class="icon material-icons">save</i>
            <div class="fab-text">Save</div>
        </a>
    </div>

    <div class="page-content page-content-fab-pad">

        <div class="list no-margin-top no-hairlines">
            <ul>
                <li class="item-divider">Address</li>
                <li class="item-content item-input">
                    <div class="item-inner">
                        <div class="item-title item-label">Number</div>
                        <div class="item-input-wrap">
                            <input type="number" value="{{note.number}}" name="number" id="notenumberinput" placeholder="1234" autocomplete="off" autocorrect="off" autocapitalize="off">
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
                <li class="item-content item-input">
                    <div class="item-inner">
                        <div class="item-title item-label">Street</div>
                        <div class="item-input-wrap">
                            <input type="text" value="{{note.street}}" name="street" id="notestreetinput" placeholder="Road Dr" autocomplete="off" autocorrect="off">
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row justify-content-stretch">
                        <div class="col-50 item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">ZIP</div>
                                <div class="item-input-wrap">
                                    <input type="number" value="{{note.zipcode}}" name="zipcode" id="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
                                </div>
                            </div>
                        </div>
                        <div class="col-50 item-content item-input no-padding-left">
                            <div class="item-inner no-padding-right">
                                <div class="item-title item-label">Route</div>
                                <div class="item-input-wrap">
                                    <input type="text" value="{{note.route}}" name="route" id="route" placeholder="C999" value="" autocomplete="off" autocorrect="off" maxlength="4" pattern="^[CRHG][0-9]{3}$" >
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="item-divider">Options</li>
                {{#each toggles}}
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">
                            {{name}}
                        </div>
                        <div class="item-after">
                            <label class="toggle toggle-init">
                                <input class="note-toggle" type="checkbox" data-id="{{id}}" {{#if checked}}checked="checked"{{/if}}>
                                       <span class="toggle-icon"></span>
                            </label>
                        </div>
                    </div>
                </li>
                {{/each}}

                <li class="item-divider">Notes</li>
                <li class="item-content item-input">
                    <div class="item-inner">
                        <div class="item-input-wrap">
                            <textarea id="notes">{{note.notes}}</textarea>
                            <span class="input-clear-button"></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>