template(name="profile")
  style.
    @import url("/assets/-/fontello/css/fontello.css");
    @import url("/assets/css/main.css");
    :host {display: block; padding: 20px; background: #fff;  margin-bottom: 10px; position:relative;}
    header {font-size: 30px;margin-bottom: 20px;}
    .icon-location {font-size: 25px; color: #900;}
    img {float: right;border: 5px solid #f0f0f0; }
    i { width: 40px; display: inline-block; color: #333; text-align: center;margin-right: 10px;}
    i.icon-thumbs-up-alt {cursor: pointer;}
    i.icon-thumbs-up-alt:hover{opacity: 0.5}
    header span span{padding-left: 5px;}
    header span span:first-child{padding-left: 0px;}
    header span span:empty {display: none;}
    
    div.back form{padding: 10px; background: whitesmoke;}
    div.back label {width: 100px; display: inline-block;}
    
    .likes{-webkit-user-select: none;user-select: none;-moz-user-select: none;-ms-user-select: none;}
    .front,.back{width:100%;}
    .hidden{display: none;}
    .edit{right: 5px; position: absolute; top: 5px;}
    [body]{position: relative;perspective: 1000;}
    
    .show_edit .edit{transform: rotateY(180deg); right: auto; left: 5px;}
    .show_edit{transform: rotateY(180deg);}
    .show_edit .back{ display:block; }
    .show_edit .front{ display:none; }
    .flip{background: whitesmoke; padding: 20px; transition: 0.6s;  transform-style: preserve-3d; display: block; margin-bottom: 10px; position: relative;}
    .front { z-index: 2;  transform: rotateY(0deg); display: block;    }
    .back {  transform: rotateY(180deg); display: none; }
    .flip[current="true"]{ background: green; }

  div#wrap(body)

    hr
    hr

    div.flip(repeat="", current="${current}", id="1")
      a.edit(href="#") Edit
      div.back
        div
          label Firstname
          input(type="text" value="${name.first}")
        div
          label Middle
          input(type="text" value="${name.middle}" name="middle" )
        div
          label Last
          input(type="text" value="${name.last}")
      div.front
        img.img(src="${image}")
        header 
          i.icon-user
          span.editable
            span ${name.first}
            span ${name.middle}
            span ${name.last}
        div
          i.icon-calendar
          span ${dob}
        div
          i.icon-location
          span ${location}
          ul.hidden.location_list
            li.item Manchester
            li.item Liverpool
            li.item Brighton
        div(visible)
          i.icon-thumbs-up-alt
          span.likes ${likes}
    hr

  script(type='text/javascript').
    console.log('test')
    alert('love')
    
    console.log('love is all we needd')
    var doc = component.document
    $(body)
    .on("click", ".edit", function(){
      $(this).parent().toggleClass("show_edit")
    })
    .on("click", ".location_list .item", function(){
      var value = $.trim($(this).text());
      var index = $(this).parents('.flip').attr('repeat-index')
      component.document[index].location = value;
    })
    .on("click", "i.icon-location", function(){
      var parent = $(this).parents('.flip');
      target=$(parent ,body).find(".location_list")
      target.toggle(!target.is(':visible'));
    })
    .on("click", ".img", function(event){
      var index = $(this).parents('.flip').attr('repeat-index')
      component
      component.document[index].image = "http://placehold.it/100x100?2";
    })
    .on("click", "i.icon-thumbs-up-alt", function(){
      var index = $(this).parents('.flip').attr('repeat-index')
      component.document[index].likes++;
      console.info("likes: ",component.document[index].likes)
    })
    ;