HelenaExpressApp/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="settings">

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


    <div class="page-content noselect">
        <div class="row justify-content-center">
            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
                <div class="list transparent media-list no-hairlines no-margin-top no-margin-bottom tablet-inset">
                    <ul>
                        {{#each settings}}
                        <li>
                            {{#if link}}
                            <div class="item-content item-link hapticbtn" 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 hapticbtn" 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 hapticbtn" 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>
        </div>
    </div>

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

</div>