<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{extName}}</title>
    <link rel="stylesheet" type="text/css" href="lib/pure/forms-nr-min.css">
    <link rel="stylesheet" type="text/css" href="lib/jsTabs/tabs.css">
    <link rel="stylesheet" type="text/css" href="css/options.css">    
</head>
<body>

<div id=message_place>
    <span id="error">{{o_error}}</span>
    <span id="success">{{o_saved}}</span>
</div>

<div id="page">
    <header>
        <img src="img/ext_icons/icon-48.png" title="{{extDescr}}" width="48" height="48">
        <strong>{{extName}}</strong>
    </header>

    <section id="main_tabs" class="tabs">
        <ul class="tabs_nav">
            <li><a href="#main">{{o_tabs_main}}</a></li>
            <!--<li><a href="#help">{{o_tabs_help}}</a></li>-->
        </ul>

        <div class="tabs_content">

            <div id="main">

                <form class="pure-form pure-form-aligned">
                    <fieldset>
                        
                        <!-- <div class="pure-control-group">
                            <label>{{o_storage_area}}</label>
                            <select id="o_storage_area">
                                <option value="sync">{{o_storage_area_sync}}</option>
                                <option value="local">{{o_storage_area_local}}</option>
                            </select>
                        </div> -->
                        
                        <div class="pure-control-group">
                            <label>{{o_fontsize}}</label>
                            <select data-storage="o_fontsize">
                                <option value="12">12</option>
                                <option value="13">13</option>
                            </select>
                        </div>

                        <div class="pure-controls">
                            <label>
                                <input type="checkbox" data-storage="o_show_other_devices"/>{{o_show_other_devices}}
                            </label>
                        </div>

                        <div class="pure-control-group">
                            <label>{{o_hotkeys}}</label>
                            <button id="o_hotkeys_settings_btn">{{o_hotkeys_settings}}</button>
                        </div>

                    </fieldset>

                    <fieldset>
                        <legend>{{o_search}}</legend>

                        <div class="pure-controls">
                            <label>
                                <input type="checkbox" data-storage="o_search_urls"/>{{o_search_urls}}
                            </label>
                        </div>

                        <div class="pure-controls">
                            <label>
                                <input type="checkbox" id="o_history_enabled" data-storage="o_history_enabled"/>{{o_history_enabled}}
                            </label>
                        </div>

                        <div class="pure-control-group">
                            <label>{{o_history_query_length}}</label>
                            <input type="number" data-storage="o_history_query_length" />
                        </div>
                    </fieldset>

                </form>

            </div>

            <!--
            <div id="help">
            </div>
            -->

        </div>
    </section>

    <!--
    <footer>
        <p class="copyright">by <a href="#" target="_blank">...</a></p>
    </footer>
    -->
</div>

<script src="js/helpers/localizer.js"></script>
<script src="lib/jsTabs/tabs.js"></script>

<script src="js/storage.js"></script>
<script src="js/helpers/quick_options.js"></script>
<script src="js/options.js"></script>

</body>
</html>