basic document version viewer

app/components/document_version.hbs

-Page Count = {{@model.document_version.page_count}}
-
-<div class="d-flex flex-column">
-  {{#each @model.pages as |page|}}
-    <Page @page={{page}} />
-  {{/each}}
-</div>

app/components/document_version/index.hbs

+{{@model.document_version.document.title}}
+
+<div class="d-flex">
+  <DocumentVersion::Thumbnails @pages={{@model.pages}} />
+
+  <div class="d-flex flex-column pages">
+    {{#each @model.pages as |page|}}
+      <DocumentVersion::Page @page={{page}} />
+    {{/each}}
+  </div>
+</div>

app/components/document_version/page.hbs

+<div class="page">
+  <img src="{{@page.url}}" />
+  {{@page.number}}
+</div>
\ No newline at end of file

app/components/document_version/thumbnail.hbs

+<div class="thumbnail">
+  <img src="{{@page.url}}" />
+  {{@page.number}}
+</div>
\ No newline at end of file

app/components/document_version/thumbnails.hbs

+<div class="d-flex flex-column thumbnails">
+  {{#each @pages as |page|}}
+    <DocumentVersion::Thumbnail @page={{page}} />
+  {{/each}}
+</div>
\ No newline at end of file

app/components/page.hbs

-
-<img src="{{@page.url}}" width="100" />
-{{@page.number}}
\ No newline at end of file

app/models/document_version.js

-import Model, { attr, hasMany } from '@ember-data/model';
+import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
 
 
 export default class DocumentVersionModel extends Model {
@@ -7,4 +7,5 @@ export default class DocumentVersionModel extends Model {
   @attr page_count; // total page count
   @attr lang; // languate used for this page
   @hasMany('pages') pages;
+  @belongsTo('document') document;
 }

app/styles/app.scss

@@ -5,6 +5,8 @@
 @import "./nav/sidebar";
 @import "./nav/topbar";
 @import "./login.scss";
+@import "./document_version.scss";
+
 
 body {
     background-color: #e9ecef;

app/styles/document_version.scss

+
+.thumbnails {
+  .thumbnail {
+    margin: 1rem;
+    img {
+      width: 6rem;
+    }
+  }
+}
+
+.pages {
+  overflow: scroll;
+  height: 100vh;
+
+  .page {
+    img {
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file