extends layout
block head
    link(href="/css/timers.css", rel="stylesheet")
    link(href="/css/c3.css", rel="stylesheet")
    script(src="/socket.io/socket.io.js")
    script(src="/js/d3.min.js")
    script(src="/js/c3.min.js")
    script(src="/js/moment.min.js")
    script(src="/js/ui.js")
    script(src="/js/util.js")
    script(src="/js/stats.js")

    
block content
    .container(style="margin-left:30px;")
        .row
            #logo
                a(href="/")
                    i.fa.fa-arrow-left
                    |  Back
    .container(style="margin-left:30px;")
        .row
            if (typeof flash !== 'undefined')
                include includes/flash
    .container.wrapper(style="margin-left:10px;")
        if (typeof timer !== 'undefined')
            .row
                .alert.alert-warning.col-lg-4.col-md-4.col-xs-4
                    span To prevent accidents, actions are not permanent unless the button next to the timername shows "Unlocked".
                    br
                    span You can lock/unlock by clicking on the button.
            .row
                h3.col-lg-4.col-md-4.col-xs-4.statsheaderitem(style="margin-top:-15px;")
                    span #{timer.name}
                        a(style="margin-left:10px", class="btn btn-success pull-right", onClick="lockUnlockStatistics(this)")
                            i(class="fa fa-lock fa-xs" style="margin-right:5px")
                            span#locknote Locked 
            .row
                .col-lg-4.col-md-4.col-xs-4.statsheaderitem(style="margin:-10px 0px -10px 0px;border-bottom:2px solid #DDD")
                    h4
                        span Interval:
                            .btn-warning.intervalbutton(id="intervalbutton_all", onClick="limitSessions(34146000)") All
                            .btn-info.intervalbutton(id="intervalbutton_30", onClick="limitSessions(30)") 30 days
                            .btn-info.intervalbutton(id="intervalbutton_7", onClick="limitSessions(7)") 7 Days

            .row(style="margin-top:10px;")
                .col-lg-4.col-md-4.col-xs-4(id="sessionscontainer")
                    if (typeof sessions !== 'undefined')
                        for session in sessions
                            include includes/session
                .col-lg-1.col-md-1.col-xs-1(id="mergebuttonscontainer",style="margin-top:-1px;")
                    each sess, index in sessions
                        if (index % 2 == 0) && (index < (sessions.length-1)) 
                            .row
                                .mergebutton.btn.row-white(id="merge_" + index, value=index, onClick="mergeSessions(this);")
                                    i.mrot45(class="fa fa-compress fa-2x" style="margin:75px 0px 0px 0px;")
                .col-lg-7.col-md-7.col-xs-7
                    #chart_div
                
                

        a(class="btn btn-warning pull-right timer-ui-btn disabled btn-disabled" id="statusSpinner")
            i(class="fa fa-refresh fa-xs")
                    
                script. c3Chart();