Series monitored visible on seasons/episodes on details page and episode details modal

New: Visual indication on season/episode when series is not monitored
New: Prevent changing monitored state when series is not monitored

src/UI/Episode/EpisodeDetailsLayout.js

@@ -5,8 +5,9 @@ define(
         'Episode/Summary/EpisodeSummaryLayout',
         'Episode/Search/EpisodeSearchLayout',
         'Episode/Activity/EpisodeActivityLayout',
-        'Series/SeriesCollection'
-    ], function (Marionette, SummaryLayout, SearchLayout, EpisodeActivityLayout, SeriesCollection) {
+        'Series/SeriesCollection',
+        'Shared/Messenger'
+    ], function (Marionette, SummaryLayout, SearchLayout, EpisodeActivityLayout, SeriesCollection, Messenger) {
 
         return Marionette.Layout.extend({
             template: 'Episode/EpisodeDetailsLayoutTemplate',
@@ -37,7 +38,7 @@ define(
             initialize: function (options) {
                 this.templateHelpers.hideSeriesLink = options.hideSeriesLink;
 
-                this.series = SeriesCollection.find({ id: this.model.get('seriesId') });
+                this.series = SeriesCollection.get(this.model.get('seriesId'));
                 this.templateHelpers.series = this.series.toJSON();
                 this.openingTab = options.openingTab || 'summary';
 
@@ -57,6 +58,14 @@ define(
                 }
 
                 this._setMonitoredState();
+
+                if (this.series.get('monitored')) {
+                    this.$el.removeClass('series-not-monitored');
+                }
+
+                else {
+                    this.$el.addClass('series-not-monitored');
+                }
             },
 
             _showSummary: function (e) {
@@ -87,6 +96,16 @@ define(
             },
 
             _toggleMonitored: function () {
+                if (!this.series.get('monitored')) {
+
+                    Messenger.show({
+                        message: 'Unable to change monitored state when series is not monitored',
+                        type   : 'error'
+                    });
+
+                    return;
+                }
+
                 var name = 'monitored';
                 this.model.set(name, !this.model.get(name), { silent: true });
 

src/UI/Episode/EpisodeDetailsLayoutTemplate.html

@@ -3,7 +3,7 @@
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
         <h3>
-            <i class="icon-bookmark x-episode-monitored" title="Toggle monitored status" />
+            <i class="icon-bookmark x-episode-monitored episode-monitored" title="Toggle monitored status" />
             {{series.title}} - {{EpisodeNumber}} - {{title}}
         </h3>