Episode details file uses backgrid

UI/Episode/Layout.js

@@ -2,9 +2,9 @@
 define(
     [
         'marionette',
-        'Episode/Summary/View',
+        'Episode/Summary/Layout',
         'Episode/Search/Layout'
-    ], function (Marionette, SummaryView, SearchLayout) {
+    ], function (Marionette, SummaryLayout, SearchLayout) {
 
         return Marionette.Layout.extend({
             template: 'Episode/LayoutTemplate',
@@ -43,8 +43,7 @@ define(
                 }
 
                 this.ui.summary.tab('show');
-                this.summary.show(new SummaryView({model: this.model}));
-
+                this.summary.show(new SummaryLayout({model: this.model}));
             },
 
             _showActivity: function (e) {
@@ -92,7 +91,5 @@ define(
                     this.ui.monitored.removeClass('icon-bookmark');
                 }
             }
-
         });
-
     });

UI/Episode/Summary/Layout.js

@@ -0,0 +1,55 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'backgrid',
+        'Cells/FileSizeCell',
+        'Cells/QualityCell',
+        'Episode/Summary/NoFileView'
+    ], function (Marionette, Backgrid, FileSizeCell, QualityCell, NoFileView) {
+
+        return Marionette.Layout.extend({
+            template: 'Episode/Summary/LayoutTemplate',
+
+            regions: {
+                overview: '.episode-overview',
+                activity: '.episode-file-info'
+            },
+
+            columns:
+                [
+                    {
+                        name    : 'path',
+                        label   : 'Path',
+                        cell    : 'string',
+                        sortable: false
+                    },
+                    {
+                        name    : 'size',
+                        label   : 'Size',
+                        cell    : FileSizeCell,
+                        sortable: false
+                    },
+                    {
+                        name    : 'quality',
+                        label   : 'Quality',
+                        cell    : QualityCell,
+                        sortable: false
+                    }
+                ],
+
+            onShow: function () {
+                if (this.model.get('episodeFile')) {
+                    this.activity.show(new Backgrid.Grid({
+                        collection: new Backbone.Collection(this.model.get('episodeFile')),
+                        columns   : this.columns,
+                        className : 'table table-bordered'
+                    }));
+                }
+
+                else {
+                    this.activity.show(new NoFileView());
+                }
+            }
+        });
+    });

UI/Episode/Summary/LayoutTemplate.html

@@ -0,0 +1,4 @@
+<div class="episode-overview">
+    {{overview}}
+</div>
+<div class="episode-file-info"></div>

UI/Episode/Summary/NoFileView.js

@@ -5,7 +5,7 @@ define(
     ], function (Marionette) {
 
         return Marionette.ItemView.extend({
-            template: 'Episode/Summary/ViewTemplate'
+            template: 'Episode/Summary/NoFileViewTemplate'
         });
 
     });

UI/Episode/Summary/NoFileViewTemplate.html

@@ -0,0 +1,3 @@
+<p class="text-warning">
+    No file available for this episode.
+</p>

UI/Episode/Summary/ViewTemplate.html

@@ -1,29 +0,0 @@
-<div class="episode-overview">
-    {{overview}}
-</div>
-<div class="episode-file-info">
-    {{#if episodeFile}}
-        {{#with episodeFile}}
-        <table class="table table-bordered">
-            <thead>
-            <tr>
-                <th>Path</th>
-                <th>Size</th>
-                <th>Quality</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td>{{path}}</td>
-                <td>{{Bytes size}}</td>
-                <td>{{quality.quality.name}}</td>
-            </tr>
-            </tbody>
-        </table>
-        {{/with}}
-    {{else}}
-        <p class="text-warning">
-            No file available for this episode.
-        </p>
-    {{/if}}
-</div>