Setup verse route and initial template

app/components/scripture-nav-bar.js

@@ -33,7 +33,8 @@ export default class ScriptureNavBarComponent extends Component {
   @action
   verseSelected(book, chapter, verse) {
     // Load the DOM with vese page
-    console.log('[verseSelected] called: ' + book + ' ' + chapter + ':' + verse);
-    this.router.transitionTo('verse');
+    console.log('[verseSelected] called: ' + book + ' ' + chapter.chapter + ':' + verse);
+    console.log(chapter);
+    this.router.transitionTo('verse', book + '-' + chapter.chapter + '-' + verse );
   }
 }

app/models/book.js

@@ -1,4 +1,4 @@
-import Model from '@ember-data/model';
+import Model, { attr, hasMany } from '@ember-data/model';
 
 export default class BookModel extends Model {
   @attr name;

app/models/chapter.js

@@ -1,4 +1,4 @@
-import Model from '@ember-data/model';
+import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
 
 export default class ChapterModel extends Model {
   @attr name;

app/models/verse.js

@@ -1,9 +1,10 @@
-import Model from '@ember-data/model';
+import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
 
 export default class VerseModel extends Model {
   @attr name;
   @attr greek_text;
   @attr ulb_text;
+  @attr reference;
 
   @belongsTo('chapter') chapter;
 

app/models/word.js

@@ -1,4 +1,4 @@
-import Model from '@ember-data/model';
+import Model, { attr, belongsTo } from '@ember-data/model';
 
 export default class WordModel extends Model {
   @attr ulb;

app/router.js

@@ -7,5 +7,5 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function() {
-  this.route('verse');
+  this.route('verse', { path: '/verse/:verse_id' });
 });

app/routes/verse.js

@@ -1,5 +1,12 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class VerseRoute extends Route {
+  @service store;
 
+  model(params) {
+    return this.store.findRecord('verse', params.verse_id, {
+      include: 'words'
+    });
+  }
 }

app/templates/verse.hbs

@@ -1 +1,18 @@
-{{outlet}}
+<div class="container">
+  <div class="row">
+    <div class="col-6">
+      <h1>{{model.reference}}</h1>
+      <h4>Greek</h4>
+      <p>{{model.greek_text}}</p>
+      <h4>ULB</h4>
+      <p>{{model.ulb_text}}</p>
+    </div>
+    <div class="col-6">
+      <ul>
+        {{#each @model.words as |word|}}
+          <li>{{word.greek}} : {{word.ulb}} :  {{word.morph}}</li>
+        {{/each}}
+      </ul>
+    </div>
+  </div>
+</div>