extends layout
block head
    link(href="css/timers.css", rel="stylesheet")
    script(src="/socket.io/socket.io.js")
    script(src="/js/ui.js")
    script(src="/js/preferences.js")
    
block content
    include includes/headline
    .container#flashcontainer
        include includes/flash
    .container.wrapper
        .row
            .col-lg-12.col-md-12.col-xs-12
                h1(style="border-bottom: 1px solid #aaa;padding:5px;") Preferences 
                .row 
                    .col-lg-12.col-md-12.col-xs-12
                        .alert.bg-info
                            p
                                |Changing these values overrides the file config.js in the module's config-directory. On some systems this action might require root rights.
                            p
                                span If you get an access error when clicking the save button, start the app with 
                                code sudo timers3000
                                span  and try again.
                                
                .row(style="margin-top:3em;padding-bottom:3em;border-bottom: 1px solid #ccc;")
                    .col-lg-2.col-md-2.col-xs-2(style="margin-top:0.5em;")
                        span 
                            b Databasepath: 
                    .col-lg-5.col-md-5.col-xs-5
                        pre 
                            input(class='col-lg-12 col-md-12 col-xs-12 ui-input-text' , id="dbPathInput" value=dbpath, onBlur="", onKeyPress="if(event.keyCode==13)this.blur();")
                    .col-lg-1.col-md-1.col-xs-1
                        button.btn.btn-success(onClick="changeDbPath();") Save


                .row(style="margin-top:3em;padding-bottom:3em;border-bottom: 1px solid #ccc;")
                    .col-lg-2.col-md-2.col-xs-2(style="margin-top:0.5em;")
                        span 
                            b Sort timers by: 
                    .col-lg-5.col-md-5.col-xs-5
                        .radio
                            label
                                input(type="radio", name="sortingKeys", id="random-radio", value="random", checked = sortingkey=='ID')
                                | Id (Random)
                        .radio
                            label
                                input(type="radio", name="sortingKeys", id="freq-radio", value="freq", checked = sortingkey=='LTS')
                                | Last time started
                        .radio
                            label
                                input(type="radio", name="sortingKeys", id="time-radio", value="time", checked = sortingkey=='TIME')
                                | Time
                        .radio
                            label
                                input(type="radio", name="sortingKeys", id="name-radio", value="name", checked = sortingkey=='NAME')
                                | Name

                    .col-lg-1.col-md-1.col-xs-1
                        button.btn.btn-success(onClick="changeSortingKey();") Save

                .row.row(style="margin-top:3em;padding-bottom:3em;border-bottom: 1px solid #ccc;")
                    .col-lg-2.col-md-2.col-xs-2(style="margin-top:0.5em;")
                        span 
                            b Port: 
                    .col-lg-5.col-md-5.col-xs-5
                        pre 
                            input(class='col-lg-12 col-md-12 col-xs-12 ui-input-text' , id="portInput" value=port, onBlur="", onKeyPress="if(event.keyCode==13)this.blur();")
                    .col-lg-1.col-md-1.col-xs-1
                        button.btn.btn-success(onClick="changePort();") Save
        
        a(class="btn btn-warning pull-right timer-ui-btn disabled btn-disabled" id="statusSpinner")
            i(class="fa fa-refresh fa-xs")