PackageHelper/www/pages/myroute.html

<!-- 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="myroute">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link icon-only back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">Route Notes</div>
            <div class="right">
                <a class="link icon-only searchbar-enable" data-searchbar=".notes-list-searchbar">
                    <i class="icon material-icons">search</i>
                </a>
            </div>
            <form class="searchbar searchbar-expandable notes-list-searchbar">
                <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                        <input type="search" placeholder="Search"/>
                        <i class="searchbar-icon"></i>
                        <span class="input-clear-button"></span>
                    </div>
                    <span class="searchbar-disable-button">Cancel</span>
                </div>
            </form>
        </div>
    </div>

    <div class="fab fab-right-bottom">
        <a href="/myroute/addnote">
            <i class="icon material-icons">add</i>
        </a>
    </div>

    <div class="page-content page-content-fab-pad">
        <div class="block-title">Notes</div>
        {{#if notes}}
        <div class="list accordion-list" id="noteslist">
            <ul>
                {{#each notes}}
                <li class="accordion-item route-note" data-noteid="{{id}}">
                    <a href="#" class="item-content item-link">
                        <div class="item-inner">
                            <div class="item-title">{{number}} {{street}}</div>
                        </div>
                    </a>
                    <div class="accordion-item-content">
                        <div class="block">
                            <a class="button button-small button-outline editnotebtn display-inline-block" data-noteid="{{id}}" href="#"><i class="fas fa-pencil-alt fa-fw"></i> Edit</a>
                            <a class="button button-small button-outline deletenotebtn display-inline-block color-red" data-noteid="{{id}}" href="#"><i class="fas fa-trash fa-fw"></i> Delete</a>
                            {{#if notes}}
                            <p>{{newlinestobr notes}}</p>
                            {{/if}}
                            <div class="margin-vertical-half">
                                <ul>
                                    {{#each toggles}}
                                    {{#if this}}
                                    <li><i class="{{notetoggleicon @key}}"></i> {{notetogglename @key}}</li>
                                    {{/if}}
                                    {{/each}}
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                {{/each}}
            </ul>
        </div>
        {{else}}
        <div class="block text-align-center">
            <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/note-dashed.svg" class="margin-vertical" />
            <div class="margin-top">Press <i class="material-icons">add</i> to add a note.</div>
        </div>
        {{/if}}
    </div>
</div>