extends layout

block title
  | 1080p dashboard

block content
  div.gridster
    ul
      li(data-row='1', data-col='1', data-sizex='1', data-sizey='1')
        div(data-view='Clock')
        i.fa.fa-clock-o.icon-background
      li(data-row='1', data-col='1', data-sizex='1', data-sizey='1')
        div(data-view='Image', data-image='/logo.png')
      li(data-row='1', data-col='1', data-sizex='2', data-sizey='1')
        div(data-id='welcome', data-view='Text', data-title='Hello', data-text='This is your shiny new 1080p dashboard.', data-moreinfo='Protip: You can drag the widgets around!')
      li(data-row='1', data-col='1', data-sizex='1', data-sizey='1')
        div(data-id='synergy', data-view='Meter', data-title='Synergy', data-min='0', data-max='100')
      li(data-row='1', data-col='1', data-sizex='1', data-sizey='1')
        div(data-id='synergy', data-view='Meter', data-moreinfo='In sync with my neighbour!', data-title='Synergy', data-min='0', data-max='100')
      li(data-row='1', data-col='1', data-sizex='1', data-sizey='2')
        div(data-id='buzzwords', data-view='List', data-unordered='true', data-title='Buzzwords', data-moreinfo='# of times said around the office')
      li(data-row='1', data-col='1', data-sizex='1', data-sizey='1')
        div(data-id='karma', data-view='Number', data-title='Karma', style='background-color:#96bf48;')
        i.fa.fa-heart.icon-background
      li(data-row='1', data-col='1', data-sizex='2', data-sizey='2')
        div(data-id='convergence', data-view='Graph', data-title='Convergence', style='background-color:#47bbb3;', data-moreinfo='poop')
      li(data-row='1', data-col='1', data-sizex='2', data-sizey='1')
        div(data-id='twitter_mentions', data-view='Comments', style='background-color:#ff9618;', data-moreinfo='Tweets tagged with #todayilearned')
        i.fa.fa-twitter.icon-background
    center
      div(style='font-size: 12px') Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' -H "Content-Type: application/json" http://#{request.header('host')}/widgets/welcome

block scripts
  script.
    $(function() {
      // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
      Dashing.gridsterLayout('[{"col":2,"row":1},{"col":1,"row":1},{"col":3,"row":1},{"col":2,"row":2},{"col":3,"row":2},{"col":1,"row":2},{"col":5,"row":1},{"col":4,"row":2},{"col":2,"row":3}]')
      Dashing.widget_base_dimensions = [370, 340]
      Dashing.numColumns = 5
    });