extends ../../../views/main.pug

block append css
    link(href="/static/css/style.css", rel="stylesheet")
    link(href="/static/css/speaker.css", rel="stylesheet")

block content

    .row
        .col-md-8
            #canvases
                canvas#canvas-pdf(style={"border" : "1px solid #000000", position:'absolute'})
                canvas#canvas-paint.noselect(onmousedown="sio.onMouseDown(event);", onmousemove="sio.onMouseMove(event);", onmouseup="sio.onMouseUp(event);", onmouseout="sio.onMouseUp(event);", style={position:'absolute'})

            p
                .btn-group
                    button.btn.btn-default#first(onclick="sio.firstSlide();")
                        span.glyphicon.glyphicon-step-backward
                    button.btn.btn-default#previous(aria-hidden='true', onclick="sio.previousSlide();")
                        span.glyphicon.glyphicon-play.glyphicon-flip
                    input.btn.btn-default#counter(type='text', onclick="sio.clearCounter();", onblur="sio.update();", onkeydown="if (event.keyCode === 13) sio.changeSlideFromCounter(event);")
                    button.btn.btn-default#next(onclick="sio.nextSlide();")
                        span.glyphicon.glyphicon-play
                    button.btn.btn-default#last(onclick="sio.lastSlide();")
                        span.glyphicon.glyphicon-step-forward

                span(style={'margin-left':'10px'})
                .btn-group
                    button.btn.btn-default#sync(onclick="sio.syncAudience();") Sync viewer

                span(style={'margin-left':'10px'})
                .btn-group
                    button.btn.btn-default#viewer-laser(onclick="sio.switchAudienceLaser();") Audience laser is disabled

        .col-md-4
            .btn-group
                button.btn.btn-default#start(onclick="sio.startPresentation();")
                    span.glyphicon.glyphicon-play
                button.btn.btn-default#stop(onclick="sio.stopPresentation();", disabled)
                    span.glyphicon.glyphicon-stop
            p Total time : 
                span#totalTime
            p Slide time : 
                span#slideTime

block js
    script filename = '#{file}';
    script(src="/static/js/pdf.js")
    script(src="/static/js/pdf.worker.js")
    script(src="/socket.io/socket.io.js")
    script(src="/static/js/speaker.js")