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/groupstats.js")

    
block content
    .container(style="margin-left:30px;")
        .row
            h2.logo.col-lg-2.col-md-2.col-xs-2(style="margin-left:-35px;")
                a(href="/", style="color:#999; text-decoration:none;")
                    i(class="fa fa-arrow-left")
                    |  Back
    .container(style="margin-left:30px;")
        .row
            if (typeof flash !== 'undefined')
                include includes/flash
    .container.wrapper(style="margin-left:10px;")
        .row
            h3.col-lg-4.col-md-4.col-xs-4 
                span #{group.name}
        .row(style="margin-top:10px;")
            .col-lg-4.col-md-4.col-xs-4
                each timer in timers
                    .row.row-white(id=timer._id+"_row")
                        p.date=timer.name
                        script. document.write(convertSeconds('#{timer.time}'))

                    script. names.push('#{timer.name}');
                    script. data.push(#{timer.time});
        .row(style="margin-top:10px;")
            a.btn.row-white.col-lg-4.col-md-4.col-xs-4(onClick="switchStyle()", style="color:gray;font-weight:bold;")
                |Switch chart style

        .row
            #chart_div(style="left:30% !important; ")
        
    script. groupname = '#{group.name}';
    script. c3Chart();