doctype html
html
  head
    title effects
    link(rel='stylesheet', href='/style.css')
    style.
      .headerRow {
        display: flex;
        justify-content: space-between;
      }
  body
    #status starting...
    h1 Effects
    p: a(href='.') Go to Submasters


    div(data-bind="foreach: moreExprs")
      div.resource.chase
        span(data-bind="text: label")
        | 
        a.resource(data-bind="attr: {href: $root.subtermLink(label, expr)}, text: expr")
    
    div(data-bind="foreach: chases")
      div.resource.chase
        | Chase
        a(data-bind="attr: {href: uri}, text: label")
        ul(data-bind="foreach: $parent.subtermExprs($data)")
          li: a.resource(data-bind="attr: {href: $root.subtermLink($parent.label, $data)}, text: $data")


    div(data-bind="foreach: classes")
      div.resource.effectClass
        div.headerRow
          span
            h2
              | Effect class
              | 
              resource-display(data-bind="attr: {uri: uri, graph: graph}")
              a(data-bind="attr: {href: uri}, text: label")
              button(data-bind="click: $root.onRename") Rename
          span.rightTools
            button(data-bind="click: $root.addToCurrentSong") Add to current song
            button(data-bind="event: { mousedown: $root.addMomentary, mouseup: $root.addMomentaryUp }") Add momentary
        div.rename
          input
        div
          code(data-bind="text: code")
        
    #status
      
    script(src="/lib/jquery/dist/jquery.min.js")
    script(src="/lib/knockout/dist/knockout.js")
    script(src="/websocket.js")
    script(src="effects.js")