How to structure ember 2 master detail pods

I'm trying to create a master /detail view using pods. Let's say a customer list on the left, with details in the right pane when you click on a customer.

I am having some trouble wiring this up correctly.

I am using the pod structure in my project.

I don't want to have 2 pods/urls customers and customer, I want to just have one customer route:

customer -> listing with nothing selected (index route)
customer/2 -> listing with customer 2 selected and details showing

Currently I have the following:

pods/customer
  │   model.js
  │   route.js
  │   template.hbs
  │
  ├───detail
  │       route.js
  │       template.hbs
  │
  └───index
          route.js
          template.hbs

My router.js has the following:

  this.route('customer',{path: 'customer'},function(){
      this.route('detail',{path: '/:customer_id'});
      this.route('new');
  });

The template in the pod root customer/template.hbs has two outlets called master and detail

I if I don't do anything to the route.jss the current route (either index or detail) shows in both outlets in the template.

if I add a renderTemplate to the route, I get blanks:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
      return this.store.findAll('customer');
  },
  renderTemplate: function(){
    this.render({
        outlet: 'master'
    });
});

I tried putting the index template (loops through customer names) directly into the customer/template with an outlet for the detail.

But then ember looks for customer/index/template and doesn't go up the tree as I would expect.
I get a message saying:

Could not find "customer.index" template or view. Nothing will be rendered Object {fullName: "template:customer.index"}

I have a master/detail working in the same project but with 2 pods (singular and plural), where the singular pod basically just has a model in it.

What am I missing?
Is there a better way of going about this in the first place?