added episode detail modal

summary tab is working.

UI/Episode/Layout.js

@@ -1,8 +1,60 @@
 "use strict";
-define(['app'], function () {
+define(['app', 'Episode/Summary/View'], function () {
 
-    NzbDrone.Episode.Layout = Backbone.Marionette.ItemView.extend({
-        template: 'Episode/Search/LayoutTemplate'
+    NzbDrone.Episode.Layout = Backbone.Marionette.Layout.extend({
+        template: 'Episode/LayoutTemplate',
+
+
+        regions: {
+            summary : '#episode-summary',
+            activity: '#episode-activity',
+            search  : '#episode-search'
+        },
+
+        ui: {
+            summary : '.x-episode-summary',
+            activity: '.x-episode-activity',
+            search  : '.x-episode-search'
+        },
+
+        events: {
+
+            'click .x-episode-summary' : 'showSummary',
+            'click .x-episode-activity': 'showActivity',
+            'click .x-episode-search'  : 'showSearch'
+        },
+
+
+        onShow: function () {
+            this.showSummary();
+        },
+
+
+        showSummary: function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            this.ui.summary.tab('show');
+            this.summary.show(new NzbDrone.Episode.Summary.View({model: this.model}));
+
+        },
+
+        showActivity: function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            this.ui.activity.tab('show');
+        },
+
+        showSearch: function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            this.ui.search.tab('show');
+        }
 
     });
 

UI/Episode/LayoutTemplate.html

@@ -0,0 +1,21 @@
+<div class="episode-detail-modal">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3>{{title}}</h3>
+    </div>
+    <div class="modal-body">
+        <ul class="nav nav-tabs" id="myTab">
+            <li><a href="#episode-summary" class="x-episode-summary">Summary</a></li>
+            <li><a href="#episode-activity" class="x-episode-activity">Activity</a></li>
+            <li><a href="#episode-search" class="x-episode-search">Search Indexers</a></li>
+        </ul>
+        <div class="tab-content">
+            <div class="tab-pane" id="episode-summary"/>
+            <div class="tab-pane" id="episode-activity"/>
+            <div class="tab-pane" id="episode-search"/>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="btn" data-dismiss="modal">close</button>
+    </div>
+</div>

UI/Episode/Search/LayoutTemplate.html

@@ -1,12 +1 @@
-<div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Delete: {{title}}</h3>
-</div>
-<div class="modal-body">
-    <h1>Searching for episodes!!!</h1>
-</div>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-danger x-confirm-delete">delete</button>
-</div>
-
+

UI/Episode/Summary/View.js

@@ -0,0 +1,8 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Episode.Summary.View = Backbone.Marionette.ItemView.extend({
+        template: 'Episode/Summary/ViewTemplate'
+    });
+
+});

UI/Episode/Summary/ViewTemplate.html

@@ -0,0 +1,29 @@
+<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>{{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>