module.exports = Zeppelin.ModelView.extend({
  tagName: 'li',

  attributes: function() {
    return {
      'title': this.model.get('name'),
      'data-type': this.model.get('type')
    };
  },

  className: function() {
    var className = 'card is-item';
    if (this.model.get('featured')) className += ' is-featured';
    return className;
  },

  events: {
    'click': 'onClick',
    'click [data-action=delete]': 'delete',
    'click [data-action=highlight]': 'toggleHighlight'
  },

  elements: {
    'name': 'span.card-name'
  },

  bindings: {
    model: {
      'change:name': 'onNameChange',
      'change:featured': 'onFeaturedChange'
    }
  },

  delete: function(event) {
    event.stopPropagation();

    if (window.confirm('Are you sure you want to delete this card?')) {
      this.model.destroy();
      this.broadcast('cardsList:layout');
    }
  },

  updateName: function(value) {
    this.getElement('name').text(value);
    return this;
  },

  toggleHighlight: function(event) {
    event.stopPropagation();
    this.model.save({featured: !this.model.get('featured')});
    return this;
  },

  onClick: function(event) {
    if (!event.metaKey) {
      event.preventDefault();
      this.model.select();
    }
  },

  onFeaturedChange: function(card, isFeatured) {
    this.$el.toggleClass('is-featured', isFeatured);

    this.broadcast('cardsList:updateBlock', {
      block: this.$el,
      width: isFeatured ? 461 : 223,
      height: isFeatured ? 461 : 223
    });
  },

  onNameChange: function(card, value) {
    this.updateName(value);
  }
});


@@ -517,12 +517,11 @@
 ': '
-span
+div
 .car
@@ -527,16 +527,53 @@
 rd-name'
+,%0A    'comments': 'div.card-comments'
 %0A  %7D,%0A%0A 
@@ -623,67 +623,219 @@
 e': 
-'onNameChange',%0A      'change:featured': 'onFeaturedChange'
+function(card, name) %7B%0A        this.updateName(name);%0A      %7D,%0A      'change:featured': 'onFeaturedChange',%0A      'change:comments_count': function(card, count) %7B%0A        this.updateCommentsCount(count);%0A      %7D
 %0A   
@@ -1040,32 +1040,50 @@
 :layout');%0A    %7D
+%0A%0A    return this;
 %0A  %7D,%0A%0A  updateN
@@ -1096,20 +1096,19 @@
 unction(
-valu
+nam
 e) %7B%0A   
@@ -1137,21 +1137,172 @@
 ').text(
-value
+name);%0A    return this;%0A  %7D,%0A%0A  updateCommentsCount: function(count) %7B%0A    this.getElement('comments').text(count + (count === 1 ? ' comment' : ' comments')
 );%0A    r
@@ -1852,82 +1852,8 @@
 %7D);%0A
-  %7D,%0A%0A  onNameChange: function(card, value) %7B%0A    this.updateName(value);%0A
   %7D%0A

Update comments count when adding comments to a card.