template(name="person")
  style.
    @import url("/assets/-/fontello/css/fontello.css");
    div[body]{background: white; padding: 20px;}
    label{padding-right: 20px;display: inline-block; width: 100px;}
    div{margin-bottom: 10px;}
  div(body)
    h1 View
    div
      label 
        i.icon-user
        span Firstname:
      span ${name.first}
    div
      label 
        i.icon-user
        span Lastname:
      span ${name.last}
    div 
      label 
        i.icon-location
        span Location
      span ${location}
    br
    hr
    br
    h1 Edit
    div
      label Change name:
      input.first(type="text" value="${name.first}")
      input.last(type="text" value="${name.last}")
    div
      label Location:
      input.location(type="text" value="${location}")
  script.
    $(body)
    .on('change keyup',".location", function(event){
      doc.location = $(this).val()
    })
    .on('change keyup',".first", function(event){
      doc.name.first = $(this).val()
    })
    .on('change keyup',".last", function(event){
      doc.name.last = $(this).val()
    })
    ;
    
    component
    .on('ready',function(event){
    })