How to make a proper edit route in Ember?

Currently, my routes are something like this:

this.route('cards', function() {
  this.route('all');
  this.route('card', {path: ':id'});
  this.route('new');
});

I want to make an edit route for the cards. I'm hoping that making a route like cards/1/edit would be proper to make it editable. But I'm unsure about how to proceed with that. If I make a route like cards/1/edit, how can I show the edit form on that route and also send a PATCH request to the backend.

this.route('cards', function() {
  this.route('all');
  this.route('card', {path: ':id'}, function() {
    this.route('edit');
  });
  this.route('new');
});

However, if I make a simple route like cards/edit/1, I'm able to send data to the backend but then it would have something like the following:

this.route('cards', function() {
  this.route('all');
  this.route('card', {path: ':id'});
  this.route('new');
  this.route('edit', {path: ':id'});
});

This throws error stating that cards/card is not a route.