var CommentsView = FormView.extend({
  
  el: "#comments",
  
  events: {
    "focus textarea": "focus",
    "blur textarea": "blur",
    "click .remove": "remove",
  },
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.$formRow = this.$("#comment_form")
  },
  
  load: function(comments){
    comments.forEach(this.appendComment.bind(this))
  },
  
  parse: function(comment){
    if (! comment.comment.length) return $('')
    var datetime = verbose_date(comment.date, true)
    var t = this.template.replace(/{{username}}/g, comment.username)
                         .replace(/{{id}}/g, comment.id)
                         .replace(/{{comment}}/g, tidy_urls(comment.comment))
                         .replace(/{{date}}/g, datetime[0])
                         .replace(/{{time}}/g, datetime[1])
    var $t = $(t)
    if (auth.user.username !== comment.username) {
      $t.find(".edit-links").remove()
    }
    return $t
  },
  
  prependComment: function(comment){
    var $el = this.parse(comment)
    this.$el.prepend($el)
  },

  appendComment: function(comment){
    var $el = this.parse(comment)
    $el.insertBefore(this.$formRow)
  },
  
  success: function(){
    this.prependComment(comment)
  },
  
  focus: function(){
    app.typing = true
  },
  
  blur: function(){
    app.typing = false
  },
  
  remove: function(e){
    var id = $(e.target).data('id')
    var should_remove = confirm("Are you sure you want to delete this comment? #" + id)
    if (should_remove) {
      $.ajax({
        method: "DELETE",
        url: "/api/comment/" + id,
        headers: { "csrf-token": $("[name=_csrf]").attr("value") },
        data: { csrf: csrf() },
        success: function(){
          window.location.reload()
        },
      })
    }
  },

})