var TasksView = CollectionViewWithInlineEditor.extend({
    initialize: function(options) {
        this.compileTemplates(options.templates);
        this.bindCollection();
        options.controls.create.click(function() {
            options.collection.create({
                name: 'new task'
            }, {wait: true});
        });
    },
    clear: function() {
        this.$el.empty();
    },
    renderItem: function(task) {
        var $item = $(this.templates.task(task.toJSON()));
        $item
            .find('input:checkbox')
            .change(function() {
                task.adhoc({'done': this.checked});
            });
        $item
            .find('.btn-delete-task')
            .click(function() {
                task.destroy({wait: true});
            });
        return $item;
    },
    updateNote: function(task) {
        var $note = task.$item.find('[data-model="task"][data-model-attribute="note"]');
        if (task.get('note')) {
            $note.text(task.get('note'));
            task.$item.find('.task-note').removeClass('muted').addClass('present');
        } else {
            $note.text('...');
            task.$item.find('.task-note').addClass('muted').removeClass('present');
        }
    },
    appendItem: function(task) {
        task.$item = this.renderItem(task);
        this.bindInlineEditable(task, '.inline-editable[data-model="task"]');
        this.updateNote(task);
        task.on('change:done', function() {
            task.$item.find('input:checkbox').prop('checked', task.get('done'));
        });
        task.on('change:name', function() {
            task.$item.find('[data-model="task"][data-model-attribute="name"]').text(task.get('name'));
        });
        task.on('change:note', function() {
            this.updateNote(task);
        }, this);
        this.$el.append(task.$item);
    },
    removeItem: function(task) {
        task.$item.remove();
    }
});