doctype html
html
  head
    meta(charset="utf-8")
    title GPC Knockout Widgets Test Page
    script(src="scripts/underscore/underscore.js")
    //-script(src="scripts/knockout/knockout-3.1.0.js")
    //-script(src="scripts/knockout/knockout.mapping-latest.js")
    //-script(src="scripts/gpc/kowidgets/treeview/treeview.js")
    //-link(rel="stylesheet",href="scripts/gpc/kowidgets/treeview/treeview.css")
    //-script(src="scripts/gpc/kowidgets/sketchpad/sketchpad.js")
    //-link(rel="stylesheet",href="scripts/gpc/kowidgets/sketchpad/sketchpad.css")
    //script(src="scripts/gpc/kowidgets/commandpanel/commandpanel.js")
    link(rel="stylesheet",href="scripts/gpc/kowidgets/commandpanel/commandpanel.css")
    //script(src="scripts/gpc/kowidgets/util/keyboard.js")
    script(type="text/html", id="tmplNumericField").
      <input type="number", data-bind="value: value, valueUpdate: 'input'"></input>
    script(type="text/html", id="tmplBooleanField").
      <input type="checkbox", data-bind="checked: value"></input>
    script(type="text/html", id="tmplStringField").
      <input type="text", data-bind="value: value"></input>
    script(type="text/html", id="tmplRow").
      <div data-bind="foreach: ko.unwrap(value)">
        <span data-bind="text: $data">...</span>
      </div>
    link(rel="stylesheet",href="test.css")
    script(src="main.js")
    
  body(onload="start()")
    div.navigation
      ul
        li(data-bind="css: { selected: page() === 'TreeView'     }, click: goTreeView"    ) TreeView
        li(data-bind="css: { selected: page() === 'SketchPad'    }, click: goSketchPad"   ) SketchPad
        li(data-bind="css: { selected: page() === 'CommandPanel' }, click: goCommandPanel") CommandPanel
          
    div(data-bind="if: page() === 'TreeView'")
      div(data-bind="template: { name: 'gktvTreeView', data: treeview }")
      div(style="float: right")
        input(type="button" onclick="test()" value="Click me!")
      div(style="clear: both")
      
    div(data-bind="if: page() === 'SketchPad'")
      h1 SketchPad Test
      p Zoom:
        button(onclick="sp.zoomPercent(50);") 50%
        button(onclick="sp.zoomPercent(100);") 100%
        button(onclick="sp.zoomPercent(200);") 200%
      div(data-bind="template: { name: 'gkspSketchPad', data: sketchpad }")

    div#command_panel(data-bind="if: page() === 'CommandPanel'")
      h1 Hello CommandPanel
      // ko with: list
      ul(data-bind="event: { focusin: list.focusIn, blur: blur, keydown: keyDown }")
        li(tabindex="0") Item 1
        li(tabindex="0") Item 2
        li(tabindex="0") Item 3
        li(tabindex="0") Item 4
        li(tabindex="0") Item 5
        li(tabindex="0") Item 6
        li(tabindex="0") Item 7
        li(tabindex="0") Item 8
        li(tabindex="0") Item 9
      // /ko
      div#side_panel
        // ko template: { name: 'gkcpCommandPanel', data: commandpanel }
        // /ko