NotePostApp/www/pages/settings.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="prefs">

    <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">Settings</div>
        </div>
    </div>


    <div class="page-content">
        <div class="list media-list no-margin-top no-hairlines tablet-inset">
            <ul>
                {{#each settings}}
                <li>
                    {{#if link}}
                    <div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}">
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title">{{title}}</div>
                            </div>
                            <div class="item-text">{{text}}</div>
                        </div>
                    </div>
                    {{else}}
                    {{#if toggle}}
                    <div class="item-content" data-setting="{{setting}}">
                        <div class="item-inner">
                            <div style="display: flex; justify-content: between;">
                                <div class="item-title">
                                    {{title}}
                                </div>
                                <div class="item-after" onclick="{{onclick}}">
                                    <label class="toggle toggle-init">
                                        <input type="checkbox" {{#if checked}}checked{{/if}}>
                                               <span class="toggle-icon"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="item-text">{{text}}</div>
                        </div>
                    </div>
                    {{else}}
                    {{#if slider}}
                    <div class="item-content" data-setting="{{setting}}">
                        <div class="item-inner">
                            <div class="item-title" style="background-color: rgba(0,0,0,0);">
                                {{title}}
                            </div>
                            <div class="item-subtitle padding-horizontal padding-top">
                                <div class="range-slider range-slider-init padding-top margin-top" data-label="true">
                                    <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}">
                                </div>
                            </div>
                        </div>
                    </div>
                    {{else}}
                    {{#if select}}
                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-setting="{{setting}}">
                        <select>
                            {{#each options}}
                            <option value="{{value}}"{{#if selected}} selected{{/if}}>{{label}}</option>
                            {{/each}}
                        </select>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title">{{title}}</div>
                            </div>
                        </div>
                    </a>
                    {{else}}
                    <div class="item-content" data-setting="{{setting}}" onclick="{{onclick}}">
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title">{{title}}</div>
                            </div>
                            <div class="item-text">{{text}}</div>
                        </div>
                    </div>
                    {{/if}}
                    {{/if}}
                    {{/if}}
                    {{/if}}
                </li>
                {{/each}}
            </ul>
        </div>
    </div>

    <script src="js/settings.js"></script>

</div>