Record is not being deleted

I'm trying to write a todo app with Ember. I'm following some guides, but I'm not doing things exactly as the guide and deletion of records is not working.

This is what I've got: router

Router.map(function() {
  this.route('home', {'path': '/'});
  this.resource('todos', {'path': '/todos' }, function() {
    this.resource('todo', {'path':  ':/todo_id' })
    this.route('new', {'path': '/new'} )
  });
});

todo-details component

{{#if isEditing}}
    {{input type="text" class="edit" value=todo.title focus-out="acceptChanges"
    insert-newline="acceptChanges"}}
{{else}}
    {{input type="checkbox" checked=todo.isCompleted class="toggle"}}
    <label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label>
    <button {{action "deleteTodo" todo}} class="destroy"></button>
{{/if}}


export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['completed'],
  completed: function() {
    var todo = this.get('todo');
    return todo.get('isCompleted');
  }.property('todo.isCompleted'),
  isEditing: false,
  actions: {
        editTodo: function() {
            this.set('isEditing', true);
        },
        acceptChanges: function() {
            this.set('isEditing', false);
            this.sendAction('acceptChanges', this.get("todo"));
        },
        deleteTodo: function(todo) {
            this.sendAction('deleteTodo', todo);
        }
    }
});

todos.index template

<div class="todos">
  {{input type="text" id="new-todo" placeholder="What needs to be done?" value=newTitle action="createTodo"}}

  <section id="main">
      <ul id="todo-list">
        {{#each model as |todo|}}
          {{todo-details todo=todo}}
        {{/each}}
      </ul>
      <input type="checkbox" id="toggle-all">
  </section>

  <footer id="footer">
      <span id="todo-count">
          <strong>2</strong> todos left
      </span>
      <ul id="filters">
          <li>
              <a href="all" class="selected">All</a>
          </li>
          <li>
              <a href="active">Active</a>
          </li>
          <li>
              <a href="completed">Completed</a>
          </li>
      </ul>

      <button id="clear-completed">
          Clear completed (1)
      </button>
  </footer>
</div>

todos.index controller

export default Ember.Controller.extend({
  newTitle: '',
  actions: {
    createTodo: function() {
      var controller = this;
      var todo = this.store.createRecord('todo', {title: controller.get('newTitle'), isCompleted: false});
      this.set('newTitle', '');
      todo.save();
    },
    acceptChanges: function(todo) {
      debugger;
      if (Ember.isEmpty(todo.get('title'))) {
        this.send('deleteTodo', todo);
      }
      else {
        todo.save();
      }
    },
    deleteTodo: function(todo) {
      todo.destroyRecord();
    }
});

The problem is that the creation and editing of records is working fine, but the deletion is not and I don't see where the problem is. In the todo-details component template pressing the button triggers a deleteTodo action in the component which then sends the action deleteTodo to the controller and there the record is destroyed .

Thanks.