template(name="comment")
  style.
    @import url("/assets/-/fontello/css/animation.css");
    @import url("/assets/-/fontello/css/fontello.css");
    :host{position:relative; margin: 1em;}
    div[body]{background: #F6F7F8; padding: 2em; vertical-align: top;}
    .timestamp{margin-right: 1em; color: #666;}
    .comment{margin-top: 0.5em;}
    .user{font-weight: bold; color: #141823;margin-right: 1em;}
    a{color: #3b5998;}
    img{text-align:left; float: left; margin-right: 1em;}
    .item{margin-bottom: 1em; background: #fefefe; padding: 1em;position:relative}
    textarea{min-height: 100px; box-sizing: border-box; width: 90%;}
    .cancel{position: absolute;right: 0; top: 0;cursor: pointer; cursor: hand;}
    .like {cursor: pointer; cursor: hand;}
    .like:hover, .cancel:hover{color: #900;}
    .test2{margin-left: 50px;}
  div(body)
    div.item(repeat="${comments}")
      i.cancel.icon-cancel-circled-outline
      img(source="${user.image}")
      span.user
        i.icon-user
        a(href="#")
          span ${user.name.first} 
          span ${user.name.last}
      span.other
        span.timestamp ${commented_on}
        span.likes
          i.like.icon-thumbs-up-alt
          span ${likes}
      div.comment 
        i.icon-comment
        span ${comment}
    hr
    div.new_comment
      div.test1
        img(source="${user.image}" width=40)
      div.test2
        div
          textarea(placeholder="Type your comment here")
  script(src="/bower_components/moment/moment.js")
  script.
    $(body)
    .on('click',".cancel", function(event){
      var index = $(this).parent().attr("repeat-index")
      collections[0].data.splice(index, 1)
    })
    .on('keyup',"textarea", function(event){
      var val = $.trim($(this).val());
      if (val.length == 0) return false;
      if(event.which == 13){
        var new_comment          = {}
        new_comment.user         = { "name": {"first":"Valtid", "last":"Caushi"}, "image": "http://placehold.it/32x32" };
        new_comment.comment      = val;
        new_comment.likes        = 0;
        new_comment.commented_on = +new Date/1000
        collections[0].data.push(new_comment);
        
        $(this).val("");
      }
    })
    .on('click',"i.icon-thumbs-up-alt", function(event){
      var index = $(this).parents('[repeated]').attr("repeat-index")
      collections[0].data[index].likes++
    })
    .on('change keyup',".location", function(event){
      collections[0].data.location = $(this).val()
    })
    ;
    
    component
    .on('change ready', "commented_on", function(event, change){
      var index = $(this).parents('[repeated]').attr("repeat-index")
      var data = collection.document[index]
      if( data ){
        var date = moment(data.commented_on * 1000)
        var time = date.fromNow()
        $('[repeated] .timestamp',body).eq(index).text(time)
      }
    })
    ;