How to work with nested routes in Ember.js

I'm new to Ember.js and I stuck with nested routes and I need help.

This is what I want to achieve:

I think this is called Master-Detail page.

more systematically it looks something like this:

UsersIndexRoute displays list of people. UsersShowRoute displays information for particular person.

Here is my routes:

Router.map(function() {
  this.route('users', { path: '/users'}, function() {
    this.route('index', { path: ''}, function() {
      this.route('show', { path: '/:id' });
    });
  });
});

UserIndex Template looks like this:

{{#each item in model}}
  {{#link-to 'users.index.show' item.id}} {{item.firstName}} {{item.lastName}}{{/link-to}}
{{/each}}

When I try URL like 'http://localhost:4200/users/1' for example, according to debugger I am be able to reach controller 'users.index.show' (the desired one)

The route for UserShowRoute looks like this:

export default Ember.Route.extend({
  renderTemplate: function() {
    this.render({
      outlet: 'detail'
    });
  },
  model: function(params) {
    return this.store.find('user', params.id);
  } 
});

I am using ember-cli 1.13.8

I hope my explanation makes some sense to you. Thanks in advance.