var Collaborators = ModalFormView.extend({
	el: ".mediaDrawer.collaborators",
	
	template: $("#collaborator-template").html(),

	createAction: "/api/collaborator/:slug/create",
	destroyAction: "/api/collaborator/:slug/destroy",
	
	events: {
	  "click [data-role=destroy-collaborator]": "destroy",
	},
	
	show: function(){
		if (! this.loaded) {
			this.load()
		}
		else {
			this.__super__.show.call(this)
		}
	},
	
	load: function(){
		$.get("/api/collaborator/:slug/index", this.populate.bind(this))
	},

  populate: function(collaborators){
    //
    collaborators.forEach(function(collab){
      var $el = $( this.template )
      $el.data("collaborator-id", collab.id)
      
      if (collab.user) {
        $el.find(".email").remove()
        
        $el.find(".user")
           .attr("href", "/profile/" + collab.username)
        
        $el.find(".avatar")
           .css("background-image", "url(" + collab.photo + ")")
        
        $el.find(".username")
           .html( collab.displayName )
      }
      else {
        $el.remove(".user")
        $el.find(".email").html( collab.email )
      }
      
      $("#collaborators").append($el)
    }.bind(this))
    
    this.__super__.show.call(this)
  },
  
  success: function(data){
    this.populate([data])
  },
  
  destroy: function(e){
    var _id = $(e.currentTarget).closest("li").data("collaborator-id")
  },

})