template(name="overview")
  style.
    @import url("/assets/-/fontello/css/fontello.css");
    @import url("/assets/css/main.css");
    @import url("/assets/css/toggle.css");
    :host{position:relative; margin: 1em;}
    div[body]{background: #F6F7F8; padding: 2em; vertical-align: top;}
    .item{clear:both; display: block;}
    .item>div,
    .header>div{float: left; width:  50%; min-height: 30px;}
    .header{background: #ccc;}
    .item:nth-child(even) {background: #fff; }
    .item>div>a,
    .item>div>.wrapper{margin-right: 1em; float: left; display:block;}
    input[type="checkbox"]{display: none;}
    .list>div{padding: 1em; display: block;}
    .item>div>a{color: #326ca6;}
    .item>div>a i{color: #333; font-size: 120%;}
    
    
  div(body)
    h1 Overview
    
    div.list
      div.header.clearfix
        div Name
        div Actions
      div.item.clearfix(repeat="${items}")
        div ${name}
        div
          a(href="edit.page?id=${id}") 
            i.icon-pencil
            span Edit
          .wrapper
            input.toggle(id="toggle{repeat.index}", type='checkbox', name='toggle', active="${active}")
            label(for='toggle{repeat.index}')
          a(href="edit.page?id=${id}")
            i.icon-trash-empty 
            span Delete
      
      
  script(type="text/javascript").
    component
    .on('ready',function(event){
      $('.item[repeated=true] input[type="checkbox"]', body).each(function(i, checkbox){
        var active = $(checkbox).attr('active');
        if(active === "true"){
          $(checkbox).attr('checked','checked');
        }
      })
    })