extends ../../../views/withjs

block title
    title #{title} - Prototype

block extrajs
    script(src="/static/js/prototype/ArrowCamera.js")
    script(src="/static/js/prototype/FixedCamera.js")
    script(src="/static/js/prototype/OldFixedCamera.js")
    script(src="/static/js/prototype/ReverseCamera.js")
    script(src="/static/js/prototype/initScene.js")
    script(src="/static/js/prototype/raycasterTools.js")
    script(src="/static/js/prototype/Previewer.js")
    script(src="/static/js/prototype/ButtonManager.js")
    script(src="/static/js/prototype/Coin.js")
    if cameraStyle == 'arrows'
        script RecommendedCamera = FixedCamera;
    else if cameraStyle == 'viewports'
        script RecommendedCamera = OldFixedCamera;
    else if cameraStyle == 'reverse'
        script RecommendedCamera = ReverseCamera
    script(src="/static/js/prototype/main.js")

block extrahead
    link(rel="stylesheet" href="/static/css/prototype.css")

block content
    #main-div
        h2 3D Interface

        p
            | This is the prototype of a 3D interface. You can move the camera with
            | the arrow keys of your keyboard, and change the angle of the camera by
            | dragging and dropping the scene around it (you can also use your
            | numpad, 2 to look lower, 8 to look higher, 4 to look on the left and 6
            | to look on the right, but if you're more comfortable with non-numpad
            | keys, you can also use i for up, j for left, k for down, and l for
            | right).

        p
            | Recommended views are displayed with a transparent red arrow.  They
            | disappear when you come closer to them, and you can automatically move
            | to them by clicking on them. You can reset the camera at anytime by
            | clicking on the reset button.

        button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px', display: 'none'}) Fullscreen
        button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera

        button#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'})
            span.glyphicon.glyphicon-triangle-left('aria-hidden'="true")

        button#redo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom':'10px'})
            span.glyphicon.glyphicon-triangle-right('aria-hidden'="true")

        input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'})
        label(for="fullarrow" style={'margin-right':'10px'}) Full arrow

        input#collisions(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
        label(for="collisions" style={'margin-right':'10px'}) Collisions


        input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
        label(for="showarrows" style={'margin-right':'10px'}) Show arrows

        #container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")