diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9c1afe145..edef999836 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 #### Improvements
 - Updated `guessit` to version 3.0.0 ([#4244](https://github.com/pymedusa/Medusa/pull/4244))
 - Updated the API v2 endpoint to handle concurrent requests ([#4970](https://github.com/pymedusa/Medusa/pull/4970))
+- Converted some of the show header to Vue ([#5087](https://github.com/pymedusa/Medusa/pull/5087))
 
 #### Fixes
 - Fixed many release name parsing issues as a result of updating `guessit` ([#4244](https://github.com/pymedusa/Medusa/pull/4244))
diff --git a/themes-default/slim/package.json b/themes-default/slim/package.json
index 259d64ba4a..439890d6dd 100644
--- a/themes-default/slim/package.json
+++ b/themes-default/slim/package.json
@@ -58,6 +58,7 @@
     "gulp-changed": "3.2.0",
     "gulp-imagemin": "4.1.0",
     "imagemin-pngquant": "6.0.0",
+    "is-visible": "2.2.0",
     "jquery": "3.3.1",
     "lodash": "4.17.10",
     "mini-css-extract-plugin": "0.4.2",
@@ -75,6 +76,7 @@
     "vue-meta": "1.5.3",
     "vue-native-websocket": "2.0.9",
     "vue-router": "3.0.1",
+    "vue-scrollto": "2.11.0",
     "vue-snotify": "3.2.1",
     "vue-template-compiler": "2.5.17",
     "vue-truncate-collapsed": "2.1.0",
diff --git a/themes-default/slim/src/api.js b/themes-default/slim/src/api.js
index fb56253334..bc7e404a52 100644
--- a/themes-default/slim/src/api.js
+++ b/themes-default/slim/src/api.js
@@ -8,7 +8,7 @@ const apiKey = document.body.getAttribute('api-key');
  */
 const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
     baseURL: webRoot + '/',
-    timeout: 10000,
+    timeout: 30000,
     headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json'
@@ -20,7 +20,7 @@ const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
  */
 const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
     baseURL: webRoot + '/api/v1/' + apiKey + '/',
-    timeout: 10000,
+    timeout: 30000,
     headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json'
@@ -32,7 +32,7 @@ const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
  */
 const api = axios.create({ // eslint-disable-line no-unused-vars
     baseURL: webRoot + '/api/v2/',
-    timeout: 10000,
+    timeout: 30000,
     headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
diff --git a/themes-default/slim/src/components/display-show.vue b/themes-default/slim/src/components/display-show.vue
index ab475cd360..9e454a5bd8 100644
--- a/themes-default/slim/src/components/display-show.vue
+++ b/themes-default/slim/src/components/display-show.vue
@@ -1,4 +1,6 @@
 <script>
+import { isVisible } from 'is-visible';
+import { scrollTo } from 'vue-scrollto';
 import { mapState, mapGetters } from 'vuex';
 import { api, apiRoute } from '../api';
 import AppLink from './app-link.vue';
@@ -23,18 +25,38 @@ export default {
             titleTemplate: '%s | Medusa'
         };
     },
+    props: {
+        /**
+         * Show id
+         */
+        showId: {
+            type: Number
+        },
+        /**
+         * Show indexer
+         */
+        showIndexer: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            jumpToSeason: 'jump'
+        };
+    },
     computed: {
         ...mapState({
-            shows: state => state.shows.shows
+            shows: state => state.shows.shows,
+            indexerConfig: state => state.config.indexers.config.indexers
         }),
         ...mapGetters([
             'getShowById'
         ]),
         indexer() {
-            return this.$route.query.indexername;
+            return this.showIndexer || this.$route.query.indexername;
         },
         id() {
-            return this.$route.query.seriesid;
+            return this.showId || this.$route.query.seriesid;
         },
         show() {
             const { indexer, id, getShowById, shows, $store } = this;
@@ -49,7 +71,24 @@ export default {
                 return defaults.show;
             }
 
+            // Not detailed
+            if (!show.seasons) {
+                $store.dispatch('getShow', { id, indexer, detailed: true });
+                return getShowById({ indexer, id });
+            }
+
             return show;
+        },
+        showIndexerUrl() {
+            const { show, indexerConfig } = this;
+
+            if (!show.indexer || !indexerConfig[show.indexer] || !indexerConfig[show.indexer].showUrl) {
+                return undefined;
+            }
+
+            const id = show.id[show.indexer];
+            const indexerUrl = indexerConfig[show.indexer].showUrl;
+            return `${indexerUrl}${id}`;
         }
     },
     mounted() {
@@ -62,13 +101,17 @@ export default {
             showHideRows
         } = this;
 
-        $(window).on('resize', () => {
-            this.reflowLayout();
+        this.$watch('show', () => {
+            this.$nextTick(() => this.reflowLayout());
         });
 
-        window.addEventListener('load', () => {
-            this.reflowLayout();
+        ['load', 'resize'].map(event => {
+            return window.addEventListener(event, () => {
+                this.reflowLayout();
+            });
+        });
 
+        window.addEventListener('load', () => {
             $.ajaxEpSearch({
                 colorRow: true
             });
@@ -78,17 +121,6 @@ export default {
             $.ajaxEpRedownloadSubtitle();
         });
 
-        $(document.body).on('change', '#seasonJump', event => {
-            const id = $('#seasonJump option:selected').val();
-            if (id && id !== 'jump') {
-                const season = $('#seasonJump option:selected').data('season');
-                $('html,body').animate({ scrollTop: $('[name="' + id.substring(1) + '"]').offset().top - 100 }, 'slow');
-                $('#collapseSeason-' + season).collapse('show');
-                location.hash = id;
-            }
-            $(event.currentTarget).val('jump');
-        });
-
         $(document.body).on('click', '#changeStatus', () => {
             const epArr = [];
             const status = $('#statusSelect').val();
@@ -158,24 +190,22 @@ export default {
             });
         });
 
-        // Selects all visible episode checkboxes.
-        $(document.body).on('click', '.seriesCheck', () => {
-            $('.epCheck:visible').each((index, element) => {
-                element.checked = true;
-            });
-            $('.seasonCheck:visible').each((index, element) => {
-                element.checked = true;
-            });
+        // Selects all visible episode checkboxes
+        document.addEventListener('click', event => {
+            if (event.target && event.target.className.includes('seriesCheck')) {
+                [...document.querySelectorAll('.epCheck, .seasonCheck')].filter(isVisible).forEach(element => {
+                    element.checked = true;
+                });
+            }
         });
 
         // Clears all visible episode checkboxes and the season selectors
-        $(document.body).on('click', '.clearAll', () => {
-            $('.epCheck:visible').each((index, element) => {
-                element.checked = false;
-            });
-            $('.seasonCheck:visible').each((index, element) => {
-                element.checked = false;
-            });
+        document.addEventListener('click', event => {
+            if (event.target && event.target.className.includes('clearAll')) {
+                [...document.querySelectorAll('.epCheck, .seasonCheck')].filter(isVisible).forEach(element => {
+                    element.checked = false;
+                });
+            }
         });
 
         // Show/hide different types of rows when the checkboxes are changed
@@ -265,26 +295,23 @@ export default {
             $.tablesorter.columnSelector.attachTo($('#showTable, #animeTable'), '#popover-target');
         });
 
-        // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the
-        // Season to Show Episodes or Hide Episodes.
-        $('.collapse.toggle').on('hide.bs.collapse', function() {
-            const reg = /collapseSeason-(\d+)/g;
-            const result = reg.exec(this.id);
-            $('#showseason-' + result[1]).text('Show Episodes');
-            $('#season-' + result[1] + '-cols').addClass('shadow');
-        });
-        $('.collapse.toggle').on('show.bs.collapse', function() {
-            const reg = /collapseSeason-(\d+)/g;
-            const result = reg.exec(this.id);
-            $('#showseason-' + result[1]).text('Hide Episodes');
-            $('#season-' + result[1] + '-cols').removeClass('shadow');
-        });
-
-        // Generate IMDB stars
-        $('.imdbstars').each((index, element) => {
-            $(element).html($('<span/>').width($(element).text() * 12));
+        // Changes the button when clicked for collapsing/expanding the season to show/hide episodes
+        document.querySelectorAll('.collapse.toggle').forEach(element => {
+            element.addEventListener('hide.bs.collapse', () => {
+                // On hide
+                const reg = /collapseSeason-(\d+)/g;
+                const result = reg.exec(this.id);
+                $('#showseason-' + result[1]).text('Show Episodes');
+                $('#season-' + result[1] + '-cols').addClass('shadow');
+            });
+            element.addEventListener('show.bs.collapse', () => {
+                // On show
+                const reg = /collapseSeason-(\d+)/g;
+                const result = reg.exec(this.id);
+                $('#showseason-' + result[1]).text('Hide Episodes');
+                $('#season-' + result[1] + '-cols').removeClass('shadow');
+            });
         });
-        attachImdbTooltip(); // eslint-disable-line no-undef
 
         // Get the season exceptions and the xem season mappings.
         getSeasonSceneExceptions();
@@ -306,13 +333,18 @@ export default {
     },
     methods: {
         /**
-         * Moves summary background and checkbox controls
+         * Attaches imdb tool tip,
+         * moves summary background and checkbox controls
          */
         reflowLayout() {
+            console.debug('Reflowing layout');
+
             this.$nextTick(() => {
                 this.moveSummaryBackground();
                 this.movecheckboxControlsBackground();
             });
+
+            attachImdbTooltip(); // eslint-disable-line no-undef
         },
         /**
          * Adjust the summary background position and size on page load and resize
@@ -427,17 +459,19 @@ export default {
         // @TODO: OMG: This is just a basic json, in future it should be based on the CRUD route.
         // Get the season exceptions and the xem season mappings.
         getSeasonSceneExceptions() {
-            const indexerName = document.querySelector('#indexer-name').value;
-            const seriesId = document.querySelector('#series-id').value;
-            if (!indexerName || !seriesId) {
+            const { indexer, id } = this;
+
+            if (!indexer || !id) {
                 console.warn('Unable to get season scene exceptions: Unknown series identifier');
                 return;
             }
-            const params = {
-                indexername: indexerName,
-                seriesid: seriesId
-            };
-            apiRoute.get('home/getSeasonSceneExceptions', { params }).then(response => {
+
+            apiRoute.get('home/getSeasonSceneExceptions', {
+                params: {
+                    indexername: indexer,
+                    seriesid: id
+                }
+            }).then(response => {
                 this.setSeasonSceneExceptions(response.data);
             }).catch(error => {
                 console.error('Error getting season scene exceptions', error);
@@ -504,6 +538,41 @@ export default {
                     $('#' + seasonNo + '-cols').show();
                 }
             });
+        },
+        toggleSpecials() {
+            this.$store.dispatch('setConfig', {
+                layout: {
+                    show: {
+                        specials: !this.config.layout.show.specials
+                    }
+                }
+            });
+        },
+        reverse(array) {
+            return array ? array.slice().reverse() : [];
+        },
+        dedupeGenres(genres) {
+            return genres ? [...new Set(genres.slice(0).map(genre => genre.replace('-', ' ')))] : [];
+        }
+    },
+    watch: {
+        jumpToSeason(season) {
+            // Don't jump until an option is selected
+            if (season !== 'jump') {
+                console.debug(`Jumping to ${season}`);
+
+                scrollTo(season, 100, {
+                    container: 'body',
+                    easing: 'ease-in',
+                    offset: -100
+                });
+
+                // Update URL hash
+                location.hash = season;
+
+                // Reset jump
+                this.jumpToSeason = 'jump';
+            }
         }
     }
 };
diff --git a/themes-default/slim/src/components/snatch-selection.vue b/themes-default/slim/src/components/snatch-selection.vue
index 1576c74020..f2f3f5976f 100644
--- a/themes-default/slim/src/components/snatch-selection.vue
+++ b/themes-default/slim/src/components/snatch-selection.vue
@@ -22,7 +22,8 @@ export default {
     },
     computed: {
         ...mapState({
-            shows: state => state.shows.shows
+            shows: state => state.shows.shows,
+            indexerConfig: state => state.config.indexers.config.indexers
         }),
         ...mapGetters([
             'getShowById'
@@ -53,6 +54,17 @@ export default {
             }
 
             return show;
+        },
+        showIndexerUrl() {
+            const { show, indexerConfig } = this;
+
+            if (!show.indexer || !indexerConfig) {
+                return undefined;
+            }
+
+            const id = show.id[show.indexer];
+            const indexerUrl = indexerConfig[show.indexer].showUrl;
+            return `${indexerUrl}${id}`;
         }
     },
     created() {
@@ -64,6 +76,8 @@ export default {
         reflowLayout() {
             this.$nextTick(() => {
                 this.moveSummaryBackground();
+
+                attachImdbTooltip(); // eslint-disable-line no-undef
             });
         },
         /**
@@ -75,18 +89,23 @@ export default {
             $('#summaryBackground').height(height);
             $('#summaryBackground').offset({ top, left: 0 });
             $('#summaryBackground').show();
+        },
+        reverse(array) {
+            return array ? array.slice().reverse() : [];
+        },
+        dedupeGenres(genres) {
+            return genres ? [...new Set(genres.slice(0).map(genre => genre.replace('-', ' ')))] : [];
         }
     },
     mounted() {
-        window.addEventListener('load', () => {
-            // Adjust the summary background position and size
-            this.reflowLayout();
+        this.$watch('show', () => {
+            this.$nextTick(() => this.reflowLayout());
         });
 
-        attachImdbTooltip(); // eslint-disable-line no-undef
-
-        window.addEventListener('resize', () => {
-            this.reflowLayout();
+        ['load', 'resize'].map(event => {
+            return window.addEventListener(event, () => {
+                this.reflowLayout();
+            });
         });
 
         const updateSpinner = function(message, showSpinner) {
@@ -133,12 +152,6 @@ export default {
             });
         });
 
-        $.fn.generateStars = function() {
-            return this.each((index, element) => {
-                $(element).html($('<span/>').width($(element).text() * 12));
-            });
-        };
-
         function initTableSorter(table) {
             // Nasty hack to re-initialize tablesorter after refresh
             $(table).tablesorter({
@@ -180,8 +193,6 @@ export default {
             });
         }
 
-        $('.imdbstars').generateStars();
-
         function checkCacheUpdates(repeat) {
             let pollInterval = 5000;
             repeat = repeat || true;
diff --git a/themes-default/slim/src/store/modules/defaults.js b/themes-default/slim/src/store/modules/defaults.js
index 7c7f854c6f..6ee544782b 100644
--- a/themes-default/slim/src/store/modules/defaults.js
+++ b/themes-default/slim/src/store/modules/defaults.js
@@ -42,7 +42,7 @@ const state = {
         status: null,
         title: null,
         type: null,
-        year: null
+        year: {}
     }
 };
 
diff --git a/themes-default/slim/views/partials/seasonEpisode.mako b/themes-default/slim/views/partials/seasonEpisode.mako
deleted file mode 100644
index f46a2fe5a0..0000000000
--- a/themes-default/slim/views/partials/seasonEpisode.mako
+++ /dev/null
@@ -1,6 +0,0 @@
-Manual search for:<br>
-    <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.series_id}" class="snatchTitle">${show.name}</app-link> / Season ${season}
-        % if manual_search_type != 'season':
-            Episode ${episode}
-        % endif
-    </app-link>
diff --git a/themes-default/slim/views/partials/showheader.mako b/themes-default/slim/views/partials/showheader.mako
index 24d5fd2216..8083828b34 100644
--- a/themes-default/slim/views/partials/showheader.mako
+++ b/themes-default/slim/views/partials/showheader.mako
@@ -10,64 +10,52 @@
 <%namespace file="/inc_defs.mako" import="renderQualityPill"/>
 
 <div class="row">
-    <div id="showtitle" class="col-lg-12" data-showname="${show.name | h}">
+    ## @TODO: Remove data attributes
+    ## @SEE: https://github.com/pymedusa/Medusa/pull/5087#discussion_r214074436
+    <div id="showtitle" class="col-lg-12" :data-showname="show.title">
         <div>
-            <h1 class="title" data-indexer-name="${show.indexer_name}" data-series-id="${show.indexerid}" id="scene_exception_${show.indexerid}">
-                <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.indexerid}" class="snatchTitle">${show.name | h}</app-link>
+            ## @TODO: Remove data attributes
+            ## @SEE: https://github.com/pymedusa/Medusa/pull/5087#discussion_r214077142
+            <h1 class="title" :data-indexer-name="show.indexer" :data-series-id="show.id[show.indexer]" :id="'scene_exception_' + show.id[show.indexer]">
+                <app-link :href="'home/displayShow?indexername=' + show.indexer + '&seriesid=' + show.id[show.indexer]" class="snatchTitle">{{ show.title }}</app-link>
             </h1>
         </div>
 
-    % if action == 'snatchSelection':
-        <div id="show-specials-and-seasons" class="pull-right">
+        <div v-if="$route.name === 'snatchSelection'" id="show-specials-and-seasons" class="pull-right">
             <span class="h2footer display-specials">
-                <%include file="/partials/seasonEpisode.mako"/>
+                Manual search for:<br>
+                <app-link
+                    :href="'home/displayShow?indexername=' + show.indexer + '&seriesid=' + show.id[show.indexer]"
+                    class="snatchTitle"
+                    >{{ show.title }}</app-link> / Season {{ season }}<template v-if="episode && !$route.query.manual_search_type"> Episode {{ episode }}</template>
             </span>
         </div>
-    % else:
-        % if season_results:
-            ##There is a special/season_0?##
-            % if int(season_results[-1]["season"]) == 0:
-                <% season_special = 1 %>
-            % else:
-                <% season_special = 0 %>
-            % endif
-            % if not app.DISPLAY_SHOW_SPECIALS and season_special:
-                <% lastSeason = season_results.pop(-1) %>
-            % endif
-            <div id="show-specials-and-seasons" class="pull-right">
-                <span class="h2footer display-specials">
-                % if season_special:
-                    Display Specials: <a class="inner" style="cursor: pointer;">${'Hide' if app.DISPLAY_SHOW_SPECIALS else 'Show'}</a>
-                % endif
-                </span>
+        <div v-if="$route.name !== 'snatchSelection' && show.seasons && show.seasons.length >= 1" id="show-specials-and-seasons" class="pull-right">
+            <span class="h2footer display-specials" v-if="show.seasons.find(season => ({ season }) => season === 0)">
+                Display Specials: <a @click="toggleSpecials()" class="inner" style="cursor: pointer;">{{ config.layout.show.specials ? 'Hide' : 'Show' }}</a>
+            </span>
 
-                <div class="h2footer display-seasons clear">
-                    <span>
-                    % if (len(season_results) > 14):
-                        <select id="seasonJump" class="form-control input-sm" style="position: relative">
-                            <option value="jump">Jump to Season</option>
-                        % for seasonNum in season_results:
-                            <option value="#season-${seasonNum["season"]}" data-season="${seasonNum["season"]}">${'Season ' + str(seasonNum["season"]) if int(seasonNum["season"]) > 0 else 'Specials'}</option>
-                        % endfor
-                        </select>
-                    % else:
+            <div class="h2footer display-seasons clear">
+                <span>
+                    <select v-if="show.seasons.length >= 15" v-model="jumpToSeason" id="seasonJump" class="form-control input-sm" style="position: relative">
+                        <option value="jump">Jump to Season</option>
+                        <option v-for="season in show.seasons" :value="'#season-' + season[0].season" :data-season="season[0].season">
+                        <%text>
+                            {{ season[0].season === 0 ? 'Specials' : `Season ${season[0].season}` }}
+                        </%text>
+                        </option>
+                    </select>
+                    <template v-else-if="show.seasons.length >= 1">
                         Season:
-                        % for seasonNum in season_results:
-                            % if int(seasonNum["season"]) == 0:
-                                <app-link href="#season-${seasonNum["season"]}">Specials</app-link>
-                            % else:
-                                <app-link href="#season-${seasonNum["season"]}">${str(seasonNum["season"])}</app-link>
-                            % endif
-                            % if seasonNum != season_results[-1]:
-                                <span class="separator">|</span>
-                            % endif
-                        % endfor
-                    % endif
-                    </span>
-                </div>
+                        <template v-for="(season, $index) in reverse(show.seasons)">
+                            <app-link :href="'#season-' + season[0].season">{{ season[0].season === 0 ? 'Specials' : season[0].season }}</app-link>
+                            <slot> </slot>
+                            <span v-if="$index !== (show.seasons.length - 1)" class="separator">| </span>
+                        </template>
+                    </template>
+                </span>
             </div>
-            % endif
-        % endif
+        </div>
     </div> <!-- end show title -->
 </div> <!-- end row showtitle-->
 
@@ -84,7 +72,7 @@
         <div class="show-poster-container">
             <div class="row">
                 <div class="image-flex-container col-md-12">
-                    <asset default="images/poster.png" show-slug="${show.slug}" type="posterThumb" cls="show-image shadow" :link="true"></asset>
+                    <asset default="images/poster.png" :show-slug="show.id.slug" type="posterThumb" cls="show-image shadow" :link="true"></asset>
                 </div>
             </div>
         </div>
@@ -94,55 +82,50 @@
         <div class="show-info-container">
             <div class="row">
                 <div class="pull-right col-lg-3 col-md-3 hidden-sm hidden-xs">
-                    <asset default="images/banner.png" show-slug="${show.slug}" type="banner" cls="show-banner pull-right shadow" :link="true"></asset>
+                    <asset default="images/banner.png" :show-slug="show.id.slug" type="banner" cls="show-banner pull-right shadow" :link="true"></asset>
                 </div>
                 <div id="show-rating" class="pull-left col-lg-9 col-md-9 col-sm-12 col-xs-12">
-                 % if 'rating' in show.imdb_info:
-                     <% rating_tip = str(show.imdb_info['rating']) + " / 10" + " Stars" + "<br>" + str(show.imdb_info['votes']) + " Votes" %>
-                     <span class="imdbstars" qtip-content="${rating_tip}">${show.imdb_info['rating']}</span>
-                 % endif
-                 % if not show.imdb_id:
-                     <span>(${show.start_year}) - ${show.runtime} minutes - </span>
-                 % else:
-                     % if 'country_codes' in show.imdb_info:
-                         % for country in show.imdb_info['country_codes'].split('|'):
-                                 <img src="images/blank.png" class="country-flag flag-${country}" width="16" height="11" style="margin-left: 3px; vertical-align:middle;" />
-                         % endfor
-                     % endif
-                                 <span>
-                     % if show.imdb_info.get('year'):
-                                     (${show.imdb_info['year']}) -
-                     % endif
-                                     ${show.imdb_info.get('runtimes') or show.runtime} minutes
-                                 </span>
-                                 <app-link href="http://www.imdb.com/title/${show.imdb_id}" title="http://www.imdb.com/title/${show.imdb_id}">
-                                     <img alt="[imdb]" height="16" width="16" src="images/imdb.png" style="margin-top: -1px; vertical-align:middle;"/>
-                                 </app-link>
-                 % endif
-                % if show.externals.get('trakt_id'):
-                    <app-link href="https://trakt.tv/shows/${show.externals.get('trakt_id')}" title="https://trakt.tv/shows/${show.externals.get('trakt_id')}">
+                    <span v-if="show.rating.imdb && show.rating.imdb.rating"
+                        class="imdbstars"
+                        :qtip-content="show.rating.imdb.rating + ' / 10 Stars<br> ' + show.rating.imdb.votes + ' Votes'"
+                    >
+                        <span :style="{ width: (Number(show.rating.imdb.rating) * 12) + '%' }"></span>
+                    </span>
+                    <template v-if="!show.id.imdb">
+                        <span v-if="show.year.start">({{ show.year.start }}) - {{ show.runtime }} minutes - </span>
+                    </template>
+                    <template v-else>
+                        <img v-for="country in show.country_codes" src="images/blank.png" :class="['country-flag', 'flag-' + country]" width="16" height="11" style="margin-left: 3px; vertical-align:middle;" />
+                        <span>
+                        % if show.imdb_info.get('year'):
+                            (${show.imdb_info['year']}) -
+                        % endif
+                            ${show.imdb_info.get('runtimes') or show.runtime} minutes
+                        </span>
+                        <app-link :href="'https://www.imdb.com/title/' + show.id.imdb" :title="'https://www.imdb.com/title/' + show.id.imdb">
+                            <img alt="[imdb]" height="16" width="16" src="images/imdb.png" style="margin-top: -1px; vertical-align:middle;"/>
+                        </app-link>
+                    </template>
+                    <app-link v-if="show.id.trakt" :href="'https://trakt.tv/shows/' + show.id.trakt" :title="'https://trakt.tv/shows/' + show.id.trakt">
                         <img alt="[trakt]" height="16" width="16" src="images/trakt.png" />
                     </app-link>
-                % endif
-                 <app-link href="${indexerApi(show.indexer).config['show_url']}${show.indexerid}" title="${indexerApi(show.indexer).config["show_url"] + str(show.indexerid)}">
-                     <img alt="${indexerApi(show.indexer).name | h}" height="16" width="16" src="images/${indexerApi(show.indexer).config["icon"]}" style="margin-top: -1px; vertical-align:middle;"/>
-                 </app-link>
+                    <app-link v-if="showIndexerUrl" :href="showIndexerUrl" :title="showIndexerUrl">
+                        <img :alt="indexerConfig[show.indexer].name" height="16" width="16" :src="'images/' + indexerConfig[show.indexer].icon" style="margin-top: -1px; vertical-align:middle;"/>
+                    </app-link>
                  % if xem_numbering or xem_absolute_numbering:
                      <app-link href="http://thexem.de/search?q=${show.name | h}" title="http://thexem.de/search?q-${show.name | h}">
                          <img alt="[xem]" height="16" width="16" src="images/xem.png" style="margin-top: -1px; vertical-align:middle;"/>
                      </app-link>
                  % endif
-                     <app-link href="https://fanart.tv/series/${show.indexerid}" title="https://fanart.tv/series/${show.name | h}"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>
+                    <app-link :href="'https://fanart.tv/series/' + show.id[show.indexer]" :title="'https://fanart.tv/series/' + show.id[show.indexer]"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>
                  </div>
                  <div id="tags" class="pull-left col-lg-9 col-md-9 col-sm-12 col-xs-12">
                      <ul class="tags">
-                         % if show.imdb_info.get('genres'):
+                         %if show.genre:
+                            <app-link v-for="genre in dedupeGenres(show.genres)" :key="genre.toString()" :href="'https://trakt.tv/shows/popular/?genres=' + genre.toLowerCase().replace(' ', '-')" :title="'View other popular ' + genre + ' shows on trakt.tv.'"><li>{{ genre }}</li></app-link>
+                         % elif show.imdb_info.get('genres'):
                              % for imdbgenre in show.imdb_info['genres'].replace('Sci-Fi', 'Science-Fiction').split('|'):
-                                 <app-link href="http://www.imdb.com/search/title?count=100&title_type=tv_series&genres=${imdbgenre.lower()}" title="View other popular ${imdbgenre} shows on IMDB."><li>${imdbgenre}</li></app-link>
-                             % endfor
-                         % elif show.genre:
-                             % for genre in show.genre.strip('|').split('|'):
-                                 <app-link href="http://trakt.tv/shows/popular/?genres=${genre.lower()}" title="View other popular ${genre} shows on trakt.tv."><li>${genre}</li></app-link>
+                                 <app-link href="https://www.imdb.com/search/title?count=100&title_type=tv_series&genres=${imdbgenre.lower()}" title="View other popular ${imdbgenre} shows on IMDB."><li>${imdbgenre}</li></app-link>
                              % endfor
                          % endif
                      </ul>
@@ -152,7 +135,7 @@
             <div class="row">
                 <!-- Show Summary -->
                 <div id="summary" class="col-md-12">
-                    <div id="show-summary" class="${'summaryFanArt' if app.FANART_BACKGROUND else ''} col-lg-9 col-md-8 col-sm-8 col-xs-12">
+                    <div id="show-summary" :class="[{ summaryFanArt: config.fanartBackground }, 'col-lg-9', 'col-md-8', 'col-sm-8', 'col-xs-12']">
                         <table class="summaryTable pull-left">
                             <tr v-if="show.plot">
                                 <td colspan="2" style="padding-bottom: 15px;">
@@ -173,15 +156,11 @@
                                 % endif
                             % endif
                                 </td></tr>
-                            % if show.network and show.airs:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.airs} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"} on ${show.network}</td></tr>
-                            % elif show.network:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.network}</td></tr>
-                            % elif show.airs:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.airs} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"}</td></tr>
-                            % endif
-                                <tr><td class="showLegend">Show Status: </td><td>${show.status}</td></tr>
-                                <tr><td class="showLegend">Default EP Status: </td><td>${statusStrings[show.default_ep_status]}</td></tr>
+                                <tr v-if="show.network && show.airs"><td class="showLegend">Originally Airs: </td><td>{{ show.airs }} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"} on {{ show.network }}</td></tr>
+                                <tr v-else-if="show.network"><td class="showLegend">Originally Airs: </td><td>{{ show.network }}</td></tr>
+                                <tr v-else-if="show.airs"><td class="showLegend">Originally Airs: </td><td>{{ show.airs }} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"}</td></tr>
+                                <tr><td class="showLegend">Show Status: </td><td>{{ show.status }}</td></tr>
+                                <tr><td class="showLegend">Default EP Status: </td><td>{{ show.config.defaultEpisodeStatus }}</td></tr>
                             % if showLoc[1]:
                                 <tr><td class="showLegend">Location: </td><td>${showLoc[0]}</td></tr>
                             % else:
@@ -223,16 +202,14 @@
                         <table class="pull-xs-left pull-md-right pull-sm-right pull-lg-right">
                             <% info_flag = subtitles.code_from_code(show.lang) if show.lang else '' %>
                             <tr><td class="showLegend">Info Language:</td><td><img src="images/subtitles/flags/${info_flag}.png" width="16" height="11" alt="${show.lang}" title="${show.lang}" onError="this.onerror=null;this.src='images/flags/unknown.png';"/></td></tr>
-                            % if app.USE_SUBTITLES:
-                            <tr><td class="showLegend">Subtitles: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.subtitles)]}" alt="${("N", "Y")[bool(show.subtitles)]}" width="16" height="16" /></td></tr>
-                            % endif
-                            <tr><td class="showLegend">Season Folders: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" alt="${("N", "Y")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Paused: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.paused)]}" alt="${("N", "Y")[bool(show.paused)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Air-by-Date: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.air_by_date)]}" alt="${("N", "Y")[bool(show.air_by_date)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Sports: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.is_sports)]}" alt="${("N", "Y")[bool(show.is_sports)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Anime: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.is_anime)]}" alt="${("N", "Y")[bool(show.is_anime)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">DVD Order: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.dvd_order)]}" alt="${("N", "Y")[bool(show.dvd_order)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Scene Numbering: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.scene)]}" alt="${("N", "Y")[bool(show.scene)]}" width="16" height="16" /></td></tr>
+                            <tr v-if="config.subtitles.enabled"><td class="showLegend">Subtitles: </td><td><img :src="'images/' + (show.config.subtitlesEnabled ? 'yes' : 'no') + '16.png'" :alt="show.config.subtitlesEnabled ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Season Folders: </td><td><img :src="'images/' + (show.config.seasonFolders || config.namingForceFolders ? 'yes' : 'no') + '16.png'" :alt="show.config.seasonFolders || config.namingForceFolders ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Paused: </td><td><img :src="'images/' + (show.config.paused ? 'yes' : 'no') + '16.png'" :alt="show.config.paused ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Air-by-Date: </td><td><img :src="'images/' + (show.config.airByDate ? 'yes' : 'no') + '16.png'" :alt="show.config.airByDate ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Sports: </td><td><img :src="'images/' + (show.config.sports ? 'yes' : 'no') + '16.png'" :alt="show.config.sports ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Anime: </td><td><img :src="'images/' + (show.config.anime ? 'yes' : 'no') + '16.png'" :alt="show.config.anime ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">DVD Order: </td><td><img :src="'images/' + (show.config.dvdOrder ? 'yes' : 'no') + '16.png'" :alt="show.config.dvdOrder ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Scene Numbering: </td><td><img :src="'images/' + (show.config.scene ? 'yes' : 'no') + '16.png'" :alt="show.config.scene ? 'Y' : 'N'" width="16" height="16" /></td></tr>
                         </table>
                      </div> <!-- end of show-status -->
                 </div> <!-- end of summary -->
@@ -243,8 +220,7 @@
 
 <div id="row-show-episodes-controls" class="row">
     <div id="col-show-episodes-controls" class="col-md-12">
-    % if (action == "displayShow"):
-        <div class="row key"> <!-- Checkbox filter controls -->
+        <div v-if="$route.name === 'displayShow'" class="row key"> <!-- Checkbox filter controls -->
             <div class="col-lg-12" id="checkboxControls">
                 <div id="key-padding" class="pull-left top-5">
                     <% total_snatched = ep_counts[Overview.SNATCHED] + ep_counts[Overview.SNATCHED_PROPER] + ep_counts[Overview.SNATCHED_BEST] %>
@@ -283,8 +259,6 @@
                 </div>
             </div> <!-- checkboxControls -->
         </div> <!-- end of row -->
-    % else:
-        <div></div>
-    % endif
+        <div v-else></div>
     </div> <!-- end of col -->
 </div> <!-- end of row -->
diff --git a/themes-default/slim/yarn.lock b/themes-default/slim/yarn.lock
index fed398daf3..b251dedb04 100644
--- a/themes-default/slim/yarn.lock
+++ b/themes-default/slim/yarn.lock
@@ -1402,6 +1402,10 @@ beeper@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
 
+bezier-easing@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -5082,6 +5086,13 @@ is-valid-glob@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-0.3.0.tgz#d4b55c69f51886f9b65c70d6c2622d37e29f48fe"
 
+is-visible@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-visible/-/is-visible-2.2.0.tgz#722b3acff3694a30074927e1156f58ae87db0e9c"
+  dependencies:
+    iselement "^1.1.3"
+    style-properties "^1.3.1"
+
 is-whitespace-character@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
@@ -5110,6 +5121,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+iselement@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/iselement/-/iselement-1.1.4.tgz#7e55b52a8ebca50a7e2e80e5b8d2840f32353146"
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -8165,6 +8180,10 @@ strip-outer@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+style-properties@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/style-properties/-/style-properties-1.3.1.tgz#7f8617421f2959157f08d09eecba8688a15854c5"
+
 style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
@@ -9043,6 +9062,12 @@ vue-router@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
 
+vue-scrollto@2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/vue-scrollto/-/vue-scrollto-2.11.0.tgz#0657f127faded60a71fbcc841f393279a49aed55"
+  dependencies:
+    bezier-easing "^2.0.3"
+
 vue-snotify@3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/vue-snotify/-/vue-snotify-3.2.1.tgz#1e093838b67ecb4141d6227b6b19175735f4e259"
diff --git a/themes/dark/assets/js/vendors.js b/themes/dark/assets/js/vendors.js
index 46553452d9..8118a080d9 100644
--- a/themes/dark/assets/js/vendors.js
+++ b/themes/dark/assets/js/vendors.js
@@ -603,7 +603,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\n/* harmony import */ var _plot_info_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./plot-info.vue */ \"./src/components/plot-info.vue\");\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'displayShow',\n  template: '#display-show-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    PlotInfo: _plot_info_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.$route.query.seriesid;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      }\n\n      return show;\n    }\n  }),\n  mounted: function mounted() {\n    var _this = this;\n\n    var setQuality = this.setQuality,\n        setEpisodeSceneNumbering = this.setEpisodeSceneNumbering,\n        setAbsoluteSceneNumbering = this.setAbsoluteSceneNumbering,\n        setInputValidInvalid = this.setInputValidInvalid,\n        getSeasonSceneExceptions = this.getSeasonSceneExceptions,\n        showHideRows = this.showHideRows;\n    $(window).on('resize', function () {\n      _this.reflowLayout();\n    });\n    window.addEventListener('load', function () {\n      _this.reflowLayout();\n\n      $.ajaxEpSearch({\n        colorRow: true\n      });\n      startAjaxEpisodeSubtitles(); // eslint-disable-line no-undef\n\n      $.ajaxEpSubtitlesSearch();\n      $.ajaxEpRedownloadSubtitle();\n    });\n    $(document.body).on('change', '#seasonJump', function (event) {\n      var id = $('#seasonJump option:selected').val();\n\n      if (id && id !== 'jump') {\n        var season = $('#seasonJump option:selected').data('season');\n        $('html,body').animate({\n          scrollTop: $('[name=\"' + id.substring(1) + '\"]').offset().top - 100\n        }, 'slow');\n        $('#collapseSeason-' + season).collapse('show');\n        location.hash = id;\n      }\n\n      $(event.currentTarget).val('jump');\n    });\n    $(document.body).on('click', '#changeStatus', function () {\n      var epArr = [];\n      var status = $('#statusSelect').val();\n      var quality = $('#qualitySelect').val();\n      var showSlug = $('#series-slug').val();\n      $('.epCheck').each(function (index, element) {\n        if (element.checked === true) {\n          epArr.push($(element).attr('id'));\n        }\n      });\n\n      if (epArr.length === 0) {\n        return false;\n      }\n\n      if (quality) {\n        setQuality(quality, showSlug, epArr);\n      }\n\n      if (status) {\n        window.location.href = $('base').attr('href') + 'home/setStatus?' + 'indexername=' + $('#indexer-name').attr('value') + '&seriesid=' + $('#series-id').attr('value') + '&eps=' + epArr.join('|') + '&status=' + status;\n      }\n    });\n    $(document.body).on('click', '.seasonCheck', function (event) {\n      var seasCheck = event.currentTarget;\n      var seasNo = $(seasCheck).attr('id');\n      $('#collapseSeason-' + seasNo).collapse('show');\n      var seasonIdentifier = 's' + seasNo;\n      $('.epCheck:visible').each(function (index, element) {\n        var epParts = $(element).attr('id').split('e');\n\n        if (epParts[0] === seasonIdentifier) {\n          element.checked = seasCheck.checked;\n        }\n      });\n    });\n    var lastCheck = null;\n    $(document.body).on('click', '.epCheck', function (event) {\n      var target = event.currentTarget;\n\n      if (!lastCheck || !event.shiftKey) {\n        lastCheck = target;\n        return;\n      }\n\n      var check = target;\n      var found = 0;\n      $('.epCheck').each(function (index, element) {\n        if (found === 1) {\n          element.checked = lastCheck.checked;\n        }\n\n        if (found === 2) {\n          return false;\n        }\n\n        if (element === check || element === lastCheck) {\n          found++;\n        }\n      });\n    }); // Selects all visible episode checkboxes.\n\n    $(document.body).on('click', '.seriesCheck', function () {\n      $('.epCheck:visible').each(function (index, element) {\n        element.checked = true;\n      });\n      $('.seasonCheck:visible').each(function (index, element) {\n        element.checked = true;\n      });\n    }); // Clears all visible episode checkboxes and the season selectors\n\n    $(document.body).on('click', '.clearAll', function () {\n      $('.epCheck:visible').each(function (index, element) {\n        element.checked = false;\n      });\n      $('.seasonCheck:visible').each(function (index, element) {\n        element.checked = false;\n      });\n    }); // Show/hide different types of rows when the checkboxes are changed\n\n    $(document.body).on('change', '#checkboxControls input', function (event) {\n      var whichClass = $(event.currentTarget).attr('id');\n      showHideRows(whichClass);\n    }); // Initially show/hide all the rows according to the checkboxes\n\n    $('#checkboxControls input').each(function (index, element) {\n      var status = $(element).prop('checked');\n      $('tr.' + $(element).attr('id')).each(function (index, tableRow) {\n        if (status) {\n          $(tableRow).show();\n        } else {\n          $(tableRow).hide();\n        }\n      });\n    });\n    $(document.body).on('change', '.sceneSeasonXEpisode', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      var value = $(target).val();\n      $(target).val(value.replace(/[^0-9xX]*/g, ''));\n      var forSeason = $(target).attr('data-for-season');\n      var forEpisode = $(target).attr('data-for-episode'); // If empty reset the field\n\n      if (value === '') {\n        setEpisodeSceneNumbering(forSeason, forEpisode, null, null);\n        return;\n      }\n\n      var m = $(target).val().match(/^(\\d+)x(\\d+)$/i);\n      var onlyEpisode = $(target).val().match(/^(\\d+)$/i);\n      var sceneSeason = null;\n      var sceneEpisode = null;\n      var isValid = false;\n\n      if (m) {\n        sceneSeason = m[1];\n        sceneEpisode = m[2];\n        isValid = setInputValidInvalid(true, $(target));\n      } else if (onlyEpisode) {\n        // For example when '5' is filled in instead of '1x5', asume it's the first season\n        sceneSeason = forSeason;\n        sceneEpisode = onlyEpisode[1];\n        isValid = setInputValidInvalid(true, $(target));\n      } else {\n        isValid = setInputValidInvalid(false, $(target));\n      }\n\n      if (isValid) {\n        setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode);\n      }\n    });\n    $(document.body).on('change', '.sceneAbsolute', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      $(target).val($(target).val().replace(/[^0-9xX]*/g, ''));\n      var forAbsolute = $(target).attr('data-for-absolute');\n      var m = $(target).val().match(/^(\\d{1,3})$/i);\n      var sceneAbsolute = null;\n\n      if (m) {\n        sceneAbsolute = m[1];\n      }\n\n      setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute);\n    });\n    $('#showTable, #animeTable').tablesorter({\n      widgets: ['saveSort', 'stickyHeaders', 'columnSelector'],\n      widgetOptions: {\n        columnSelector_saveColumns: true,\n        // eslint-disable-line camelcase\n        columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n        // eslint-disable-line camelcase\n        columnSelector_mediaquery: false,\n        // eslint-disable-line camelcase\n        columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n      }\n    });\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#showTable, #animeTable'), '#popover-target');\n    }); // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the\n    // Season to Show Episodes or Hide Episodes.\n\n    $('.collapse.toggle').on('hide.bs.collapse', function () {\n      var reg = /collapseSeason-(\\d+)/g;\n      var result = reg.exec(this.id);\n      $('#showseason-' + result[1]).text('Show Episodes');\n      $('#season-' + result[1] + '-cols').addClass('shadow');\n    });\n    $('.collapse.toggle').on('show.bs.collapse', function () {\n      var reg = /collapseSeason-(\\d+)/g;\n      var result = reg.exec(this.id);\n      $('#showseason-' + result[1]).text('Hide Episodes');\n      $('#season-' + result[1] + '-cols').removeClass('shadow');\n    }); // Generate IMDB stars\n\n    $('.imdbstars').each(function (index, element) {\n      $(element).html($('<span/>').width($(element).text() * 12));\n    });\n    attachImdbTooltip(); // eslint-disable-line no-undef\n    // Get the season exceptions and the xem season mappings.\n\n    getSeasonSceneExceptions();\n    $(document.body).on('click', '.display-specials a', function (event) {\n      _api__WEBPACK_IMPORTED_MODULE_1__[\"api\"].patch('config/main', {\n        layout: {\n          show: {\n            specials: $(event.currentTarget).text() !== 'Hide'\n          }\n        }\n      }).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    });\n  },\n  methods: {\n    /**\n     * Moves summary background and checkbox controls\n     */\n    reflowLayout: function reflowLayout() {\n      var _this2 = this;\n\n      this.$nextTick(function () {\n        _this2.moveSummaryBackground();\n\n        _this2.movecheckboxControlsBackground();\n      });\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    },\n    movecheckboxControlsBackground: function movecheckboxControlsBackground() {\n      var height = $('#checkboxControls').height() + 10;\n      var top = $('#checkboxControls').offset().top - 3;\n      $('#checkboxControlsBackground').height(height);\n      $('#checkboxControlsBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#checkboxControlsBackground').show();\n    },\n    setQuality: function setQuality(quality, showSlug, episodes) {\n      var patchData = {};\n      episodes.forEach(function (episode) {\n        patchData[episode] = {\n          quality: parseInt(quality, 10)\n        };\n      });\n      _api__WEBPACK_IMPORTED_MODULE_1__[\"api\"].patch('series/' + showSlug + '/episodes', patchData).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    },\n    setEpisodeSceneNumbering: function setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneSeason === '') {\n        sceneSeason = null;\n      }\n\n      if (sceneEpisode === '') {\n        sceneEpisode = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forSeason: forSeason,\n        forEpisode: forEpisode,\n        sceneSeason: sceneSeason,\n        sceneEpisode: sceneEpisode\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneSeason === null || data.sceneEpisode === null) {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val('');\n        } else {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val(data.sceneSeason + 'x' + data.sceneEpisode);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setAbsoluteSceneNumbering: function setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneAbsolute === '') {\n        sceneAbsolute = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forAbsolute: forAbsolute,\n        sceneAbsolute: sceneAbsolute\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneAbsolute === null) {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val('');\n        } else {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val(data.sceneAbsolute);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setInputValidInvalid: function setInputValidInvalid(valid, el) {\n      if (valid) {\n        $(el).css({\n          'background-color': '#90EE90',\n          // Green\n          'color': '#FFF',\n          // eslint-disable-line quote-props\n          'font-weight': 'bold'\n        });\n        return true;\n      }\n\n      $(el).css({\n        'background-color': '#FF0000',\n        // Red\n        'color': '#FFF!important',\n        // eslint-disable-line quote-props\n        'font-weight': 'bold'\n      });\n      return false;\n    },\n    // @TODO: OMG: This is just a basic json, in future it should be based on the CRUD route.\n    // Get the season exceptions and the xem season mappings.\n    getSeasonSceneExceptions: function getSeasonSceneExceptions() {\n      var _this3 = this;\n\n      var indexerName = document.querySelector('#indexer-name').value;\n      var seriesId = document.querySelector('#series-id').value;\n\n      if (!indexerName || !seriesId) {\n        console.warn('Unable to get season scene exceptions: Unknown series identifier');\n        return;\n      }\n\n      var params = {\n        indexername: indexerName,\n        seriesid: seriesId\n      };\n      _api__WEBPACK_IMPORTED_MODULE_1__[\"apiRoute\"].get('home/getSeasonSceneExceptions', {\n        params: params\n      }).then(function (response) {\n        _this3.setSeasonSceneExceptions(response.data);\n      }).catch(function (error) {\n        console.error('Error getting season scene exceptions', error);\n      });\n    },\n    // Set the season exception based on using the get_xem_numbering_for_show() for animes if available in data.xemNumbering,\n    // or else try to map using just the data.season_exceptions.\n    setSeasonSceneExceptions: function setSeasonSceneExceptions(data) {\n      $.each(data.seasonExceptions, function (season, nameExceptions) {\n        var foundInXem = false; // Check if it is a season name exception, we don't handle the show name exceptions here\n\n        if (season >= 0) {\n          // Loop through the xem mapping, and check if there is a xem_season, that needs to show the season name exception\n          $.each(data.xemNumbering, function (indexerSeason, xemSeason) {\n            if (xemSeason === parseInt(season, 10)) {\n              foundInXem = true;\n              $('<img>', {\n                id: 'xem-exception-season-' + xemSeason,\n                alt: '[xem]',\n                height: '16',\n                width: '16',\n                src: 'images/xem.png',\n                title: nameExceptions.join(', ')\n              }).appendTo('[data-season=' + indexerSeason + ']');\n            }\n          }); // This is not a xem season exception, let's set the exceptions as a medusa exception\n\n          if (!foundInXem) {\n            $('<img>', {\n              id: 'xem-exception-season-' + season,\n              alt: '[medusa]',\n              height: '16',\n              width: '16',\n              src: 'images/ico/favicon-16.png',\n              title: nameExceptions.join(', ')\n            }).appendTo('[data-season=' + season + ']');\n          }\n        }\n      });\n    },\n    showHideRows: function showHideRows(whichClass) {\n      var status = $('#checkboxControls > input, #' + whichClass).prop('checked');\n      $('tr.' + whichClass).each(function (index, element) {\n        if (status) {\n          $(element).show();\n        } else {\n          $(element).hide();\n        }\n      }); // Hide season headers with no episodes under them\n\n      $('tr.seasonheader').each(function (index, element) {\n        var numRows = 0;\n        var seasonNo = $(element).attr('id');\n        $('tr.' + seasonNo + ' :visible').each(function () {\n          numRows++;\n        });\n\n        if (numRows === 0) {\n          $(element).hide();\n          $('#' + seasonNo + '-cols').hide();\n        } else {\n          $(element).show();\n          $('#' + seasonNo + '-cols').show();\n        }\n      });\n    }\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var is_visible__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! is-visible */ \"./node_modules/is-visible/module/index.js\");\n/* harmony import */ var vue_scrollto__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-scrollto */ \"./node_modules/vue-scrollto/vue-scrollto.js\");\n/* harmony import */ var vue_scrollto__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue_scrollto__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\n/* harmony import */ var _plot_info_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./plot-info.vue */ \"./src/components/plot-info.vue\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance\"); }\n\nfunction _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'displayShow',\n  template: '#display-show-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    PlotInfo: _plot_info_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  props: {\n    /**\n     * Show id\n     */\n    showId: {\n      type: Number\n    },\n\n    /**\n     * Show indexer\n     */\n    showIndexer: {\n      type: String\n    }\n  },\n  data: function data() {\n    return {\n      jumpToSeason: 'jump'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_2__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    },\n    indexerConfig: function indexerConfig(state) {\n      return state.config.indexers.config.indexers;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_2__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.showIndexer || this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.showId || this.$route.query.seriesid;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      } // Not detailed\n\n\n      if (!show.seasons) {\n        $store.dispatch('getShow', {\n          id: id,\n          indexer: indexer,\n          detailed: true\n        });\n        return getShowById({\n          indexer: indexer,\n          id: id\n        });\n      }\n\n      return show;\n    },\n    showIndexerUrl: function showIndexerUrl() {\n      var show = this.show,\n          indexerConfig = this.indexerConfig;\n\n      if (!show.indexer || !indexerConfig[show.indexer] || !indexerConfig[show.indexer].showUrl) {\n        return undefined;\n      }\n\n      var id = show.id[show.indexer];\n      var indexerUrl = indexerConfig[show.indexer].showUrl;\n      return \"\".concat(indexerUrl).concat(id);\n    }\n  }),\n  mounted: function mounted() {\n    var _this = this;\n\n    var setQuality = this.setQuality,\n        setEpisodeSceneNumbering = this.setEpisodeSceneNumbering,\n        setAbsoluteSceneNumbering = this.setAbsoluteSceneNumbering,\n        setInputValidInvalid = this.setInputValidInvalid,\n        getSeasonSceneExceptions = this.getSeasonSceneExceptions,\n        showHideRows = this.showHideRows;\n    this.$watch('show', function () {\n      _this.$nextTick(function () {\n        return _this.reflowLayout();\n      });\n    });\n    ['load', 'resize'].map(function (event) {\n      return window.addEventListener(event, function () {\n        _this.reflowLayout();\n      });\n    });\n    window.addEventListener('load', function () {\n      $.ajaxEpSearch({\n        colorRow: true\n      });\n      startAjaxEpisodeSubtitles(); // eslint-disable-line no-undef\n\n      $.ajaxEpSubtitlesSearch();\n      $.ajaxEpRedownloadSubtitle();\n    });\n    $(document.body).on('click', '#changeStatus', function () {\n      var epArr = [];\n      var status = $('#statusSelect').val();\n      var quality = $('#qualitySelect').val();\n      var showSlug = $('#series-slug').val();\n      $('.epCheck').each(function (index, element) {\n        if (element.checked === true) {\n          epArr.push($(element).attr('id'));\n        }\n      });\n\n      if (epArr.length === 0) {\n        return false;\n      }\n\n      if (quality) {\n        setQuality(quality, showSlug, epArr);\n      }\n\n      if (status) {\n        window.location.href = $('base').attr('href') + 'home/setStatus?' + 'indexername=' + $('#indexer-name').attr('value') + '&seriesid=' + $('#series-id').attr('value') + '&eps=' + epArr.join('|') + '&status=' + status;\n      }\n    });\n    $(document.body).on('click', '.seasonCheck', function (event) {\n      var seasCheck = event.currentTarget;\n      var seasNo = $(seasCheck).attr('id');\n      $('#collapseSeason-' + seasNo).collapse('show');\n      var seasonIdentifier = 's' + seasNo;\n      $('.epCheck:visible').each(function (index, element) {\n        var epParts = $(element).attr('id').split('e');\n\n        if (epParts[0] === seasonIdentifier) {\n          element.checked = seasCheck.checked;\n        }\n      });\n    });\n    var lastCheck = null;\n    $(document.body).on('click', '.epCheck', function (event) {\n      var target = event.currentTarget;\n\n      if (!lastCheck || !event.shiftKey) {\n        lastCheck = target;\n        return;\n      }\n\n      var check = target;\n      var found = 0;\n      $('.epCheck').each(function (index, element) {\n        if (found === 1) {\n          element.checked = lastCheck.checked;\n        }\n\n        if (found === 2) {\n          return false;\n        }\n\n        if (element === check || element === lastCheck) {\n          found++;\n        }\n      });\n    }); // Selects all visible episode checkboxes\n\n    document.addEventListener('click', function (event) {\n      if (event.target && event.target.className.includes('seriesCheck')) {\n        _toConsumableArray(document.querySelectorAll('.epCheck, .seasonCheck')).filter(is_visible__WEBPACK_IMPORTED_MODULE_0__[\"isVisible\"]).forEach(function (element) {\n          element.checked = true;\n        });\n      }\n    }); // Clears all visible episode checkboxes and the season selectors\n\n    document.addEventListener('click', function (event) {\n      if (event.target && event.target.className.includes('clearAll')) {\n        _toConsumableArray(document.querySelectorAll('.epCheck, .seasonCheck')).filter(is_visible__WEBPACK_IMPORTED_MODULE_0__[\"isVisible\"]).forEach(function (element) {\n          element.checked = false;\n        });\n      }\n    }); // Show/hide different types of rows when the checkboxes are changed\n\n    $(document.body).on('change', '#checkboxControls input', function (event) {\n      var whichClass = $(event.currentTarget).attr('id');\n      showHideRows(whichClass);\n    }); // Initially show/hide all the rows according to the checkboxes\n\n    $('#checkboxControls input').each(function (index, element) {\n      var status = $(element).prop('checked');\n      $('tr.' + $(element).attr('id')).each(function (index, tableRow) {\n        if (status) {\n          $(tableRow).show();\n        } else {\n          $(tableRow).hide();\n        }\n      });\n    });\n    $(document.body).on('change', '.sceneSeasonXEpisode', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      var value = $(target).val();\n      $(target).val(value.replace(/[^0-9xX]*/g, ''));\n      var forSeason = $(target).attr('data-for-season');\n      var forEpisode = $(target).attr('data-for-episode'); // If empty reset the field\n\n      if (value === '') {\n        setEpisodeSceneNumbering(forSeason, forEpisode, null, null);\n        return;\n      }\n\n      var m = $(target).val().match(/^(\\d+)x(\\d+)$/i);\n      var onlyEpisode = $(target).val().match(/^(\\d+)$/i);\n      var sceneSeason = null;\n      var sceneEpisode = null;\n      var isValid = false;\n\n      if (m) {\n        sceneSeason = m[1];\n        sceneEpisode = m[2];\n        isValid = setInputValidInvalid(true, $(target));\n      } else if (onlyEpisode) {\n        // For example when '5' is filled in instead of '1x5', asume it's the first season\n        sceneSeason = forSeason;\n        sceneEpisode = onlyEpisode[1];\n        isValid = setInputValidInvalid(true, $(target));\n      } else {\n        isValid = setInputValidInvalid(false, $(target));\n      }\n\n      if (isValid) {\n        setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode);\n      }\n    });\n    $(document.body).on('change', '.sceneAbsolute', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      $(target).val($(target).val().replace(/[^0-9xX]*/g, ''));\n      var forAbsolute = $(target).attr('data-for-absolute');\n      var m = $(target).val().match(/^(\\d{1,3})$/i);\n      var sceneAbsolute = null;\n\n      if (m) {\n        sceneAbsolute = m[1];\n      }\n\n      setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute);\n    });\n    $('#showTable, #animeTable').tablesorter({\n      widgets: ['saveSort', 'stickyHeaders', 'columnSelector'],\n      widgetOptions: {\n        columnSelector_saveColumns: true,\n        // eslint-disable-line camelcase\n        columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n        // eslint-disable-line camelcase\n        columnSelector_mediaquery: false,\n        // eslint-disable-line camelcase\n        columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n      }\n    });\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#showTable, #animeTable'), '#popover-target');\n    }); // Changes the button when clicked for collapsing/expanding the season to show/hide episodes\n\n    document.querySelectorAll('.collapse.toggle').forEach(function (element) {\n      element.addEventListener('hide.bs.collapse', function () {\n        // On hide\n        var reg = /collapseSeason-(\\d+)/g;\n        var result = reg.exec(_this.id);\n        $('#showseason-' + result[1]).text('Show Episodes');\n        $('#season-' + result[1] + '-cols').addClass('shadow');\n      });\n      element.addEventListener('show.bs.collapse', function () {\n        // On show\n        var reg = /collapseSeason-(\\d+)/g;\n        var result = reg.exec(_this.id);\n        $('#showseason-' + result[1]).text('Hide Episodes');\n        $('#season-' + result[1] + '-cols').removeClass('shadow');\n      });\n    }); // Get the season exceptions and the xem season mappings.\n\n    getSeasonSceneExceptions();\n    $(document.body).on('click', '.display-specials a', function (event) {\n      _api__WEBPACK_IMPORTED_MODULE_3__[\"api\"].patch('config/main', {\n        layout: {\n          show: {\n            specials: $(event.currentTarget).text() !== 'Hide'\n          }\n        }\n      }).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    });\n  },\n  methods: {\n    /**\n     * Attaches imdb tool tip,\n     * moves summary background and checkbox controls\n     */\n    reflowLayout: function reflowLayout() {\n      var _this2 = this;\n\n      console.debug('Reflowing layout');\n      this.$nextTick(function () {\n        _this2.moveSummaryBackground();\n\n        _this2.movecheckboxControlsBackground();\n      });\n      attachImdbTooltip(); // eslint-disable-line no-undef\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    },\n    movecheckboxControlsBackground: function movecheckboxControlsBackground() {\n      var height = $('#checkboxControls').height() + 10;\n      var top = $('#checkboxControls').offset().top - 3;\n      $('#checkboxControlsBackground').height(height);\n      $('#checkboxControlsBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#checkboxControlsBackground').show();\n    },\n    setQuality: function setQuality(quality, showSlug, episodes) {\n      var patchData = {};\n      episodes.forEach(function (episode) {\n        patchData[episode] = {\n          quality: parseInt(quality, 10)\n        };\n      });\n      _api__WEBPACK_IMPORTED_MODULE_3__[\"api\"].patch('series/' + showSlug + '/episodes', patchData).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    },\n    setEpisodeSceneNumbering: function setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneSeason === '') {\n        sceneSeason = null;\n      }\n\n      if (sceneEpisode === '') {\n        sceneEpisode = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forSeason: forSeason,\n        forEpisode: forEpisode,\n        sceneSeason: sceneSeason,\n        sceneEpisode: sceneEpisode\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneSeason === null || data.sceneEpisode === null) {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val('');\n        } else {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val(data.sceneSeason + 'x' + data.sceneEpisode);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setAbsoluteSceneNumbering: function setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneAbsolute === '') {\n        sceneAbsolute = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forAbsolute: forAbsolute,\n        sceneAbsolute: sceneAbsolute\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneAbsolute === null) {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val('');\n        } else {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val(data.sceneAbsolute);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setInputValidInvalid: function setInputValidInvalid(valid, el) {\n      if (valid) {\n        $(el).css({\n          'background-color': '#90EE90',\n          // Green\n          'color': '#FFF',\n          // eslint-disable-line quote-props\n          'font-weight': 'bold'\n        });\n        return true;\n      }\n\n      $(el).css({\n        'background-color': '#FF0000',\n        // Red\n        'color': '#FFF!important',\n        // eslint-disable-line quote-props\n        'font-weight': 'bold'\n      });\n      return false;\n    },\n    // @TODO: OMG: This is just a basic json, in future it should be based on the CRUD route.\n    // Get the season exceptions and the xem season mappings.\n    getSeasonSceneExceptions: function getSeasonSceneExceptions() {\n      var _this3 = this;\n\n      var indexer = this.indexer,\n          id = this.id;\n\n      if (!indexer || !id) {\n        console.warn('Unable to get season scene exceptions: Unknown series identifier');\n        return;\n      }\n\n      _api__WEBPACK_IMPORTED_MODULE_3__[\"apiRoute\"].get('home/getSeasonSceneExceptions', {\n        params: {\n          indexername: indexer,\n          seriesid: id\n        }\n      }).then(function (response) {\n        _this3.setSeasonSceneExceptions(response.data);\n      }).catch(function (error) {\n        console.error('Error getting season scene exceptions', error);\n      });\n    },\n    // Set the season exception based on using the get_xem_numbering_for_show() for animes if available in data.xemNumbering,\n    // or else try to map using just the data.season_exceptions.\n    setSeasonSceneExceptions: function setSeasonSceneExceptions(data) {\n      $.each(data.seasonExceptions, function (season, nameExceptions) {\n        var foundInXem = false; // Check if it is a season name exception, we don't handle the show name exceptions here\n\n        if (season >= 0) {\n          // Loop through the xem mapping, and check if there is a xem_season, that needs to show the season name exception\n          $.each(data.xemNumbering, function (indexerSeason, xemSeason) {\n            if (xemSeason === parseInt(season, 10)) {\n              foundInXem = true;\n              $('<img>', {\n                id: 'xem-exception-season-' + xemSeason,\n                alt: '[xem]',\n                height: '16',\n                width: '16',\n                src: 'images/xem.png',\n                title: nameExceptions.join(', ')\n              }).appendTo('[data-season=' + indexerSeason + ']');\n            }\n          }); // This is not a xem season exception, let's set the exceptions as a medusa exception\n\n          if (!foundInXem) {\n            $('<img>', {\n              id: 'xem-exception-season-' + season,\n              alt: '[medusa]',\n              height: '16',\n              width: '16',\n              src: 'images/ico/favicon-16.png',\n              title: nameExceptions.join(', ')\n            }).appendTo('[data-season=' + season + ']');\n          }\n        }\n      });\n    },\n    showHideRows: function showHideRows(whichClass) {\n      var status = $('#checkboxControls > input, #' + whichClass).prop('checked');\n      $('tr.' + whichClass).each(function (index, element) {\n        if (status) {\n          $(element).show();\n        } else {\n          $(element).hide();\n        }\n      }); // Hide season headers with no episodes under them\n\n      $('tr.seasonheader').each(function (index, element) {\n        var numRows = 0;\n        var seasonNo = $(element).attr('id');\n        $('tr.' + seasonNo + ' :visible').each(function () {\n          numRows++;\n        });\n\n        if (numRows === 0) {\n          $(element).hide();\n          $('#' + seasonNo + '-cols').hide();\n        } else {\n          $(element).show();\n          $('#' + seasonNo + '-cols').show();\n        }\n      });\n    },\n    toggleSpecials: function toggleSpecials() {\n      this.$store.dispatch('setConfig', {\n        layout: {\n          show: {\n            specials: !this.config.layout.show.specials\n          }\n        }\n      });\n    },\n    reverse: function reverse(array) {\n      return array ? array.slice().reverse() : [];\n    },\n    dedupeGenres: function dedupeGenres(genres) {\n      return genres ? _toConsumableArray(new Set(genres.slice(0).map(function (genre) {\n        return genre.replace('-', ' ');\n      }))) : [];\n    }\n  },\n  watch: {\n    jumpToSeason: function jumpToSeason(season) {\n      // Don't jump until an option is selected\n      if (season !== 'jump') {\n        console.debug(\"Jumping to \".concat(season));\n        Object(vue_scrollto__WEBPACK_IMPORTED_MODULE_1__[\"scrollTo\"])(season, 100, {\n          container: 'body',\n          easing: 'ease-in',\n          offset: -100\n        }); // Update URL hash\n\n        location.hash = season; // Reset jump\n\n        this.jumpToSeason = 'jump';\n      }\n    }\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -771,7 +771,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'snatchSelection',\n  template: '#snatch-selection-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.$route.query.seriesid;\n    },\n    season: function season() {\n      return this.$route.query.season;\n    },\n    episode: function episode() {\n      return this.$route.query.episode;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      }\n\n      return show;\n    }\n  }),\n  created: function created() {\n    var indexer = this.indexer,\n        id = this.id,\n        $store = this.$store; // Needed for the title\n\n    $store.dispatch('getShow', {\n      indexer: indexer,\n      id: id\n    });\n  },\n  methods: {\n    reflowLayout: function reflowLayout() {\n      var _this = this;\n\n      this.$nextTick(function () {\n        _this.moveSummaryBackground();\n      });\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    }\n  },\n  mounted: function mounted() {\n    var _this2 = this;\n\n    window.addEventListener('load', function () {\n      // Adjust the summary background position and size\n      _this2.reflowLayout();\n    });\n    attachImdbTooltip(); // eslint-disable-line no-undef\n\n    window.addEventListener('resize', function () {\n      _this2.reflowLayout();\n    });\n\n    var updateSpinner = function updateSpinner(message, showSpinner) {\n      // Get spinner object as needed\n      var spinner = $('#searchNotification');\n\n      if (showSpinner) {\n        message = '<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"16\" width=\"16\" />&nbsp;' + message;\n      }\n\n      $(spinner).empty().append(message);\n    }; // Check the previous status of the history table, for hidden or shown, through the data attribute\n    // data-history-toggle-hidden\n\n\n    function toggleHistoryTable() {\n      // eslint-disable-line no-unused-vars\n      // Get previous state which was saved on the wrapper\n      var showOrHide = $('#wrapper').attr('data-history-toggle');\n      $('#historydata').collapse(showOrHide);\n    }\n\n    $.fn.loadContainer = function (path, loadingTxt, errorTxt, callback) {\n      updateSpinner(loadingTxt);\n      $('#manualSearchMeta').load(path + ' #manualSearchMeta meta');\n      $(this).load(path + ' #manualSearchTbody tr', function (response, status) {\n        if (status === 'error') {\n          updateSpinner(errorTxt, false);\n        }\n\n        if (typeof callback !== 'undefined') {\n          callback();\n        }\n      });\n    }; // Click event for the download button for snatching a result\n\n\n    $(document.body).on('click', '.epManualSearch', function (event) {\n      event.preventDefault();\n      var link = event.currentTarget;\n      $(link).children('img').prop('src', 'images/loading16.gif');\n      $.getJSON(event.currentTarget.href, function (data) {\n        if (data.result === 'success') {\n          $(link).children('img').prop('src', 'images/save.png');\n        } else {\n          $(link).children('img').prop('src', 'images/no16.png');\n        }\n      });\n    });\n\n    $.fn.generateStars = function () {\n      return this.each(function (index, element) {\n        $(element).html($('<span/>').width($(element).text() * 12));\n      });\n    };\n\n    function initTableSorter(table) {\n      // Nasty hack to re-initialize tablesorter after refresh\n      $(table).tablesorter({\n        widgets: ['saveSort', 'stickyHeaders', 'columnSelector', 'filter'],\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          columnSelector_saveColumns: true,\n          // eslint-disable-line camelcase\n          columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n          // eslint-disable-line camelcase\n          columnSelector_mediaquery: false,\n          // eslint-disable-line camelcase\n          columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n        },\n        textExtraction: function () {\n          return {\n            // 2: Provider\n            2: function _(node) {\n              return $(node).find('img').attr('title');\n            },\n            // 6: The size column needs an explicit field for the filtering on raw size.\n            6: function _(node) {\n              return node.getAttribute('data-size');\n            },\n            // 9: Published date\n            9: function _(node) {\n              return node.getAttribute('data-datetime');\n            },\n            // 10: Added date\n            10: function _(node) {\n              return node.getAttribute('data-datetime');\n            }\n          };\n        }(),\n        headers: {\n          9: {\n            sorter: 'realISODate'\n          },\n          // Published\n          10: {\n            sorter: 'realISODate'\n          },\n          // Added\n          11: {\n            sorter: false,\n            parser: false // Snatch link\n\n          }\n        }\n      });\n    }\n\n    $('.imdbstars').generateStars();\n\n    function checkCacheUpdates(repeat) {\n      var pollInterval = 5000;\n      repeat = repeat || true;\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var data = $('meta[data-last-prov-updates]').data('last-prov-updates');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      var urlParams = '?indexername=' + indexerName + '&seriesid=' + seriesId + '&season=' + season + '&episode=' + episode;\n\n      if (manualSearchType === 'season') {\n        urlParams += '&manual_search_type=' + manualSearchType;\n      }\n\n      if (!$.isNumeric(seriesId) || !$.isNumeric(season) || !$.isNumeric(episode)) {\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 200);\n      }\n\n      $.ajax({\n        url: 'home/manualSearchCheckCache' + urlParams,\n        type: 'GET',\n        data: data,\n        contentType: 'application/json',\n        error: function error() {\n          // Repeat = false;\n          console.log('Error occurred!!');\n          $('.manualSearchButton').removeAttr('disabled');\n        },\n        complete: function complete() {\n          if (repeat) {\n            setTimeout(checkCacheUpdates, pollInterval);\n          }\n        },\n        timeout: 15000 // Timeout after 15s\n\n      }).done(function (data) {\n        // @TODO: Combine the lower if statements\n        if (data === '') {\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n        }\n\n        if (data.result === 'refresh') {\n          window.location.reload();\n          updateSpinner('Refreshed results...', true);\n        }\n\n        if (data.result === 'searching') {\n          // Ep is searched, you will get a results any minute now\n          pollInterval = 5000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode is being searched, please wait......', true);\n        }\n\n        if (data.result === 'queued') {\n          // Ep is queued, this might take some time to get results\n          pollInterval = 7000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode has been queued, because another search is taking place. please wait..', true);\n        }\n\n        if (data.result === 'finished') {\n          // Ep search is finished\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n          $('#srchresults').trigger('update', true);\n          $('[datetime]').timeago();\n        }\n\n        if (data.result === 'error') {\n          // Ep search is finished but with an error\n          console.log('Probably tried to call manualSelectCheckCache, while page was being refreshed.');\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = true;\n        }\n      });\n    }\n\n    setTimeout(checkCacheUpdates, 2000); // Click event for the reload results and force search buttons\n\n    $(document.body).on('click', '.manualSearchButton', function (event) {\n      event.preventDefault();\n      $('.manualSearchButton').prop('disabled', true);\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var forceSearch = $(event.currentTarget).attr('data-force-search');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      if ($.isNumeric(seriesId) && $.isNumeric(season) && $.isNumeric(episode)) {\n        updateSpinner('Started a forced manual search...', true);\n        $.getJSON('home/snatchSelection', {\n          indexername: indexerName,\n          seriesid: seriesId,\n          season: season,\n          episode: episode,\n          manual_search_type: manualSearchType,\n          // eslint-disable-line camelcase\n          perform_search: forceSearch // eslint-disable-line camelcase\n\n        }); // Force the search, but give the checkCacheUpdates the time to start up a search thread\n\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 2000);\n      }\n    }); // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the\n    // \"Show History\" button to show or hide the snatch/download/failed history for a manual searched episode or pack.\n\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#srchresults'), '#popover-target');\n    });\n    $('#btnReset').click(function () {\n      $('#showTable').trigger('saveSortReset') // Clear saved sort\n      .trigger('sortReset'); // Reset current table sort\n\n      return false;\n    });\n    initTableSorter('#srchresults');\n    this.reflowLayout();\n    $('body').on('hide.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Show History');\n      $('#wrapper').prop('data-history-toggle', 'hide');\n    });\n    $('body').on('show.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Hide History');\n      $('#wrapper').prop('data-history-toggle', 'show');\n    });\n    $(document.body).on('click', '.release-name-ellipses, .release-name-ellipses-toggled', function (event) {\n      var target = $(event.currentTarget);\n\n      if (target.hasClass('release-name-ellipses')) {\n        target.switchClass('release-name-ellipses', 'release-name-ellipses-toggled', 100);\n      } else {\n        target.switchClass('release-name-ellipses-toggled', 'release-name-ellipses', 100);\n      }\n    });\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance\"); }\n\nfunction _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'snatchSelection',\n  template: '#snatch-selection-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    },\n    indexerConfig: function indexerConfig(state) {\n      return state.config.indexers.config.indexers;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.$route.query.seriesid;\n    },\n    season: function season() {\n      return this.$route.query.season;\n    },\n    episode: function episode() {\n      return this.$route.query.episode;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      }\n\n      return show;\n    },\n    showIndexerUrl: function showIndexerUrl() {\n      var show = this.show,\n          indexerConfig = this.indexerConfig;\n\n      if (!show.indexer || !indexerConfig) {\n        return undefined;\n      }\n\n      var id = show.id[show.indexer];\n      var indexerUrl = indexerConfig[show.indexer].showUrl;\n      return \"\".concat(indexerUrl).concat(id);\n    }\n  }),\n  created: function created() {\n    var indexer = this.indexer,\n        id = this.id,\n        $store = this.$store; // Needed for the title\n\n    $store.dispatch('getShow', {\n      indexer: indexer,\n      id: id\n    });\n  },\n  methods: {\n    reflowLayout: function reflowLayout() {\n      var _this = this;\n\n      this.$nextTick(function () {\n        _this.moveSummaryBackground();\n\n        attachImdbTooltip(); // eslint-disable-line no-undef\n      });\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    },\n    reverse: function reverse(array) {\n      return array ? array.slice().reverse() : [];\n    },\n    dedupeGenres: function dedupeGenres(genres) {\n      return genres ? _toConsumableArray(new Set(genres.slice(0).map(function (genre) {\n        return genre.replace('-', ' ');\n      }))) : [];\n    }\n  },\n  mounted: function mounted() {\n    var _this2 = this;\n\n    this.$watch('show', function () {\n      _this2.$nextTick(function () {\n        return _this2.reflowLayout();\n      });\n    });\n    ['load', 'resize'].map(function (event) {\n      return window.addEventListener(event, function () {\n        _this2.reflowLayout();\n      });\n    });\n\n    var updateSpinner = function updateSpinner(message, showSpinner) {\n      // Get spinner object as needed\n      var spinner = $('#searchNotification');\n\n      if (showSpinner) {\n        message = '<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"16\" width=\"16\" />&nbsp;' + message;\n      }\n\n      $(spinner).empty().append(message);\n    }; // Check the previous status of the history table, for hidden or shown, through the data attribute\n    // data-history-toggle-hidden\n\n\n    function toggleHistoryTable() {\n      // eslint-disable-line no-unused-vars\n      // Get previous state which was saved on the wrapper\n      var showOrHide = $('#wrapper').attr('data-history-toggle');\n      $('#historydata').collapse(showOrHide);\n    }\n\n    $.fn.loadContainer = function (path, loadingTxt, errorTxt, callback) {\n      updateSpinner(loadingTxt);\n      $('#manualSearchMeta').load(path + ' #manualSearchMeta meta');\n      $(this).load(path + ' #manualSearchTbody tr', function (response, status) {\n        if (status === 'error') {\n          updateSpinner(errorTxt, false);\n        }\n\n        if (typeof callback !== 'undefined') {\n          callback();\n        }\n      });\n    }; // Click event for the download button for snatching a result\n\n\n    $(document.body).on('click', '.epManualSearch', function (event) {\n      event.preventDefault();\n      var link = event.currentTarget;\n      $(link).children('img').prop('src', 'images/loading16.gif');\n      $.getJSON(event.currentTarget.href, function (data) {\n        if (data.result === 'success') {\n          $(link).children('img').prop('src', 'images/save.png');\n        } else {\n          $(link).children('img').prop('src', 'images/no16.png');\n        }\n      });\n    });\n\n    function initTableSorter(table) {\n      // Nasty hack to re-initialize tablesorter after refresh\n      $(table).tablesorter({\n        widgets: ['saveSort', 'stickyHeaders', 'columnSelector', 'filter'],\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          columnSelector_saveColumns: true,\n          // eslint-disable-line camelcase\n          columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n          // eslint-disable-line camelcase\n          columnSelector_mediaquery: false,\n          // eslint-disable-line camelcase\n          columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n        },\n        textExtraction: function () {\n          return {\n            // 2: Provider\n            2: function _(node) {\n              return $(node).find('img').attr('title');\n            },\n            // 6: The size column needs an explicit field for the filtering on raw size.\n            6: function _(node) {\n              return node.getAttribute('data-size');\n            },\n            // 9: Published date\n            9: function _(node) {\n              return node.getAttribute('data-datetime');\n            },\n            // 10: Added date\n            10: function _(node) {\n              return node.getAttribute('data-datetime');\n            }\n          };\n        }(),\n        headers: {\n          9: {\n            sorter: 'realISODate'\n          },\n          // Published\n          10: {\n            sorter: 'realISODate'\n          },\n          // Added\n          11: {\n            sorter: false,\n            parser: false // Snatch link\n\n          }\n        }\n      });\n    }\n\n    function checkCacheUpdates(repeat) {\n      var pollInterval = 5000;\n      repeat = repeat || true;\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var data = $('meta[data-last-prov-updates]').data('last-prov-updates');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      var urlParams = '?indexername=' + indexerName + '&seriesid=' + seriesId + '&season=' + season + '&episode=' + episode;\n\n      if (manualSearchType === 'season') {\n        urlParams += '&manual_search_type=' + manualSearchType;\n      }\n\n      if (!$.isNumeric(seriesId) || !$.isNumeric(season) || !$.isNumeric(episode)) {\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 200);\n      }\n\n      $.ajax({\n        url: 'home/manualSearchCheckCache' + urlParams,\n        type: 'GET',\n        data: data,\n        contentType: 'application/json',\n        error: function error() {\n          // Repeat = false;\n          console.log('Error occurred!!');\n          $('.manualSearchButton').removeAttr('disabled');\n        },\n        complete: function complete() {\n          if (repeat) {\n            setTimeout(checkCacheUpdates, pollInterval);\n          }\n        },\n        timeout: 15000 // Timeout after 15s\n\n      }).done(function (data) {\n        // @TODO: Combine the lower if statements\n        if (data === '') {\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n        }\n\n        if (data.result === 'refresh') {\n          window.location.reload();\n          updateSpinner('Refreshed results...', true);\n        }\n\n        if (data.result === 'searching') {\n          // Ep is searched, you will get a results any minute now\n          pollInterval = 5000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode is being searched, please wait......', true);\n        }\n\n        if (data.result === 'queued') {\n          // Ep is queued, this might take some time to get results\n          pollInterval = 7000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode has been queued, because another search is taking place. please wait..', true);\n        }\n\n        if (data.result === 'finished') {\n          // Ep search is finished\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n          $('#srchresults').trigger('update', true);\n          $('[datetime]').timeago();\n        }\n\n        if (data.result === 'error') {\n          // Ep search is finished but with an error\n          console.log('Probably tried to call manualSelectCheckCache, while page was being refreshed.');\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = true;\n        }\n      });\n    }\n\n    setTimeout(checkCacheUpdates, 2000); // Click event for the reload results and force search buttons\n\n    $(document.body).on('click', '.manualSearchButton', function (event) {\n      event.preventDefault();\n      $('.manualSearchButton').prop('disabled', true);\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var forceSearch = $(event.currentTarget).attr('data-force-search');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      if ($.isNumeric(seriesId) && $.isNumeric(season) && $.isNumeric(episode)) {\n        updateSpinner('Started a forced manual search...', true);\n        $.getJSON('home/snatchSelection', {\n          indexername: indexerName,\n          seriesid: seriesId,\n          season: season,\n          episode: episode,\n          manual_search_type: manualSearchType,\n          // eslint-disable-line camelcase\n          perform_search: forceSearch // eslint-disable-line camelcase\n\n        }); // Force the search, but give the checkCacheUpdates the time to start up a search thread\n\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 2000);\n      }\n    }); // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the\n    // \"Show History\" button to show or hide the snatch/download/failed history for a manual searched episode or pack.\n\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#srchresults'), '#popover-target');\n    });\n    $('#btnReset').click(function () {\n      $('#showTable').trigger('saveSortReset') // Clear saved sort\n      .trigger('sortReset'); // Reset current table sort\n\n      return false;\n    });\n    initTableSorter('#srchresults');\n    this.reflowLayout();\n    $('body').on('hide.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Show History');\n      $('#wrapper').prop('data-history-toggle', 'hide');\n    });\n    $('body').on('show.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Hide History');\n      $('#wrapper').prop('data-history-toggle', 'show');\n    });\n    $(document.body).on('click', '.release-name-ellipses, .release-name-ellipses-toggled', function (event) {\n      var target = $(event.currentTarget);\n\n      if (target.hasClass('release-name-ellipses')) {\n        target.switchClass('release-name-ellipses', 'release-name-ellipses-toggled', 100);\n      } else {\n        target.switchClass('release-name-ellipses-toggled', 'release-name-ellipses', 100);\n      }\n    });\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1080,7 +1080,7 @@ eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
+eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1234,7 +1234,7 @@ eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
+eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1469,6 +1469,30 @@ eval("/*!\n * Determine if an object is a Buffer\n *\n * @author   Feross Aboukh
 
 /***/ }),
 
+/***/ "./node_modules/is-visible/module/index.js":
+/*!*************************************************!*\
+  !*** ./node_modules/is-visible/module/index.js ***!
+  \*************************************************/
+/*! exports provided: isVisible, isVisibleAll, isVisibleAny, default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isVisible\", function() { return isVisible; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isVisibleAll\", function() { return isVisibleAll; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isVisibleAny\", function() { return isVisibleAny; });\n/* harmony import */ var iselement__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! iselement */ \"./node_modules/iselement/module/index.js\");\n/* harmony import */ var style_properties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! style-properties */ \"./node_modules/style-properties/module/index.js\");\n\n // cross-browser way of getting element's style property\n\nfunction getStyle(element, property) {\n  if (window.getComputedStyle) {\n    return Object(style_properties__WEBPACK_IMPORTED_MODULE_1__[\"getStyleProperty\"])(element, property).original;\n  } else if (element.currentStyle) {\n    return element.currentStyle[property];\n  }\n\n  return null;\n}\n\nfunction isVisible(element) {\n  // don't bother with non-element inputs\n  if (!Object(iselement__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(element)) {\n    return false;\n  } // This should prevent problems with ShadowDOMPolyfill. It returns different\n  // object when asking directly via `document.body` (native element) and when\n  // asking via `document.querySelector()` (wrapped element). This would result\n  // in traversing too far in the `while` cycle below.\n\n\n  var body_element = document.querySelector('body');\n  var html_element = document.querySelector('html'); // elements that are not inserted into the body are never visible\n\n  if (!body_element || !body_element.contains(element)) {\n    return false;\n  } // invisible elements\n\n\n  if (getStyle(element, 'visibility') === 'hidden') {\n    return false;\n  } // test display property recursively for element and all its parents, until BODY\n\n\n  while (element && element !== body_element && element !== html_element) {\n    if (getStyle(element, 'display') === 'none') {\n      return false;\n    }\n\n    if (getStyle(element, 'opacity').toString() === '0') {\n      return false;\n    }\n\n    element = element.parentNode;\n  }\n\n  return true;\n}\nfunction isVisibleAll(list) {\n  for (var i = 0; i < list.length; i++) {\n    if (!isVisible(list[i])) {\n      return false;\n    }\n  }\n\n  return true;\n}\nfunction isVisibleAny(list) {\n  for (var i = 0; i < list.length; i++) {\n    if (isVisible(list[i])) {\n      return true;\n    }\n  }\n\n  return false;\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = (isVisible);\n\n//# sourceURL=webpack:///./node_modules/is-visible/module/index.js?");
+
+/***/ }),
+
+/***/ "./node_modules/iselement/module/index.js":
+/*!************************************************!*\
+  !*** ./node_modules/iselement/module/index.js ***!
+  \************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n  return typeof obj;\n} : function (obj) {\n  return obj && typeof Symbol === \"function\" && obj.constructor === Symbol ? \"symbol\" : typeof obj;\n};\n/**\n * Returns `true` if provided input is Element.\n * @name isElement\n * @param {*} [input]\n * @returns {boolean}\n */\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (function (input) {\n  return input != null && (typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.nodeType === 1 && _typeof(input.style) === 'object' && _typeof(input.ownerDocument) === 'object';\n});\n\n//# sourceURL=webpack:///./node_modules/iselement/module/index.js?");
+
+/***/ }),
+
 /***/ "./node_modules/jquery/dist/jquery.js":
 /*!********************************************!*\
   !*** ./node_modules/jquery/dist/jquery.js ***!
@@ -1634,6 +1658,42 @@ eval("/* WEBPACK VAR INJECTION */(function(global, process) {(function (global,
 
 /***/ }),
 
+/***/ "./node_modules/style-properties/module/change-case.js":
+/*!*************************************************************!*\
+  !*** ./node_modules/style-properties/module/change-case.js ***!
+  \*************************************************************/
+/*! exports provided: toCamelCase, toKebabCase */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"toCamelCase\", function() { return toCamelCase; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"toKebabCase\", function() { return toKebabCase; });\nvar delimiters = [' ', '-', '_'];\nfunction toCamelCase() {\n  var input = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];\n  var characters = input.split('');\n  var result = [];\n  var character = void 0;\n\n  while (character = characters.shift()) {\n    if (delimiters.indexOf(character) !== -1) {\n      if (character = characters.shift()) {\n        character = character.toUpperCase();\n      }\n    }\n\n    result.push(character);\n  }\n\n  return result.join('');\n}\nfunction toKebabCase() {\n  var input = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];\n  var characters = input.split('');\n  var result = [];\n  characters.forEach(function (character) {\n    var lowercase_character = character.toLowerCase();\n\n    if (character !== lowercase_character) {\n      result.push('-', lowercase_character);\n    } else if (delimiters.indexOf(character) !== -1) {\n      result.push('-');\n    } else {\n      result.push(character);\n    }\n  });\n  return result.join('');\n}\n\n//# sourceURL=webpack:///./node_modules/style-properties/module/change-case.js?");
+
+/***/ }),
+
+/***/ "./node_modules/style-properties/module/index.js":
+/*!*******************************************************!*\
+  !*** ./node_modules/style-properties/module/index.js ***!
+  \*******************************************************/
+/*! exports provided: getStyleProperty, getStyleProperties */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getStyleProperty\", function() { return getStyleProperty; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getStyleProperties\", function() { return getStyleProperties; });\n/* harmony import */ var _change_case__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./change-case */ \"./node_modules/style-properties/module/change-case.js\");\n/* harmony import */ var _parse_property_value__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./parse-property-value */ \"./node_modules/style-properties/module/parse-property-value.js\");\n\n\n/**\n * @typedef {Object} StyleProperty\n * @property {string} unit - unit of the property, e.g. px, rgb\n * @property {string|number} value - value of the property\n * @property {string} output - valid string representation of value and unit\n *\n * @example <caption>Simple property.</caption>\n * {\n *   unit: 'px',\n *   value: 100,\n *   output: '100px'\n * }\n *\n * @example <caption>Color property.</caption>\n * {\n *   unit: 'rgb',\n *   value: [255, 255, 255],\n *   output: '#ffffff'\n * }\n */\n\n/**\n * Attempts to fix the element when using Webcomponents with ShadowDOMPolyfill. It returns either original element or wrapped element, depending on whether the polyfill replaced the original `getComputedStyle` method or not.\n * This is madness and no sane person should ever do hacks like this. ShadowDOMPolyfill sucks donkey balls!\n * @param {Object|HTMLElement} element\n * @returns {Object|HTMLElement}\n */\n\nfunction fixWebcomponentsElement(element) {\n  if (typeof window.ShadowDOMPolyfill !== 'undefined') {\n    var is_native = document.defaultView.getComputedStyle.toString().indexOf('[native code]') !== -1; // Can't check if element is instance of HTMLElement, because the polyfill\n    // hijacks this. Only reliable way of checking if it is wrapped I found\n    // is using this ugly ass property.\n\n    var is_wrapped = typeof element.__impl4cf1e782hg__ !== 'undefined';\n\n    if (is_native && is_wrapped) {\n      element = window.ShadowDOMPolyfill.unwrap(element);\n    }\n\n    if (!is_native && !is_wrapped) {\n      element = window.ShadowDOMPolyfill.wrap(element);\n    }\n  }\n\n  return element;\n}\n/**\n * Returns information about unit and value of given property for given element.\n * @param {HTMLElement} element\n * @param {string} property - Name of the property. You can use either camelCase (e.g. zIndex) or kebab-case (e.g. z-index).\n * @returns {StyleProperty}\n *\n * @example\n * var element_width = getStyleProperty(my_element, 'width');\n * // returns {unit: 'px', value: 100, output: '100px'}\n */\n\n\nfunction getStyleProperty(element, property) {\n  property = Object(_change_case__WEBPACK_IMPORTED_MODULE_0__[\"toKebabCase\"])(property);\n  element = fixWebcomponentsElement(element);\n  var value = document.defaultView.getComputedStyle(element, null).getPropertyValue(property);\n  return Object(_parse_property_value__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(value);\n}\n/**\n * Returns information about multiple properties of given element.\n * @param {HTMLElement} element\n * @param {Array|string} properties - List of properties. Single property (string) will be converted to an array.\n * @returns {Object} - Keys of the returned objects are property names, values are objects containing information about given property.\n *\n * @example\n * var element_size = getStyleProperties(my_element, ['width', 'height']);\n * // returns\n * // {\n * //   width: {unit: 'px', value: 100, output: '100px'},\n * //   height: {unit: 'px', value: 100, output: '100px'}\n * // }\n */\n\nfunction getStyleProperties(element) {\n  var properties = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];\n\n  if (typeof properties === 'string') {\n    properties = [properties];\n  }\n\n  var result = {};\n  properties.forEach(function (property) {\n    result[property] = getStyleProperty(element, property);\n  });\n  return result;\n}\n\n//# sourceURL=webpack:///./node_modules/style-properties/module/index.js?");
+
+/***/ }),
+
+/***/ "./node_modules/style-properties/module/parse-property-value.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/style-properties/module/parse-property-value.js ***!
+  \**********************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\nvar re_color = /^rgb\\((\\d+),\\s?(\\d+),\\s?(\\d+)\\)$/;\nvar re_prop = /^(-?\\d*\\.?\\d*)(.*)$/; // converts number in base 10 to base 16, adds padding zero if needed\n\nfunction convertColorComponent(input) {\n  var result = input.toString(16);\n\n  if (result.length < 2) {\n    result = '0' + result;\n  }\n\n  return result;\n}\n\nfunction parseColorProperty(value) {\n  var matches = value.match(re_color);\n  var result = {};\n  result.unit = 'rgb';\n  result.value = [parseInt(matches[1], 10), parseInt(matches[2], 10), parseInt(matches[3], 10)];\n  result.output = '#' + convertColorComponent(result.value[0]) + convertColorComponent(result.value[1]) + convertColorComponent(result.value[2]);\n  return result;\n}\n\nfunction parseRegularProperty(value) {\n  var result = {\n    unit: '',\n    value: null,\n    output: 'auto'\n  };\n\n  if (value !== 'auto') {\n    var matches = value.match(re_prop);\n    result.value = parseFloat(matches[1]);\n    result.unit = matches[2];\n    result.output = result.value + result.unit;\n  }\n\n  return result;\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (function (value) {\n  var result = re_color.test(value) ? parseColorProperty(value) : parseRegularProperty(value);\n  result.original = value;\n  return result;\n});\n\n//# sourceURL=webpack:///./node_modules/style-properties/module/parse-property-value.js?");
+
+/***/ }),
+
 /***/ "./node_modules/timers-browserify/main.js":
 /*!************************************************!*\
   !*** ./node_modules/timers-browserify/main.js ***!
@@ -1989,6 +2049,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/**\n  * vue-router v3.0.1\n
 
 /***/ }),
 
+/***/ "./node_modules/vue-scrollto/vue-scrollto.js":
+/*!***************************************************!*\
+  !*** ./node_modules/vue-scrollto/vue-scrollto.js ***!
+  \***************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("(function (global, factory) {\n   true ? module.exports = factory() : undefined;\n})(this, function () {\n  'use strict';\n  /**\n   * https://github.com/gre/bezier-easing\n   * BezierEasing - use bezier curve for transition easing function\n   * by Gaëtan Renaudeau 2014 - 2015 – MIT License\n   */\n  // These values are established by empiricism with tests (tradeoff: performance VS precision)\n\n  var NEWTON_ITERATIONS = 4;\n  var NEWTON_MIN_SLOPE = 0.001;\n  var SUBDIVISION_PRECISION = 0.0000001;\n  var SUBDIVISION_MAX_ITERATIONS = 10;\n  var kSplineTableSize = 11;\n  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);\n  var float32ArraySupported = typeof Float32Array === 'function';\n\n  function A(aA1, aA2) {\n    return 1.0 - 3.0 * aA2 + 3.0 * aA1;\n  }\n\n  function B(aA1, aA2) {\n    return 3.0 * aA2 - 6.0 * aA1;\n  }\n\n  function C(aA1) {\n    return 3.0 * aA1;\n  } // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\n\n\n  function calcBezier(aT, aA1, aA2) {\n    return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;\n  } // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.\n\n\n  function getSlope(aT, aA1, aA2) {\n    return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);\n  }\n\n  function binarySubdivide(aX, aA, aB, mX1, mX2) {\n    var currentX,\n        currentT,\n        i = 0;\n\n    do {\n      currentT = aA + (aB - aA) / 2.0;\n      currentX = calcBezier(currentT, mX1, mX2) - aX;\n\n      if (currentX > 0.0) {\n        aB = currentT;\n      } else {\n        aA = currentT;\n      }\n    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);\n\n    return currentT;\n  }\n\n  function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\n    for (var i = 0; i < NEWTON_ITERATIONS; ++i) {\n      var currentSlope = getSlope(aGuessT, mX1, mX2);\n\n      if (currentSlope === 0.0) {\n        return aGuessT;\n      }\n\n      var currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n      aGuessT -= currentX / currentSlope;\n    }\n\n    return aGuessT;\n  }\n\n  var src = function bezier(mX1, mY1, mX2, mY2) {\n    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {\n      throw new Error('bezier x values must be in [0, 1] range');\n    } // Precompute samples table\n\n\n    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);\n\n    if (mX1 !== mY1 || mX2 !== mY2) {\n      for (var i = 0; i < kSplineTableSize; ++i) {\n        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\n      }\n    }\n\n    function getTForX(aX) {\n      var intervalStart = 0.0;\n      var currentSample = 1;\n      var lastSample = kSplineTableSize - 1;\n\n      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\n        intervalStart += kSampleStepSize;\n      }\n\n      --currentSample; // Interpolate to provide an initial guess for t\n\n      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);\n      var guessForT = intervalStart + dist * kSampleStepSize;\n      var initialSlope = getSlope(guessForT, mX1, mX2);\n\n      if (initialSlope >= NEWTON_MIN_SLOPE) {\n        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\n      } else if (initialSlope === 0.0) {\n        return guessForT;\n      } else {\n        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\n      }\n    }\n\n    return function BezierEasing(x) {\n      if (mX1 === mY1 && mX2 === mY2) {\n        return x; // linear\n      } // Because JavaScript number are imprecise, we should guarantee the extremes are right.\n\n\n      if (x === 0) {\n        return 0;\n      }\n\n      if (x === 1) {\n        return 1;\n      }\n\n      return calcBezier(getTForX(x), mY1, mY2);\n    };\n  };\n\n  var easings = {\n    ease: [0.25, 0.1, 0.25, 1.0],\n    linear: [0.00, 0.0, 1.00, 1.0],\n    \"ease-in\": [0.42, 0.0, 1.00, 1.0],\n    \"ease-out\": [0.00, 0.0, 0.58, 1.0],\n    \"ease-in-out\": [0.42, 0.0, 0.58, 1.0]\n  }; // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection\n\n  var supportsPassive = false;\n\n  try {\n    var opts = Object.defineProperty({}, \"passive\", {\n      get: function get() {\n        supportsPassive = true;\n      }\n    });\n    window.addEventListener(\"test\", null, opts);\n  } catch (e) {}\n\n  var _ = {\n    $: function $(selector) {\n      if (typeof selector !== \"string\") {\n        return selector;\n      }\n\n      return document.querySelector(selector);\n    },\n    on: function on(element, events, handler) {\n      var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {\n        passive: false\n      };\n\n      if (!(events instanceof Array)) {\n        events = [events];\n      }\n\n      for (var i = 0; i < events.length; i++) {\n        element.addEventListener(events[i], handler, supportsPassive ? opts : false);\n      }\n    },\n    off: function off(element, events, handler) {\n      if (!(events instanceof Array)) {\n        events = [events];\n      }\n\n      for (var i = 0; i < events.length; i++) {\n        element.removeEventListener(events[i], handler);\n      }\n    },\n    cumulativeOffset: function cumulativeOffset(element) {\n      var top = 0;\n      var left = 0;\n\n      do {\n        top += element.offsetTop || 0;\n        left += element.offsetLeft || 0;\n        element = element.offsetParent;\n      } while (element);\n\n      return {\n        top: top,\n        left: left\n      };\n    }\n  };\n\n  var _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n    return typeof obj;\n  } : function (obj) {\n    return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n  };\n\n  var _extends = Object.assign || function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n\n    return target;\n  };\n\n  var abortEvents = [\"mousedown\", \"wheel\", \"DOMMouseScroll\", \"mousewheel\", \"keyup\", \"touchmove\"];\n  var defaults$$1 = {\n    container: \"body\",\n    duration: 500,\n    easing: \"ease\",\n    offset: 0,\n    cancelable: true,\n    onStart: false,\n    onDone: false,\n    onCancel: false,\n    x: false,\n    y: true\n  };\n\n  function setDefaults(options) {\n    defaults$$1 = _extends({}, defaults$$1, options);\n  }\n\n  var scroller = function scroller() {\n    var element = void 0; // element to scroll to\n\n    var container = void 0; // container to scroll\n\n    var duration = void 0; // duration of the scrolling\n\n    var easing = void 0; // easing to be used when scrolling\n\n    var offset = void 0; // offset to be added (subtracted)\n\n    var cancelable = void 0; // indicates if user can cancel the scroll or not.\n\n    var onStart = void 0; // callback when scrolling is started\n\n    var onDone = void 0; // callback when scrolling is done\n\n    var onCancel = void 0; // callback when scrolling is canceled / aborted\n\n    var x = void 0; // scroll on x axis\n\n    var y = void 0; // scroll on y axis\n\n    var initialX = void 0; // initial X of container\n\n    var targetX = void 0; // target X of container\n\n    var initialY = void 0; // initial Y of container\n\n    var targetY = void 0; // target Y of container\n\n    var diffX = void 0; // difference\n\n    var diffY = void 0; // difference\n\n    var abort = void 0; // is scrolling aborted\n\n    var abortEv = void 0; // event that aborted scrolling\n\n    var abortFn = function abortFn(e) {\n      if (!cancelable) return;\n      abortEv = e;\n      abort = true;\n    };\n\n    var easingFn = void 0;\n    var timeStart = void 0; // time when scrolling started\n\n    var timeElapsed = void 0; // time elapsed since scrolling started\n\n    var progress = void 0; // progress\n\n    function scrollTop(container) {\n      var scrollTop = container.scrollTop;\n\n      if (container.tagName.toLowerCase() === \"body\") {\n        // in firefox body.scrollTop always returns 0\n        // thus if we are trying to get scrollTop on a body tag\n        // we need to get it from the documentElement\n        scrollTop = scrollTop || document.documentElement.scrollTop;\n      }\n\n      return scrollTop;\n    }\n\n    function scrollLeft(container) {\n      var scrollLeft = container.scrollLeft;\n\n      if (container.tagName.toLowerCase() === \"body\") {\n        // in firefox body.scrollLeft always returns 0\n        // thus if we are trying to get scrollLeft on a body tag\n        // we need to get it from the documentElement\n        scrollLeft = scrollLeft || document.documentElement.scrollLeft;\n      }\n\n      return scrollLeft;\n    }\n\n    function step(timestamp) {\n      if (abort) return done();\n      if (!timeStart) timeStart = timestamp;\n      timeElapsed = timestamp - timeStart;\n      progress = Math.min(timeElapsed / duration, 1);\n      progress = easingFn(progress);\n      topLeft(container, initialY + diffY * progress, initialX + diffX * progress);\n      timeElapsed < duration ? window.requestAnimationFrame(step) : done();\n    }\n\n    function done() {\n      if (!abort) topLeft(container, targetY, targetX);\n      timeStart = false;\n\n      _.off(container, abortEvents, abortFn);\n\n      if (abort && onCancel) onCancel(abortEv, element);\n      if (!abort && onDone) onDone(element);\n    }\n\n    function topLeft(element, top, left) {\n      if (y) element.scrollTop = top;\n      if (x) element.scrollLeft = left;\n\n      if (element.tagName.toLowerCase() === \"body\") {\n        // in firefox body.scrollTop doesn't scroll the page\n        // thus if we are trying to scrollTop on a body tag\n        // we need to scroll on the documentElement\n        if (y) document.documentElement.scrollTop = top;\n        if (x) document.documentElement.scrollLeft = left;\n      }\n    }\n\n    function scrollTo(target, _duration) {\n      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n      if ((typeof _duration === \"undefined\" ? \"undefined\" : _typeof(_duration)) === \"object\") {\n        options = _duration;\n      } else if (typeof _duration === \"number\") {\n        options.duration = _duration;\n      }\n\n      element = _.$(target);\n\n      if (!element) {\n        return console.warn(\"[vue-scrollto warn]: Trying to scroll to an element that is not on the page: \" + target);\n      }\n\n      container = _.$(options.container || defaults$$1.container);\n      duration = options.duration || defaults$$1.duration;\n      easing = options.easing || defaults$$1.easing;\n      offset = options.offset || defaults$$1.offset;\n      cancelable = options.hasOwnProperty(\"cancelable\") ? options.cancelable !== false : defaults$$1.cancelable;\n      onStart = options.onStart || defaults$$1.onStart;\n      onDone = options.onDone || defaults$$1.onDone;\n      onCancel = options.onCancel || defaults$$1.onCancel;\n      x = options.x === undefined ? defaults$$1.x : options.x;\n      y = options.y === undefined ? defaults$$1.y : options.y;\n\n      var cumulativeOffsetContainer = _.cumulativeOffset(container);\n\n      var cumulativeOffsetElement = _.cumulativeOffset(element);\n\n      if (typeof offset === \"function\") {\n        offset = offset();\n      }\n\n      initialY = scrollTop(container);\n      targetY = cumulativeOffsetElement.top - cumulativeOffsetContainer.top + offset;\n      initialX = scrollLeft(container);\n      targetX = cumulativeOffsetElement.left - cumulativeOffsetContainer.left + offset;\n      abort = false;\n      diffY = targetY - initialY;\n      diffX = targetX - initialX;\n\n      if (typeof easing === \"string\") {\n        easing = easings[easing] || easings[\"ease\"];\n      }\n\n      easingFn = src.apply(src, easing);\n      if (!diffY && !diffX) return;\n      if (onStart) onStart(element);\n\n      _.on(container, abortEvents, abortFn, {\n        passive: true\n      });\n\n      window.requestAnimationFrame(step);\n      return function () {\n        abortEv = null;\n        abort = true;\n      };\n    }\n\n    return scrollTo;\n  };\n\n  var _scroller = scroller();\n\n  var bindings = []; // store binding data\n\n  function deleteBinding(el) {\n    for (var i = 0; i < bindings.length; ++i) {\n      if (bindings[i].el === el) {\n        bindings.splice(i, 1);\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  function findBinding(el) {\n    for (var i = 0; i < bindings.length; ++i) {\n      if (bindings[i].el === el) {\n        return bindings[i];\n      }\n    }\n  }\n\n  function getBinding(el) {\n    var binding = findBinding(el);\n\n    if (binding) {\n      return binding;\n    }\n\n    bindings.push(binding = {\n      el: el,\n      binding: {}\n    });\n    return binding;\n  }\n\n  function handleClick(e) {\n    e.preventDefault();\n    var ctx = getBinding(this).binding;\n\n    if (typeof ctx.value === \"string\") {\n      return _scroller(ctx.value);\n    }\n\n    _scroller(ctx.value.el || ctx.value.element, ctx.value);\n  }\n\n  var VueScrollTo$1 = {\n    bind: function bind(el, binding) {\n      getBinding(el).binding = binding;\n\n      _.on(el, \"click\", handleClick);\n    },\n    unbind: function unbind(el) {\n      deleteBinding(el);\n\n      _.off(el, \"click\", handleClick);\n    },\n    update: function update(el, binding) {\n      getBinding(el).binding = binding;\n    },\n    scrollTo: _scroller,\n    bindings: bindings\n  };\n\n  var install = function install(Vue, options) {\n    if (options) setDefaults(options);\n    Vue.directive(\"scroll-to\", VueScrollTo$1);\n    Vue.prototype.$scrollTo = VueScrollTo$1.scrollTo;\n  };\n\n  if (typeof window !== \"undefined\" && window.Vue) {\n    window.VueScrollTo = VueScrollTo$1;\n    window.VueScrollTo.setDefaults = setDefaults;\n    Vue.use(install);\n  }\n\n  VueScrollTo$1.install = install;\n  return VueScrollTo$1;\n});\n\n//# sourceURL=webpack:///./node_modules/vue-scrollto/vue-scrollto.js?");
+
+/***/ }),
+
 /***/ "./node_modules/vue-snotify/vue-snotify.esm.js":
 /*!*****************************************************!*\
   !*** ./node_modules/vue-snotify/vue-snotify.esm.js ***!
@@ -2388,7 +2459,7 @@ eval("var g; // This works in non-strict mode\n\ng = function () {\n  return thi
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"webRoot\", function() { return webRoot; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiKey\", function() { return apiKey; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiRoute\", function() { return apiRoute; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiv1\", function() { return apiv1; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"api\", function() { return api; });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__);\n\nvar webRoot = document.body.getAttribute('web-root');\nvar apiKey = document.body.getAttribute('api-key');\n/**\n * Api client based on the axios client, to communicate with medusa's web routes, which return json data.\n */\n\nvar apiRoute = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/',\n  timeout: 10000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v1.\n */\n\nvar apiv1 = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v1/' + apiKey + '/',\n  timeout: 10000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v2.\n */\n\nvar api = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v2/',\n  timeout: 10000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json',\n    'X-Api-Key': apiKey\n  }\n});\n\n\n//# sourceURL=webpack:///./src/api.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"webRoot\", function() { return webRoot; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiKey\", function() { return apiKey; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiRoute\", function() { return apiRoute; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiv1\", function() { return apiv1; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"api\", function() { return api; });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__);\n\nvar webRoot = document.body.getAttribute('web-root');\nvar apiKey = document.body.getAttribute('api-key');\n/**\n * Api client based on the axios client, to communicate with medusa's web routes, which return json data.\n */\n\nvar apiRoute = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/',\n  timeout: 30000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v1.\n */\n\nvar apiv1 = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v1/' + apiKey + '/',\n  timeout: 30000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v2.\n */\n\nvar api = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v2/',\n  timeout: 30000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json',\n    'X-Api-Key': apiKey\n  }\n});\n\n\n//# sourceURL=webpack:///./src/api.js?");
 
 /***/ }),
 
@@ -3767,7 +3838,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mut
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\nvar state = {\n  show: {\n    airs: null,\n    akas: null,\n    cache: null,\n    classification: null,\n    config: {\n      airByDate: null,\n      aliases: null,\n      anime: null,\n      defaultEpisodeStatus: null,\n      dvdOrder: null,\n      location: null,\n      paused: null,\n      qualities: null,\n      release: null,\n      scene: null,\n      seasonFolders: null,\n      sports: null,\n      subtitlesEnabled: null\n    },\n    countries: null,\n    country_codes: null,\n    // eslint-disable-line camelcase\n    genres: null,\n    id: {\n      tvdb: null,\n      slug: null\n    },\n    indexer: null,\n    language: null,\n    network: null,\n    nextAirDate: null,\n    plot: null,\n    rating: {\n      imdb: {\n        rating: null,\n        votes: null\n      }\n    },\n    runtime: null,\n    showType: null,\n    status: null,\n    title: null,\n    type: null,\n    year: null\n  }\n};\nvar mutations = {};\nvar getters = {};\nvar actions = {};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  state: state,\n  mutations: mutations,\n  getters: getters,\n  actions: actions\n});\n\n//# sourceURL=webpack:///./src/store/modules/defaults.js?");
+eval("__webpack_require__.r(__webpack_exports__);\nvar state = {\n  show: {\n    airs: null,\n    akas: null,\n    cache: null,\n    classification: null,\n    config: {\n      airByDate: null,\n      aliases: null,\n      anime: null,\n      defaultEpisodeStatus: null,\n      dvdOrder: null,\n      location: null,\n      paused: null,\n      qualities: null,\n      release: null,\n      scene: null,\n      seasonFolders: null,\n      sports: null,\n      subtitlesEnabled: null\n    },\n    countries: null,\n    country_codes: null,\n    // eslint-disable-line camelcase\n    genres: null,\n    id: {\n      tvdb: null,\n      slug: null\n    },\n    indexer: null,\n    language: null,\n    network: null,\n    nextAirDate: null,\n    plot: null,\n    rating: {\n      imdb: {\n        rating: null,\n        votes: null\n      }\n    },\n    runtime: null,\n    showType: null,\n    status: null,\n    title: null,\n    type: null,\n    year: {}\n  }\n};\nvar mutations = {};\nvar getters = {};\nvar actions = {};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  state: state,\n  mutations: mutations,\n  getters: getters,\n  actions: actions\n});\n\n//# sourceURL=webpack:///./src/store/modules/defaults.js?");
 
 /***/ }),
 
diff --git a/themes/dark/templates/partials/seasonEpisode.mako b/themes/dark/templates/partials/seasonEpisode.mako
deleted file mode 100644
index f46a2fe5a0..0000000000
--- a/themes/dark/templates/partials/seasonEpisode.mako
+++ /dev/null
@@ -1,6 +0,0 @@
-Manual search for:<br>
-    <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.series_id}" class="snatchTitle">${show.name}</app-link> / Season ${season}
-        % if manual_search_type != 'season':
-            Episode ${episode}
-        % endif
-    </app-link>
diff --git a/themes/dark/templates/partials/showheader.mako b/themes/dark/templates/partials/showheader.mako
index 24d5fd2216..8083828b34 100644
--- a/themes/dark/templates/partials/showheader.mako
+++ b/themes/dark/templates/partials/showheader.mako
@@ -10,64 +10,52 @@
 <%namespace file="/inc_defs.mako" import="renderQualityPill"/>
 
 <div class="row">
-    <div id="showtitle" class="col-lg-12" data-showname="${show.name | h}">
+    ## @TODO: Remove data attributes
+    ## @SEE: https://github.com/pymedusa/Medusa/pull/5087#discussion_r214074436
+    <div id="showtitle" class="col-lg-12" :data-showname="show.title">
         <div>
-            <h1 class="title" data-indexer-name="${show.indexer_name}" data-series-id="${show.indexerid}" id="scene_exception_${show.indexerid}">
-                <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.indexerid}" class="snatchTitle">${show.name | h}</app-link>
+            ## @TODO: Remove data attributes
+            ## @SEE: https://github.com/pymedusa/Medusa/pull/5087#discussion_r214077142
+            <h1 class="title" :data-indexer-name="show.indexer" :data-series-id="show.id[show.indexer]" :id="'scene_exception_' + show.id[show.indexer]">
+                <app-link :href="'home/displayShow?indexername=' + show.indexer + '&seriesid=' + show.id[show.indexer]" class="snatchTitle">{{ show.title }}</app-link>
             </h1>
         </div>
 
-    % if action == 'snatchSelection':
-        <div id="show-specials-and-seasons" class="pull-right">
+        <div v-if="$route.name === 'snatchSelection'" id="show-specials-and-seasons" class="pull-right">
             <span class="h2footer display-specials">
-                <%include file="/partials/seasonEpisode.mako"/>
+                Manual search for:<br>
+                <app-link
+                    :href="'home/displayShow?indexername=' + show.indexer + '&seriesid=' + show.id[show.indexer]"
+                    class="snatchTitle"
+                    >{{ show.title }}</app-link> / Season {{ season }}<template v-if="episode && !$route.query.manual_search_type"> Episode {{ episode }}</template>
             </span>
         </div>
-    % else:
-        % if season_results:
-            ##There is a special/season_0?##
-            % if int(season_results[-1]["season"]) == 0:
-                <% season_special = 1 %>
-            % else:
-                <% season_special = 0 %>
-            % endif
-            % if not app.DISPLAY_SHOW_SPECIALS and season_special:
-                <% lastSeason = season_results.pop(-1) %>
-            % endif
-            <div id="show-specials-and-seasons" class="pull-right">
-                <span class="h2footer display-specials">
-                % if season_special:
-                    Display Specials: <a class="inner" style="cursor: pointer;">${'Hide' if app.DISPLAY_SHOW_SPECIALS else 'Show'}</a>
-                % endif
-                </span>
+        <div v-if="$route.name !== 'snatchSelection' && show.seasons && show.seasons.length >= 1" id="show-specials-and-seasons" class="pull-right">
+            <span class="h2footer display-specials" v-if="show.seasons.find(season => ({ season }) => season === 0)">
+                Display Specials: <a @click="toggleSpecials()" class="inner" style="cursor: pointer;">{{ config.layout.show.specials ? 'Hide' : 'Show' }}</a>
+            </span>
 
-                <div class="h2footer display-seasons clear">
-                    <span>
-                    % if (len(season_results) > 14):
-                        <select id="seasonJump" class="form-control input-sm" style="position: relative">
-                            <option value="jump">Jump to Season</option>
-                        % for seasonNum in season_results:
-                            <option value="#season-${seasonNum["season"]}" data-season="${seasonNum["season"]}">${'Season ' + str(seasonNum["season"]) if int(seasonNum["season"]) > 0 else 'Specials'}</option>
-                        % endfor
-                        </select>
-                    % else:
+            <div class="h2footer display-seasons clear">
+                <span>
+                    <select v-if="show.seasons.length >= 15" v-model="jumpToSeason" id="seasonJump" class="form-control input-sm" style="position: relative">
+                        <option value="jump">Jump to Season</option>
+                        <option v-for="season in show.seasons" :value="'#season-' + season[0].season" :data-season="season[0].season">
+                        <%text>
+                            {{ season[0].season === 0 ? 'Specials' : `Season ${season[0].season}` }}
+                        </%text>
+                        </option>
+                    </select>
+                    <template v-else-if="show.seasons.length >= 1">
                         Season:
-                        % for seasonNum in season_results:
-                            % if int(seasonNum["season"]) == 0:
-                                <app-link href="#season-${seasonNum["season"]}">Specials</app-link>
-                            % else:
-                                <app-link href="#season-${seasonNum["season"]}">${str(seasonNum["season"])}</app-link>
-                            % endif
-                            % if seasonNum != season_results[-1]:
-                                <span class="separator">|</span>
-                            % endif
-                        % endfor
-                    % endif
-                    </span>
-                </div>
+                        <template v-for="(season, $index) in reverse(show.seasons)">
+                            <app-link :href="'#season-' + season[0].season">{{ season[0].season === 0 ? 'Specials' : season[0].season }}</app-link>
+                            <slot> </slot>
+                            <span v-if="$index !== (show.seasons.length - 1)" class="separator">| </span>
+                        </template>
+                    </template>
+                </span>
             </div>
-            % endif
-        % endif
+        </div>
     </div> <!-- end show title -->
 </div> <!-- end row showtitle-->
 
@@ -84,7 +72,7 @@
         <div class="show-poster-container">
             <div class="row">
                 <div class="image-flex-container col-md-12">
-                    <asset default="images/poster.png" show-slug="${show.slug}" type="posterThumb" cls="show-image shadow" :link="true"></asset>
+                    <asset default="images/poster.png" :show-slug="show.id.slug" type="posterThumb" cls="show-image shadow" :link="true"></asset>
                 </div>
             </div>
         </div>
@@ -94,55 +82,50 @@
         <div class="show-info-container">
             <div class="row">
                 <div class="pull-right col-lg-3 col-md-3 hidden-sm hidden-xs">
-                    <asset default="images/banner.png" show-slug="${show.slug}" type="banner" cls="show-banner pull-right shadow" :link="true"></asset>
+                    <asset default="images/banner.png" :show-slug="show.id.slug" type="banner" cls="show-banner pull-right shadow" :link="true"></asset>
                 </div>
                 <div id="show-rating" class="pull-left col-lg-9 col-md-9 col-sm-12 col-xs-12">
-                 % if 'rating' in show.imdb_info:
-                     <% rating_tip = str(show.imdb_info['rating']) + " / 10" + " Stars" + "<br>" + str(show.imdb_info['votes']) + " Votes" %>
-                     <span class="imdbstars" qtip-content="${rating_tip}">${show.imdb_info['rating']}</span>
-                 % endif
-                 % if not show.imdb_id:
-                     <span>(${show.start_year}) - ${show.runtime} minutes - </span>
-                 % else:
-                     % if 'country_codes' in show.imdb_info:
-                         % for country in show.imdb_info['country_codes'].split('|'):
-                                 <img src="images/blank.png" class="country-flag flag-${country}" width="16" height="11" style="margin-left: 3px; vertical-align:middle;" />
-                         % endfor
-                     % endif
-                                 <span>
-                     % if show.imdb_info.get('year'):
-                                     (${show.imdb_info['year']}) -
-                     % endif
-                                     ${show.imdb_info.get('runtimes') or show.runtime} minutes
-                                 </span>
-                                 <app-link href="http://www.imdb.com/title/${show.imdb_id}" title="http://www.imdb.com/title/${show.imdb_id}">
-                                     <img alt="[imdb]" height="16" width="16" src="images/imdb.png" style="margin-top: -1px; vertical-align:middle;"/>
-                                 </app-link>
-                 % endif
-                % if show.externals.get('trakt_id'):
-                    <app-link href="https://trakt.tv/shows/${show.externals.get('trakt_id')}" title="https://trakt.tv/shows/${show.externals.get('trakt_id')}">
+                    <span v-if="show.rating.imdb && show.rating.imdb.rating"
+                        class="imdbstars"
+                        :qtip-content="show.rating.imdb.rating + ' / 10 Stars<br> ' + show.rating.imdb.votes + ' Votes'"
+                    >
+                        <span :style="{ width: (Number(show.rating.imdb.rating) * 12) + '%' }"></span>
+                    </span>
+                    <template v-if="!show.id.imdb">
+                        <span v-if="show.year.start">({{ show.year.start }}) - {{ show.runtime }} minutes - </span>
+                    </template>
+                    <template v-else>
+                        <img v-for="country in show.country_codes" src="images/blank.png" :class="['country-flag', 'flag-' + country]" width="16" height="11" style="margin-left: 3px; vertical-align:middle;" />
+                        <span>
+                        % if show.imdb_info.get('year'):
+                            (${show.imdb_info['year']}) -
+                        % endif
+                            ${show.imdb_info.get('runtimes') or show.runtime} minutes
+                        </span>
+                        <app-link :href="'https://www.imdb.com/title/' + show.id.imdb" :title="'https://www.imdb.com/title/' + show.id.imdb">
+                            <img alt="[imdb]" height="16" width="16" src="images/imdb.png" style="margin-top: -1px; vertical-align:middle;"/>
+                        </app-link>
+                    </template>
+                    <app-link v-if="show.id.trakt" :href="'https://trakt.tv/shows/' + show.id.trakt" :title="'https://trakt.tv/shows/' + show.id.trakt">
                         <img alt="[trakt]" height="16" width="16" src="images/trakt.png" />
                     </app-link>
-                % endif
-                 <app-link href="${indexerApi(show.indexer).config['show_url']}${show.indexerid}" title="${indexerApi(show.indexer).config["show_url"] + str(show.indexerid)}">
-                     <img alt="${indexerApi(show.indexer).name | h}" height="16" width="16" src="images/${indexerApi(show.indexer).config["icon"]}" style="margin-top: -1px; vertical-align:middle;"/>
-                 </app-link>
+                    <app-link v-if="showIndexerUrl" :href="showIndexerUrl" :title="showIndexerUrl">
+                        <img :alt="indexerConfig[show.indexer].name" height="16" width="16" :src="'images/' + indexerConfig[show.indexer].icon" style="margin-top: -1px; vertical-align:middle;"/>
+                    </app-link>
                  % if xem_numbering or xem_absolute_numbering:
                      <app-link href="http://thexem.de/search?q=${show.name | h}" title="http://thexem.de/search?q-${show.name | h}">
                          <img alt="[xem]" height="16" width="16" src="images/xem.png" style="margin-top: -1px; vertical-align:middle;"/>
                      </app-link>
                  % endif
-                     <app-link href="https://fanart.tv/series/${show.indexerid}" title="https://fanart.tv/series/${show.name | h}"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>
+                    <app-link :href="'https://fanart.tv/series/' + show.id[show.indexer]" :title="'https://fanart.tv/series/' + show.id[show.indexer]"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>
                  </div>
                  <div id="tags" class="pull-left col-lg-9 col-md-9 col-sm-12 col-xs-12">
                      <ul class="tags">
-                         % if show.imdb_info.get('genres'):
+                         %if show.genre:
+                            <app-link v-for="genre in dedupeGenres(show.genres)" :key="genre.toString()" :href="'https://trakt.tv/shows/popular/?genres=' + genre.toLowerCase().replace(' ', '-')" :title="'View other popular ' + genre + ' shows on trakt.tv.'"><li>{{ genre }}</li></app-link>
+                         % elif show.imdb_info.get('genres'):
                              % for imdbgenre in show.imdb_info['genres'].replace('Sci-Fi', 'Science-Fiction').split('|'):
-                                 <app-link href="http://www.imdb.com/search/title?count=100&title_type=tv_series&genres=${imdbgenre.lower()}" title="View other popular ${imdbgenre} shows on IMDB."><li>${imdbgenre}</li></app-link>
-                             % endfor
-                         % elif show.genre:
-                             % for genre in show.genre.strip('|').split('|'):
-                                 <app-link href="http://trakt.tv/shows/popular/?genres=${genre.lower()}" title="View other popular ${genre} shows on trakt.tv."><li>${genre}</li></app-link>
+                                 <app-link href="https://www.imdb.com/search/title?count=100&title_type=tv_series&genres=${imdbgenre.lower()}" title="View other popular ${imdbgenre} shows on IMDB."><li>${imdbgenre}</li></app-link>
                              % endfor
                          % endif
                      </ul>
@@ -152,7 +135,7 @@
             <div class="row">
                 <!-- Show Summary -->
                 <div id="summary" class="col-md-12">
-                    <div id="show-summary" class="${'summaryFanArt' if app.FANART_BACKGROUND else ''} col-lg-9 col-md-8 col-sm-8 col-xs-12">
+                    <div id="show-summary" :class="[{ summaryFanArt: config.fanartBackground }, 'col-lg-9', 'col-md-8', 'col-sm-8', 'col-xs-12']">
                         <table class="summaryTable pull-left">
                             <tr v-if="show.plot">
                                 <td colspan="2" style="padding-bottom: 15px;">
@@ -173,15 +156,11 @@
                                 % endif
                             % endif
                                 </td></tr>
-                            % if show.network and show.airs:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.airs} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"} on ${show.network}</td></tr>
-                            % elif show.network:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.network}</td></tr>
-                            % elif show.airs:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.airs} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"}</td></tr>
-                            % endif
-                                <tr><td class="showLegend">Show Status: </td><td>${show.status}</td></tr>
-                                <tr><td class="showLegend">Default EP Status: </td><td>${statusStrings[show.default_ep_status]}</td></tr>
+                                <tr v-if="show.network && show.airs"><td class="showLegend">Originally Airs: </td><td>{{ show.airs }} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"} on {{ show.network }}</td></tr>
+                                <tr v-else-if="show.network"><td class="showLegend">Originally Airs: </td><td>{{ show.network }}</td></tr>
+                                <tr v-else-if="show.airs"><td class="showLegend">Originally Airs: </td><td>{{ show.airs }} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"}</td></tr>
+                                <tr><td class="showLegend">Show Status: </td><td>{{ show.status }}</td></tr>
+                                <tr><td class="showLegend">Default EP Status: </td><td>{{ show.config.defaultEpisodeStatus }}</td></tr>
                             % if showLoc[1]:
                                 <tr><td class="showLegend">Location: </td><td>${showLoc[0]}</td></tr>
                             % else:
@@ -223,16 +202,14 @@
                         <table class="pull-xs-left pull-md-right pull-sm-right pull-lg-right">
                             <% info_flag = subtitles.code_from_code(show.lang) if show.lang else '' %>
                             <tr><td class="showLegend">Info Language:</td><td><img src="images/subtitles/flags/${info_flag}.png" width="16" height="11" alt="${show.lang}" title="${show.lang}" onError="this.onerror=null;this.src='images/flags/unknown.png';"/></td></tr>
-                            % if app.USE_SUBTITLES:
-                            <tr><td class="showLegend">Subtitles: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.subtitles)]}" alt="${("N", "Y")[bool(show.subtitles)]}" width="16" height="16" /></td></tr>
-                            % endif
-                            <tr><td class="showLegend">Season Folders: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" alt="${("N", "Y")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Paused: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.paused)]}" alt="${("N", "Y")[bool(show.paused)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Air-by-Date: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.air_by_date)]}" alt="${("N", "Y")[bool(show.air_by_date)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Sports: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.is_sports)]}" alt="${("N", "Y")[bool(show.is_sports)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Anime: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.is_anime)]}" alt="${("N", "Y")[bool(show.is_anime)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">DVD Order: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.dvd_order)]}" alt="${("N", "Y")[bool(show.dvd_order)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Scene Numbering: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.scene)]}" alt="${("N", "Y")[bool(show.scene)]}" width="16" height="16" /></td></tr>
+                            <tr v-if="config.subtitles.enabled"><td class="showLegend">Subtitles: </td><td><img :src="'images/' + (show.config.subtitlesEnabled ? 'yes' : 'no') + '16.png'" :alt="show.config.subtitlesEnabled ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Season Folders: </td><td><img :src="'images/' + (show.config.seasonFolders || config.namingForceFolders ? 'yes' : 'no') + '16.png'" :alt="show.config.seasonFolders || config.namingForceFolders ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Paused: </td><td><img :src="'images/' + (show.config.paused ? 'yes' : 'no') + '16.png'" :alt="show.config.paused ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Air-by-Date: </td><td><img :src="'images/' + (show.config.airByDate ? 'yes' : 'no') + '16.png'" :alt="show.config.airByDate ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Sports: </td><td><img :src="'images/' + (show.config.sports ? 'yes' : 'no') + '16.png'" :alt="show.config.sports ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Anime: </td><td><img :src="'images/' + (show.config.anime ? 'yes' : 'no') + '16.png'" :alt="show.config.anime ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">DVD Order: </td><td><img :src="'images/' + (show.config.dvdOrder ? 'yes' : 'no') + '16.png'" :alt="show.config.dvdOrder ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Scene Numbering: </td><td><img :src="'images/' + (show.config.scene ? 'yes' : 'no') + '16.png'" :alt="show.config.scene ? 'Y' : 'N'" width="16" height="16" /></td></tr>
                         </table>
                      </div> <!-- end of show-status -->
                 </div> <!-- end of summary -->
@@ -243,8 +220,7 @@
 
 <div id="row-show-episodes-controls" class="row">
     <div id="col-show-episodes-controls" class="col-md-12">
-    % if (action == "displayShow"):
-        <div class="row key"> <!-- Checkbox filter controls -->
+        <div v-if="$route.name === 'displayShow'" class="row key"> <!-- Checkbox filter controls -->
             <div class="col-lg-12" id="checkboxControls">
                 <div id="key-padding" class="pull-left top-5">
                     <% total_snatched = ep_counts[Overview.SNATCHED] + ep_counts[Overview.SNATCHED_PROPER] + ep_counts[Overview.SNATCHED_BEST] %>
@@ -283,8 +259,6 @@
                 </div>
             </div> <!-- checkboxControls -->
         </div> <!-- end of row -->
-    % else:
-        <div></div>
-    % endif
+        <div v-else></div>
     </div> <!-- end of col -->
 </div> <!-- end of row -->
diff --git a/themes/light/assets/js/vendors.js b/themes/light/assets/js/vendors.js
index 46553452d9..8118a080d9 100644
--- a/themes/light/assets/js/vendors.js
+++ b/themes/light/assets/js/vendors.js
@@ -603,7 +603,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\n/* harmony import */ var _plot_info_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./plot-info.vue */ \"./src/components/plot-info.vue\");\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'displayShow',\n  template: '#display-show-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    PlotInfo: _plot_info_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.$route.query.seriesid;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      }\n\n      return show;\n    }\n  }),\n  mounted: function mounted() {\n    var _this = this;\n\n    var setQuality = this.setQuality,\n        setEpisodeSceneNumbering = this.setEpisodeSceneNumbering,\n        setAbsoluteSceneNumbering = this.setAbsoluteSceneNumbering,\n        setInputValidInvalid = this.setInputValidInvalid,\n        getSeasonSceneExceptions = this.getSeasonSceneExceptions,\n        showHideRows = this.showHideRows;\n    $(window).on('resize', function () {\n      _this.reflowLayout();\n    });\n    window.addEventListener('load', function () {\n      _this.reflowLayout();\n\n      $.ajaxEpSearch({\n        colorRow: true\n      });\n      startAjaxEpisodeSubtitles(); // eslint-disable-line no-undef\n\n      $.ajaxEpSubtitlesSearch();\n      $.ajaxEpRedownloadSubtitle();\n    });\n    $(document.body).on('change', '#seasonJump', function (event) {\n      var id = $('#seasonJump option:selected').val();\n\n      if (id && id !== 'jump') {\n        var season = $('#seasonJump option:selected').data('season');\n        $('html,body').animate({\n          scrollTop: $('[name=\"' + id.substring(1) + '\"]').offset().top - 100\n        }, 'slow');\n        $('#collapseSeason-' + season).collapse('show');\n        location.hash = id;\n      }\n\n      $(event.currentTarget).val('jump');\n    });\n    $(document.body).on('click', '#changeStatus', function () {\n      var epArr = [];\n      var status = $('#statusSelect').val();\n      var quality = $('#qualitySelect').val();\n      var showSlug = $('#series-slug').val();\n      $('.epCheck').each(function (index, element) {\n        if (element.checked === true) {\n          epArr.push($(element).attr('id'));\n        }\n      });\n\n      if (epArr.length === 0) {\n        return false;\n      }\n\n      if (quality) {\n        setQuality(quality, showSlug, epArr);\n      }\n\n      if (status) {\n        window.location.href = $('base').attr('href') + 'home/setStatus?' + 'indexername=' + $('#indexer-name').attr('value') + '&seriesid=' + $('#series-id').attr('value') + '&eps=' + epArr.join('|') + '&status=' + status;\n      }\n    });\n    $(document.body).on('click', '.seasonCheck', function (event) {\n      var seasCheck = event.currentTarget;\n      var seasNo = $(seasCheck).attr('id');\n      $('#collapseSeason-' + seasNo).collapse('show');\n      var seasonIdentifier = 's' + seasNo;\n      $('.epCheck:visible').each(function (index, element) {\n        var epParts = $(element).attr('id').split('e');\n\n        if (epParts[0] === seasonIdentifier) {\n          element.checked = seasCheck.checked;\n        }\n      });\n    });\n    var lastCheck = null;\n    $(document.body).on('click', '.epCheck', function (event) {\n      var target = event.currentTarget;\n\n      if (!lastCheck || !event.shiftKey) {\n        lastCheck = target;\n        return;\n      }\n\n      var check = target;\n      var found = 0;\n      $('.epCheck').each(function (index, element) {\n        if (found === 1) {\n          element.checked = lastCheck.checked;\n        }\n\n        if (found === 2) {\n          return false;\n        }\n\n        if (element === check || element === lastCheck) {\n          found++;\n        }\n      });\n    }); // Selects all visible episode checkboxes.\n\n    $(document.body).on('click', '.seriesCheck', function () {\n      $('.epCheck:visible').each(function (index, element) {\n        element.checked = true;\n      });\n      $('.seasonCheck:visible').each(function (index, element) {\n        element.checked = true;\n      });\n    }); // Clears all visible episode checkboxes and the season selectors\n\n    $(document.body).on('click', '.clearAll', function () {\n      $('.epCheck:visible').each(function (index, element) {\n        element.checked = false;\n      });\n      $('.seasonCheck:visible').each(function (index, element) {\n        element.checked = false;\n      });\n    }); // Show/hide different types of rows when the checkboxes are changed\n\n    $(document.body).on('change', '#checkboxControls input', function (event) {\n      var whichClass = $(event.currentTarget).attr('id');\n      showHideRows(whichClass);\n    }); // Initially show/hide all the rows according to the checkboxes\n\n    $('#checkboxControls input').each(function (index, element) {\n      var status = $(element).prop('checked');\n      $('tr.' + $(element).attr('id')).each(function (index, tableRow) {\n        if (status) {\n          $(tableRow).show();\n        } else {\n          $(tableRow).hide();\n        }\n      });\n    });\n    $(document.body).on('change', '.sceneSeasonXEpisode', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      var value = $(target).val();\n      $(target).val(value.replace(/[^0-9xX]*/g, ''));\n      var forSeason = $(target).attr('data-for-season');\n      var forEpisode = $(target).attr('data-for-episode'); // If empty reset the field\n\n      if (value === '') {\n        setEpisodeSceneNumbering(forSeason, forEpisode, null, null);\n        return;\n      }\n\n      var m = $(target).val().match(/^(\\d+)x(\\d+)$/i);\n      var onlyEpisode = $(target).val().match(/^(\\d+)$/i);\n      var sceneSeason = null;\n      var sceneEpisode = null;\n      var isValid = false;\n\n      if (m) {\n        sceneSeason = m[1];\n        sceneEpisode = m[2];\n        isValid = setInputValidInvalid(true, $(target));\n      } else if (onlyEpisode) {\n        // For example when '5' is filled in instead of '1x5', asume it's the first season\n        sceneSeason = forSeason;\n        sceneEpisode = onlyEpisode[1];\n        isValid = setInputValidInvalid(true, $(target));\n      } else {\n        isValid = setInputValidInvalid(false, $(target));\n      }\n\n      if (isValid) {\n        setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode);\n      }\n    });\n    $(document.body).on('change', '.sceneAbsolute', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      $(target).val($(target).val().replace(/[^0-9xX]*/g, ''));\n      var forAbsolute = $(target).attr('data-for-absolute');\n      var m = $(target).val().match(/^(\\d{1,3})$/i);\n      var sceneAbsolute = null;\n\n      if (m) {\n        sceneAbsolute = m[1];\n      }\n\n      setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute);\n    });\n    $('#showTable, #animeTable').tablesorter({\n      widgets: ['saveSort', 'stickyHeaders', 'columnSelector'],\n      widgetOptions: {\n        columnSelector_saveColumns: true,\n        // eslint-disable-line camelcase\n        columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n        // eslint-disable-line camelcase\n        columnSelector_mediaquery: false,\n        // eslint-disable-line camelcase\n        columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n      }\n    });\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#showTable, #animeTable'), '#popover-target');\n    }); // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the\n    // Season to Show Episodes or Hide Episodes.\n\n    $('.collapse.toggle').on('hide.bs.collapse', function () {\n      var reg = /collapseSeason-(\\d+)/g;\n      var result = reg.exec(this.id);\n      $('#showseason-' + result[1]).text('Show Episodes');\n      $('#season-' + result[1] + '-cols').addClass('shadow');\n    });\n    $('.collapse.toggle').on('show.bs.collapse', function () {\n      var reg = /collapseSeason-(\\d+)/g;\n      var result = reg.exec(this.id);\n      $('#showseason-' + result[1]).text('Hide Episodes');\n      $('#season-' + result[1] + '-cols').removeClass('shadow');\n    }); // Generate IMDB stars\n\n    $('.imdbstars').each(function (index, element) {\n      $(element).html($('<span/>').width($(element).text() * 12));\n    });\n    attachImdbTooltip(); // eslint-disable-line no-undef\n    // Get the season exceptions and the xem season mappings.\n\n    getSeasonSceneExceptions();\n    $(document.body).on('click', '.display-specials a', function (event) {\n      _api__WEBPACK_IMPORTED_MODULE_1__[\"api\"].patch('config/main', {\n        layout: {\n          show: {\n            specials: $(event.currentTarget).text() !== 'Hide'\n          }\n        }\n      }).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    });\n  },\n  methods: {\n    /**\n     * Moves summary background and checkbox controls\n     */\n    reflowLayout: function reflowLayout() {\n      var _this2 = this;\n\n      this.$nextTick(function () {\n        _this2.moveSummaryBackground();\n\n        _this2.movecheckboxControlsBackground();\n      });\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    },\n    movecheckboxControlsBackground: function movecheckboxControlsBackground() {\n      var height = $('#checkboxControls').height() + 10;\n      var top = $('#checkboxControls').offset().top - 3;\n      $('#checkboxControlsBackground').height(height);\n      $('#checkboxControlsBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#checkboxControlsBackground').show();\n    },\n    setQuality: function setQuality(quality, showSlug, episodes) {\n      var patchData = {};\n      episodes.forEach(function (episode) {\n        patchData[episode] = {\n          quality: parseInt(quality, 10)\n        };\n      });\n      _api__WEBPACK_IMPORTED_MODULE_1__[\"api\"].patch('series/' + showSlug + '/episodes', patchData).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    },\n    setEpisodeSceneNumbering: function setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneSeason === '') {\n        sceneSeason = null;\n      }\n\n      if (sceneEpisode === '') {\n        sceneEpisode = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forSeason: forSeason,\n        forEpisode: forEpisode,\n        sceneSeason: sceneSeason,\n        sceneEpisode: sceneEpisode\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneSeason === null || data.sceneEpisode === null) {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val('');\n        } else {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val(data.sceneSeason + 'x' + data.sceneEpisode);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setAbsoluteSceneNumbering: function setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneAbsolute === '') {\n        sceneAbsolute = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forAbsolute: forAbsolute,\n        sceneAbsolute: sceneAbsolute\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneAbsolute === null) {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val('');\n        } else {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val(data.sceneAbsolute);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setInputValidInvalid: function setInputValidInvalid(valid, el) {\n      if (valid) {\n        $(el).css({\n          'background-color': '#90EE90',\n          // Green\n          'color': '#FFF',\n          // eslint-disable-line quote-props\n          'font-weight': 'bold'\n        });\n        return true;\n      }\n\n      $(el).css({\n        'background-color': '#FF0000',\n        // Red\n        'color': '#FFF!important',\n        // eslint-disable-line quote-props\n        'font-weight': 'bold'\n      });\n      return false;\n    },\n    // @TODO: OMG: This is just a basic json, in future it should be based on the CRUD route.\n    // Get the season exceptions and the xem season mappings.\n    getSeasonSceneExceptions: function getSeasonSceneExceptions() {\n      var _this3 = this;\n\n      var indexerName = document.querySelector('#indexer-name').value;\n      var seriesId = document.querySelector('#series-id').value;\n\n      if (!indexerName || !seriesId) {\n        console.warn('Unable to get season scene exceptions: Unknown series identifier');\n        return;\n      }\n\n      var params = {\n        indexername: indexerName,\n        seriesid: seriesId\n      };\n      _api__WEBPACK_IMPORTED_MODULE_1__[\"apiRoute\"].get('home/getSeasonSceneExceptions', {\n        params: params\n      }).then(function (response) {\n        _this3.setSeasonSceneExceptions(response.data);\n      }).catch(function (error) {\n        console.error('Error getting season scene exceptions', error);\n      });\n    },\n    // Set the season exception based on using the get_xem_numbering_for_show() for animes if available in data.xemNumbering,\n    // or else try to map using just the data.season_exceptions.\n    setSeasonSceneExceptions: function setSeasonSceneExceptions(data) {\n      $.each(data.seasonExceptions, function (season, nameExceptions) {\n        var foundInXem = false; // Check if it is a season name exception, we don't handle the show name exceptions here\n\n        if (season >= 0) {\n          // Loop through the xem mapping, and check if there is a xem_season, that needs to show the season name exception\n          $.each(data.xemNumbering, function (indexerSeason, xemSeason) {\n            if (xemSeason === parseInt(season, 10)) {\n              foundInXem = true;\n              $('<img>', {\n                id: 'xem-exception-season-' + xemSeason,\n                alt: '[xem]',\n                height: '16',\n                width: '16',\n                src: 'images/xem.png',\n                title: nameExceptions.join(', ')\n              }).appendTo('[data-season=' + indexerSeason + ']');\n            }\n          }); // This is not a xem season exception, let's set the exceptions as a medusa exception\n\n          if (!foundInXem) {\n            $('<img>', {\n              id: 'xem-exception-season-' + season,\n              alt: '[medusa]',\n              height: '16',\n              width: '16',\n              src: 'images/ico/favicon-16.png',\n              title: nameExceptions.join(', ')\n            }).appendTo('[data-season=' + season + ']');\n          }\n        }\n      });\n    },\n    showHideRows: function showHideRows(whichClass) {\n      var status = $('#checkboxControls > input, #' + whichClass).prop('checked');\n      $('tr.' + whichClass).each(function (index, element) {\n        if (status) {\n          $(element).show();\n        } else {\n          $(element).hide();\n        }\n      }); // Hide season headers with no episodes under them\n\n      $('tr.seasonheader').each(function (index, element) {\n        var numRows = 0;\n        var seasonNo = $(element).attr('id');\n        $('tr.' + seasonNo + ' :visible').each(function () {\n          numRows++;\n        });\n\n        if (numRows === 0) {\n          $(element).hide();\n          $('#' + seasonNo + '-cols').hide();\n        } else {\n          $(element).show();\n          $('#' + seasonNo + '-cols').show();\n        }\n      });\n    }\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var is_visible__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! is-visible */ \"./node_modules/is-visible/module/index.js\");\n/* harmony import */ var vue_scrollto__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-scrollto */ \"./node_modules/vue-scrollto/vue-scrollto.js\");\n/* harmony import */ var vue_scrollto__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue_scrollto__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../api */ \"./src/api.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\n/* harmony import */ var _plot_info_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./plot-info.vue */ \"./src/components/plot-info.vue\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance\"); }\n\nfunction _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'displayShow',\n  template: '#display-show-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    PlotInfo: _plot_info_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  props: {\n    /**\n     * Show id\n     */\n    showId: {\n      type: Number\n    },\n\n    /**\n     * Show indexer\n     */\n    showIndexer: {\n      type: String\n    }\n  },\n  data: function data() {\n    return {\n      jumpToSeason: 'jump'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_2__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    },\n    indexerConfig: function indexerConfig(state) {\n      return state.config.indexers.config.indexers;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_2__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.showIndexer || this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.showId || this.$route.query.seriesid;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      } // Not detailed\n\n\n      if (!show.seasons) {\n        $store.dispatch('getShow', {\n          id: id,\n          indexer: indexer,\n          detailed: true\n        });\n        return getShowById({\n          indexer: indexer,\n          id: id\n        });\n      }\n\n      return show;\n    },\n    showIndexerUrl: function showIndexerUrl() {\n      var show = this.show,\n          indexerConfig = this.indexerConfig;\n\n      if (!show.indexer || !indexerConfig[show.indexer] || !indexerConfig[show.indexer].showUrl) {\n        return undefined;\n      }\n\n      var id = show.id[show.indexer];\n      var indexerUrl = indexerConfig[show.indexer].showUrl;\n      return \"\".concat(indexerUrl).concat(id);\n    }\n  }),\n  mounted: function mounted() {\n    var _this = this;\n\n    var setQuality = this.setQuality,\n        setEpisodeSceneNumbering = this.setEpisodeSceneNumbering,\n        setAbsoluteSceneNumbering = this.setAbsoluteSceneNumbering,\n        setInputValidInvalid = this.setInputValidInvalid,\n        getSeasonSceneExceptions = this.getSeasonSceneExceptions,\n        showHideRows = this.showHideRows;\n    this.$watch('show', function () {\n      _this.$nextTick(function () {\n        return _this.reflowLayout();\n      });\n    });\n    ['load', 'resize'].map(function (event) {\n      return window.addEventListener(event, function () {\n        _this.reflowLayout();\n      });\n    });\n    window.addEventListener('load', function () {\n      $.ajaxEpSearch({\n        colorRow: true\n      });\n      startAjaxEpisodeSubtitles(); // eslint-disable-line no-undef\n\n      $.ajaxEpSubtitlesSearch();\n      $.ajaxEpRedownloadSubtitle();\n    });\n    $(document.body).on('click', '#changeStatus', function () {\n      var epArr = [];\n      var status = $('#statusSelect').val();\n      var quality = $('#qualitySelect').val();\n      var showSlug = $('#series-slug').val();\n      $('.epCheck').each(function (index, element) {\n        if (element.checked === true) {\n          epArr.push($(element).attr('id'));\n        }\n      });\n\n      if (epArr.length === 0) {\n        return false;\n      }\n\n      if (quality) {\n        setQuality(quality, showSlug, epArr);\n      }\n\n      if (status) {\n        window.location.href = $('base').attr('href') + 'home/setStatus?' + 'indexername=' + $('#indexer-name').attr('value') + '&seriesid=' + $('#series-id').attr('value') + '&eps=' + epArr.join('|') + '&status=' + status;\n      }\n    });\n    $(document.body).on('click', '.seasonCheck', function (event) {\n      var seasCheck = event.currentTarget;\n      var seasNo = $(seasCheck).attr('id');\n      $('#collapseSeason-' + seasNo).collapse('show');\n      var seasonIdentifier = 's' + seasNo;\n      $('.epCheck:visible').each(function (index, element) {\n        var epParts = $(element).attr('id').split('e');\n\n        if (epParts[0] === seasonIdentifier) {\n          element.checked = seasCheck.checked;\n        }\n      });\n    });\n    var lastCheck = null;\n    $(document.body).on('click', '.epCheck', function (event) {\n      var target = event.currentTarget;\n\n      if (!lastCheck || !event.shiftKey) {\n        lastCheck = target;\n        return;\n      }\n\n      var check = target;\n      var found = 0;\n      $('.epCheck').each(function (index, element) {\n        if (found === 1) {\n          element.checked = lastCheck.checked;\n        }\n\n        if (found === 2) {\n          return false;\n        }\n\n        if (element === check || element === lastCheck) {\n          found++;\n        }\n      });\n    }); // Selects all visible episode checkboxes\n\n    document.addEventListener('click', function (event) {\n      if (event.target && event.target.className.includes('seriesCheck')) {\n        _toConsumableArray(document.querySelectorAll('.epCheck, .seasonCheck')).filter(is_visible__WEBPACK_IMPORTED_MODULE_0__[\"isVisible\"]).forEach(function (element) {\n          element.checked = true;\n        });\n      }\n    }); // Clears all visible episode checkboxes and the season selectors\n\n    document.addEventListener('click', function (event) {\n      if (event.target && event.target.className.includes('clearAll')) {\n        _toConsumableArray(document.querySelectorAll('.epCheck, .seasonCheck')).filter(is_visible__WEBPACK_IMPORTED_MODULE_0__[\"isVisible\"]).forEach(function (element) {\n          element.checked = false;\n        });\n      }\n    }); // Show/hide different types of rows when the checkboxes are changed\n\n    $(document.body).on('change', '#checkboxControls input', function (event) {\n      var whichClass = $(event.currentTarget).attr('id');\n      showHideRows(whichClass);\n    }); // Initially show/hide all the rows according to the checkboxes\n\n    $('#checkboxControls input').each(function (index, element) {\n      var status = $(element).prop('checked');\n      $('tr.' + $(element).attr('id')).each(function (index, tableRow) {\n        if (status) {\n          $(tableRow).show();\n        } else {\n          $(tableRow).hide();\n        }\n      });\n    });\n    $(document.body).on('change', '.sceneSeasonXEpisode', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      var value = $(target).val();\n      $(target).val(value.replace(/[^0-9xX]*/g, ''));\n      var forSeason = $(target).attr('data-for-season');\n      var forEpisode = $(target).attr('data-for-episode'); // If empty reset the field\n\n      if (value === '') {\n        setEpisodeSceneNumbering(forSeason, forEpisode, null, null);\n        return;\n      }\n\n      var m = $(target).val().match(/^(\\d+)x(\\d+)$/i);\n      var onlyEpisode = $(target).val().match(/^(\\d+)$/i);\n      var sceneSeason = null;\n      var sceneEpisode = null;\n      var isValid = false;\n\n      if (m) {\n        sceneSeason = m[1];\n        sceneEpisode = m[2];\n        isValid = setInputValidInvalid(true, $(target));\n      } else if (onlyEpisode) {\n        // For example when '5' is filled in instead of '1x5', asume it's the first season\n        sceneSeason = forSeason;\n        sceneEpisode = onlyEpisode[1];\n        isValid = setInputValidInvalid(true, $(target));\n      } else {\n        isValid = setInputValidInvalid(false, $(target));\n      }\n\n      if (isValid) {\n        setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode);\n      }\n    });\n    $(document.body).on('change', '.sceneAbsolute', function (event) {\n      var target = event.currentTarget; // Strip non-numeric characters\n\n      $(target).val($(target).val().replace(/[^0-9xX]*/g, ''));\n      var forAbsolute = $(target).attr('data-for-absolute');\n      var m = $(target).val().match(/^(\\d{1,3})$/i);\n      var sceneAbsolute = null;\n\n      if (m) {\n        sceneAbsolute = m[1];\n      }\n\n      setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute);\n    });\n    $('#showTable, #animeTable').tablesorter({\n      widgets: ['saveSort', 'stickyHeaders', 'columnSelector'],\n      widgetOptions: {\n        columnSelector_saveColumns: true,\n        // eslint-disable-line camelcase\n        columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n        // eslint-disable-line camelcase\n        columnSelector_mediaquery: false,\n        // eslint-disable-line camelcase\n        columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n      }\n    });\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#showTable, #animeTable'), '#popover-target');\n    }); // Changes the button when clicked for collapsing/expanding the season to show/hide episodes\n\n    document.querySelectorAll('.collapse.toggle').forEach(function (element) {\n      element.addEventListener('hide.bs.collapse', function () {\n        // On hide\n        var reg = /collapseSeason-(\\d+)/g;\n        var result = reg.exec(_this.id);\n        $('#showseason-' + result[1]).text('Show Episodes');\n        $('#season-' + result[1] + '-cols').addClass('shadow');\n      });\n      element.addEventListener('show.bs.collapse', function () {\n        // On show\n        var reg = /collapseSeason-(\\d+)/g;\n        var result = reg.exec(_this.id);\n        $('#showseason-' + result[1]).text('Hide Episodes');\n        $('#season-' + result[1] + '-cols').removeClass('shadow');\n      });\n    }); // Get the season exceptions and the xem season mappings.\n\n    getSeasonSceneExceptions();\n    $(document.body).on('click', '.display-specials a', function (event) {\n      _api__WEBPACK_IMPORTED_MODULE_3__[\"api\"].patch('config/main', {\n        layout: {\n          show: {\n            specials: $(event.currentTarget).text() !== 'Hide'\n          }\n        }\n      }).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    });\n  },\n  methods: {\n    /**\n     * Attaches imdb tool tip,\n     * moves summary background and checkbox controls\n     */\n    reflowLayout: function reflowLayout() {\n      var _this2 = this;\n\n      console.debug('Reflowing layout');\n      this.$nextTick(function () {\n        _this2.moveSummaryBackground();\n\n        _this2.movecheckboxControlsBackground();\n      });\n      attachImdbTooltip(); // eslint-disable-line no-undef\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    },\n    movecheckboxControlsBackground: function movecheckboxControlsBackground() {\n      var height = $('#checkboxControls').height() + 10;\n      var top = $('#checkboxControls').offset().top - 3;\n      $('#checkboxControlsBackground').height(height);\n      $('#checkboxControlsBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#checkboxControlsBackground').show();\n    },\n    setQuality: function setQuality(quality, showSlug, episodes) {\n      var patchData = {};\n      episodes.forEach(function (episode) {\n        patchData[episode] = {\n          quality: parseInt(quality, 10)\n        };\n      });\n      _api__WEBPACK_IMPORTED_MODULE_3__[\"api\"].patch('series/' + showSlug + '/episodes', patchData).then(function (response) {\n        log.info(response.data);\n        window.location.reload();\n      }).catch(function (error) {\n        log.error(error.data);\n      });\n    },\n    setEpisodeSceneNumbering: function setEpisodeSceneNumbering(forSeason, forEpisode, sceneSeason, sceneEpisode) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneSeason === '') {\n        sceneSeason = null;\n      }\n\n      if (sceneEpisode === '') {\n        sceneEpisode = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forSeason: forSeason,\n        forEpisode: forEpisode,\n        sceneSeason: sceneSeason,\n        sceneEpisode: sceneEpisode\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneSeason === null || data.sceneEpisode === null) {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val('');\n        } else {\n          $('#sceneSeasonXEpisode_' + seriesId + '_' + forSeason + '_' + forEpisode).val(data.sceneSeason + 'x' + data.sceneEpisode);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setAbsoluteSceneNumbering: function setAbsoluteSceneNumbering(forAbsolute, sceneAbsolute) {\n      var indexerName = $('#indexer-name').val();\n      var seriesId = $('#series-id').val();\n\n      if (sceneAbsolute === '') {\n        sceneAbsolute = null;\n      }\n\n      $.getJSON('home/setSceneNumbering', {\n        indexername: indexerName,\n        seriesid: seriesId,\n        forAbsolute: forAbsolute,\n        sceneAbsolute: sceneAbsolute\n      }, function (data) {\n        // Set the values we get back\n        if (data.sceneAbsolute === null) {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val('');\n        } else {\n          $('#sceneAbsolute_' + seriesId + '_' + forAbsolute).val(data.sceneAbsolute);\n        }\n\n        if (!data.success) {\n          if (data.errorMessage) {\n            alert(data.errorMessage); // eslint-disable-line no-alert\n          } else {\n            alert('Update failed.'); // eslint-disable-line no-alert\n          }\n        }\n      });\n    },\n    setInputValidInvalid: function setInputValidInvalid(valid, el) {\n      if (valid) {\n        $(el).css({\n          'background-color': '#90EE90',\n          // Green\n          'color': '#FFF',\n          // eslint-disable-line quote-props\n          'font-weight': 'bold'\n        });\n        return true;\n      }\n\n      $(el).css({\n        'background-color': '#FF0000',\n        // Red\n        'color': '#FFF!important',\n        // eslint-disable-line quote-props\n        'font-weight': 'bold'\n      });\n      return false;\n    },\n    // @TODO: OMG: This is just a basic json, in future it should be based on the CRUD route.\n    // Get the season exceptions and the xem season mappings.\n    getSeasonSceneExceptions: function getSeasonSceneExceptions() {\n      var _this3 = this;\n\n      var indexer = this.indexer,\n          id = this.id;\n\n      if (!indexer || !id) {\n        console.warn('Unable to get season scene exceptions: Unknown series identifier');\n        return;\n      }\n\n      _api__WEBPACK_IMPORTED_MODULE_3__[\"apiRoute\"].get('home/getSeasonSceneExceptions', {\n        params: {\n          indexername: indexer,\n          seriesid: id\n        }\n      }).then(function (response) {\n        _this3.setSeasonSceneExceptions(response.data);\n      }).catch(function (error) {\n        console.error('Error getting season scene exceptions', error);\n      });\n    },\n    // Set the season exception based on using the get_xem_numbering_for_show() for animes if available in data.xemNumbering,\n    // or else try to map using just the data.season_exceptions.\n    setSeasonSceneExceptions: function setSeasonSceneExceptions(data) {\n      $.each(data.seasonExceptions, function (season, nameExceptions) {\n        var foundInXem = false; // Check if it is a season name exception, we don't handle the show name exceptions here\n\n        if (season >= 0) {\n          // Loop through the xem mapping, and check if there is a xem_season, that needs to show the season name exception\n          $.each(data.xemNumbering, function (indexerSeason, xemSeason) {\n            if (xemSeason === parseInt(season, 10)) {\n              foundInXem = true;\n              $('<img>', {\n                id: 'xem-exception-season-' + xemSeason,\n                alt: '[xem]',\n                height: '16',\n                width: '16',\n                src: 'images/xem.png',\n                title: nameExceptions.join(', ')\n              }).appendTo('[data-season=' + indexerSeason + ']');\n            }\n          }); // This is not a xem season exception, let's set the exceptions as a medusa exception\n\n          if (!foundInXem) {\n            $('<img>', {\n              id: 'xem-exception-season-' + season,\n              alt: '[medusa]',\n              height: '16',\n              width: '16',\n              src: 'images/ico/favicon-16.png',\n              title: nameExceptions.join(', ')\n            }).appendTo('[data-season=' + season + ']');\n          }\n        }\n      });\n    },\n    showHideRows: function showHideRows(whichClass) {\n      var status = $('#checkboxControls > input, #' + whichClass).prop('checked');\n      $('tr.' + whichClass).each(function (index, element) {\n        if (status) {\n          $(element).show();\n        } else {\n          $(element).hide();\n        }\n      }); // Hide season headers with no episodes under them\n\n      $('tr.seasonheader').each(function (index, element) {\n        var numRows = 0;\n        var seasonNo = $(element).attr('id');\n        $('tr.' + seasonNo + ' :visible').each(function () {\n          numRows++;\n        });\n\n        if (numRows === 0) {\n          $(element).hide();\n          $('#' + seasonNo + '-cols').hide();\n        } else {\n          $(element).show();\n          $('#' + seasonNo + '-cols').show();\n        }\n      });\n    },\n    toggleSpecials: function toggleSpecials() {\n      this.$store.dispatch('setConfig', {\n        layout: {\n          show: {\n            specials: !this.config.layout.show.specials\n          }\n        }\n      });\n    },\n    reverse: function reverse(array) {\n      return array ? array.slice().reverse() : [];\n    },\n    dedupeGenres: function dedupeGenres(genres) {\n      return genres ? _toConsumableArray(new Set(genres.slice(0).map(function (genre) {\n        return genre.replace('-', ' ');\n      }))) : [];\n    }\n  },\n  watch: {\n    jumpToSeason: function jumpToSeason(season) {\n      // Don't jump until an option is selected\n      if (season !== 'jump') {\n        console.debug(\"Jumping to \".concat(season));\n        Object(vue_scrollto__WEBPACK_IMPORTED_MODULE_1__[\"scrollTo\"])(season, 100, {\n          container: 'body',\n          easing: 'ease-in',\n          offset: -100\n        }); // Update URL hash\n\n        location.hash = season; // Reset jump\n\n        this.jumpToSeason = 'jump';\n      }\n    }\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -771,7 +771,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vuex
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'snatchSelection',\n  template: '#snatch-selection-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.$route.query.seriesid;\n    },\n    season: function season() {\n      return this.$route.query.season;\n    },\n    episode: function episode() {\n      return this.$route.query.episode;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      }\n\n      return show;\n    }\n  }),\n  created: function created() {\n    var indexer = this.indexer,\n        id = this.id,\n        $store = this.$store; // Needed for the title\n\n    $store.dispatch('getShow', {\n      indexer: indexer,\n      id: id\n    });\n  },\n  methods: {\n    reflowLayout: function reflowLayout() {\n      var _this = this;\n\n      this.$nextTick(function () {\n        _this.moveSummaryBackground();\n      });\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    }\n  },\n  mounted: function mounted() {\n    var _this2 = this;\n\n    window.addEventListener('load', function () {\n      // Adjust the summary background position and size\n      _this2.reflowLayout();\n    });\n    attachImdbTooltip(); // eslint-disable-line no-undef\n\n    window.addEventListener('resize', function () {\n      _this2.reflowLayout();\n    });\n\n    var updateSpinner = function updateSpinner(message, showSpinner) {\n      // Get spinner object as needed\n      var spinner = $('#searchNotification');\n\n      if (showSpinner) {\n        message = '<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"16\" width=\"16\" />&nbsp;' + message;\n      }\n\n      $(spinner).empty().append(message);\n    }; // Check the previous status of the history table, for hidden or shown, through the data attribute\n    // data-history-toggle-hidden\n\n\n    function toggleHistoryTable() {\n      // eslint-disable-line no-unused-vars\n      // Get previous state which was saved on the wrapper\n      var showOrHide = $('#wrapper').attr('data-history-toggle');\n      $('#historydata').collapse(showOrHide);\n    }\n\n    $.fn.loadContainer = function (path, loadingTxt, errorTxt, callback) {\n      updateSpinner(loadingTxt);\n      $('#manualSearchMeta').load(path + ' #manualSearchMeta meta');\n      $(this).load(path + ' #manualSearchTbody tr', function (response, status) {\n        if (status === 'error') {\n          updateSpinner(errorTxt, false);\n        }\n\n        if (typeof callback !== 'undefined') {\n          callback();\n        }\n      });\n    }; // Click event for the download button for snatching a result\n\n\n    $(document.body).on('click', '.epManualSearch', function (event) {\n      event.preventDefault();\n      var link = event.currentTarget;\n      $(link).children('img').prop('src', 'images/loading16.gif');\n      $.getJSON(event.currentTarget.href, function (data) {\n        if (data.result === 'success') {\n          $(link).children('img').prop('src', 'images/save.png');\n        } else {\n          $(link).children('img').prop('src', 'images/no16.png');\n        }\n      });\n    });\n\n    $.fn.generateStars = function () {\n      return this.each(function (index, element) {\n        $(element).html($('<span/>').width($(element).text() * 12));\n      });\n    };\n\n    function initTableSorter(table) {\n      // Nasty hack to re-initialize tablesorter after refresh\n      $(table).tablesorter({\n        widgets: ['saveSort', 'stickyHeaders', 'columnSelector', 'filter'],\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          columnSelector_saveColumns: true,\n          // eslint-disable-line camelcase\n          columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n          // eslint-disable-line camelcase\n          columnSelector_mediaquery: false,\n          // eslint-disable-line camelcase\n          columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n        },\n        textExtraction: function () {\n          return {\n            // 2: Provider\n            2: function _(node) {\n              return $(node).find('img').attr('title');\n            },\n            // 6: The size column needs an explicit field for the filtering on raw size.\n            6: function _(node) {\n              return node.getAttribute('data-size');\n            },\n            // 9: Published date\n            9: function _(node) {\n              return node.getAttribute('data-datetime');\n            },\n            // 10: Added date\n            10: function _(node) {\n              return node.getAttribute('data-datetime');\n            }\n          };\n        }(),\n        headers: {\n          9: {\n            sorter: 'realISODate'\n          },\n          // Published\n          10: {\n            sorter: 'realISODate'\n          },\n          // Added\n          11: {\n            sorter: false,\n            parser: false // Snatch link\n\n          }\n        }\n      });\n    }\n\n    $('.imdbstars').generateStars();\n\n    function checkCacheUpdates(repeat) {\n      var pollInterval = 5000;\n      repeat = repeat || true;\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var data = $('meta[data-last-prov-updates]').data('last-prov-updates');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      var urlParams = '?indexername=' + indexerName + '&seriesid=' + seriesId + '&season=' + season + '&episode=' + episode;\n\n      if (manualSearchType === 'season') {\n        urlParams += '&manual_search_type=' + manualSearchType;\n      }\n\n      if (!$.isNumeric(seriesId) || !$.isNumeric(season) || !$.isNumeric(episode)) {\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 200);\n      }\n\n      $.ajax({\n        url: 'home/manualSearchCheckCache' + urlParams,\n        type: 'GET',\n        data: data,\n        contentType: 'application/json',\n        error: function error() {\n          // Repeat = false;\n          console.log('Error occurred!!');\n          $('.manualSearchButton').removeAttr('disabled');\n        },\n        complete: function complete() {\n          if (repeat) {\n            setTimeout(checkCacheUpdates, pollInterval);\n          }\n        },\n        timeout: 15000 // Timeout after 15s\n\n      }).done(function (data) {\n        // @TODO: Combine the lower if statements\n        if (data === '') {\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n        }\n\n        if (data.result === 'refresh') {\n          window.location.reload();\n          updateSpinner('Refreshed results...', true);\n        }\n\n        if (data.result === 'searching') {\n          // Ep is searched, you will get a results any minute now\n          pollInterval = 5000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode is being searched, please wait......', true);\n        }\n\n        if (data.result === 'queued') {\n          // Ep is queued, this might take some time to get results\n          pollInterval = 7000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode has been queued, because another search is taking place. please wait..', true);\n        }\n\n        if (data.result === 'finished') {\n          // Ep search is finished\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n          $('#srchresults').trigger('update', true);\n          $('[datetime]').timeago();\n        }\n\n        if (data.result === 'error') {\n          // Ep search is finished but with an error\n          console.log('Probably tried to call manualSelectCheckCache, while page was being refreshed.');\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = true;\n        }\n      });\n    }\n\n    setTimeout(checkCacheUpdates, 2000); // Click event for the reload results and force search buttons\n\n    $(document.body).on('click', '.manualSearchButton', function (event) {\n      event.preventDefault();\n      $('.manualSearchButton').prop('disabled', true);\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var forceSearch = $(event.currentTarget).attr('data-force-search');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      if ($.isNumeric(seriesId) && $.isNumeric(season) && $.isNumeric(episode)) {\n        updateSpinner('Started a forced manual search...', true);\n        $.getJSON('home/snatchSelection', {\n          indexername: indexerName,\n          seriesid: seriesId,\n          season: season,\n          episode: episode,\n          manual_search_type: manualSearchType,\n          // eslint-disable-line camelcase\n          perform_search: forceSearch // eslint-disable-line camelcase\n\n        }); // Force the search, but give the checkCacheUpdates the time to start up a search thread\n\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 2000);\n      }\n    }); // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the\n    // \"Show History\" button to show or hide the snatch/download/failed history for a manual searched episode or pack.\n\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#srchresults'), '#popover-target');\n    });\n    $('#btnReset').click(function () {\n      $('#showTable').trigger('saveSortReset') // Clear saved sort\n      .trigger('sortReset'); // Reset current table sort\n\n      return false;\n    });\n    initTableSorter('#srchresults');\n    this.reflowLayout();\n    $('body').on('hide.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Show History');\n      $('#wrapper').prop('data-history-toggle', 'hide');\n    });\n    $('body').on('show.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Hide History');\n      $('#wrapper').prop('data-history-toggle', 'show');\n    });\n    $(document.body).on('click', '.release-name-ellipses, .release-name-ellipses-toggled', function (event) {\n      var target = $(event.currentTarget);\n\n      if (target.hasClass('release-name-ellipses')) {\n        target.switchClass('release-name-ellipses', 'release-name-ellipses-toggled', 100);\n      } else {\n        target.switchClass('release-name-ellipses-toggled', 'release-name-ellipses', 100);\n      }\n    });\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function($) {/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var _app_link_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app-link.vue */ \"./src/components/app-link.vue\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance\"); }\n\nfunction _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'snatchSelection',\n  template: '#snatch-selection-template',\n  components: {\n    AppLink: _app_link_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n  },\n  metaInfo: function metaInfo() {\n    if (!this.show || !this.show.title) {\n      return {\n        title: 'Medusa'\n      };\n    }\n\n    var title = this.show.title;\n    return {\n      title: title,\n      titleTemplate: '%s | Medusa'\n    };\n  },\n  computed: _objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapState\"])({\n    shows: function shows(state) {\n      return state.shows.shows;\n    },\n    indexerConfig: function indexerConfig(state) {\n      return state.config.indexers.config.indexers;\n    }\n  }), Object(vuex__WEBPACK_IMPORTED_MODULE_0__[\"mapGetters\"])(['getShowById']), {\n    indexer: function indexer() {\n      return this.$route.query.indexername;\n    },\n    id: function id() {\n      return this.$route.query.seriesid;\n    },\n    season: function season() {\n      return this.$route.query.season;\n    },\n    episode: function episode() {\n      return this.$route.query.episode;\n    },\n    show: function show() {\n      var indexer = this.indexer,\n          id = this.id,\n          getShowById = this.getShowById,\n          shows = this.shows,\n          $store = this.$store;\n      var defaults = $store.state.defaults;\n\n      if (shows.length === 0 || !indexer || !id) {\n        return defaults.show;\n      }\n\n      var show = getShowById({\n        indexer: indexer,\n        id: id\n      });\n\n      if (!show) {\n        return defaults.show;\n      }\n\n      return show;\n    },\n    showIndexerUrl: function showIndexerUrl() {\n      var show = this.show,\n          indexerConfig = this.indexerConfig;\n\n      if (!show.indexer || !indexerConfig) {\n        return undefined;\n      }\n\n      var id = show.id[show.indexer];\n      var indexerUrl = indexerConfig[show.indexer].showUrl;\n      return \"\".concat(indexerUrl).concat(id);\n    }\n  }),\n  created: function created() {\n    var indexer = this.indexer,\n        id = this.id,\n        $store = this.$store; // Needed for the title\n\n    $store.dispatch('getShow', {\n      indexer: indexer,\n      id: id\n    });\n  },\n  methods: {\n    reflowLayout: function reflowLayout() {\n      var _this = this;\n\n      this.$nextTick(function () {\n        _this.moveSummaryBackground();\n\n        attachImdbTooltip(); // eslint-disable-line no-undef\n      });\n    },\n\n    /**\n     * Adjust the summary background position and size on page load and resize\n     */\n    moveSummaryBackground: function moveSummaryBackground() {\n      var height = $('#summary').height() + 10;\n      var top = $('#summary').offset().top + 5;\n      $('#summaryBackground').height(height);\n      $('#summaryBackground').offset({\n        top: top,\n        left: 0\n      });\n      $('#summaryBackground').show();\n    },\n    reverse: function reverse(array) {\n      return array ? array.slice().reverse() : [];\n    },\n    dedupeGenres: function dedupeGenres(genres) {\n      return genres ? _toConsumableArray(new Set(genres.slice(0).map(function (genre) {\n        return genre.replace('-', ' ');\n      }))) : [];\n    }\n  },\n  mounted: function mounted() {\n    var _this2 = this;\n\n    this.$watch('show', function () {\n      _this2.$nextTick(function () {\n        return _this2.reflowLayout();\n      });\n    });\n    ['load', 'resize'].map(function (event) {\n      return window.addEventListener(event, function () {\n        _this2.reflowLayout();\n      });\n    });\n\n    var updateSpinner = function updateSpinner(message, showSpinner) {\n      // Get spinner object as needed\n      var spinner = $('#searchNotification');\n\n      if (showSpinner) {\n        message = '<img id=\"searchingAnim\" src=\"images/loading32' + MEDUSA.config.themeSpinner + '.gif\" height=\"16\" width=\"16\" />&nbsp;' + message;\n      }\n\n      $(spinner).empty().append(message);\n    }; // Check the previous status of the history table, for hidden or shown, through the data attribute\n    // data-history-toggle-hidden\n\n\n    function toggleHistoryTable() {\n      // eslint-disable-line no-unused-vars\n      // Get previous state which was saved on the wrapper\n      var showOrHide = $('#wrapper').attr('data-history-toggle');\n      $('#historydata').collapse(showOrHide);\n    }\n\n    $.fn.loadContainer = function (path, loadingTxt, errorTxt, callback) {\n      updateSpinner(loadingTxt);\n      $('#manualSearchMeta').load(path + ' #manualSearchMeta meta');\n      $(this).load(path + ' #manualSearchTbody tr', function (response, status) {\n        if (status === 'error') {\n          updateSpinner(errorTxt, false);\n        }\n\n        if (typeof callback !== 'undefined') {\n          callback();\n        }\n      });\n    }; // Click event for the download button for snatching a result\n\n\n    $(document.body).on('click', '.epManualSearch', function (event) {\n      event.preventDefault();\n      var link = event.currentTarget;\n      $(link).children('img').prop('src', 'images/loading16.gif');\n      $.getJSON(event.currentTarget.href, function (data) {\n        if (data.result === 'success') {\n          $(link).children('img').prop('src', 'images/save.png');\n        } else {\n          $(link).children('img').prop('src', 'images/no16.png');\n        }\n      });\n    });\n\n    function initTableSorter(table) {\n      // Nasty hack to re-initialize tablesorter after refresh\n      $(table).tablesorter({\n        widgets: ['saveSort', 'stickyHeaders', 'columnSelector', 'filter'],\n        widgetOptions: {\n          filter_columnFilters: true,\n          // eslint-disable-line camelcase\n          filter_hideFilters: true,\n          // eslint-disable-line camelcase\n          filter_saveFilters: true,\n          // eslint-disable-line camelcase\n          columnSelector_saveColumns: true,\n          // eslint-disable-line camelcase\n          columnSelector_layout: '<label><input type=\"checkbox\">{name}</label>',\n          // eslint-disable-line camelcase\n          columnSelector_mediaquery: false,\n          // eslint-disable-line camelcase\n          columnSelector_cssChecked: 'checked' // eslint-disable-line camelcase\n\n        },\n        textExtraction: function () {\n          return {\n            // 2: Provider\n            2: function _(node) {\n              return $(node).find('img').attr('title');\n            },\n            // 6: The size column needs an explicit field for the filtering on raw size.\n            6: function _(node) {\n              return node.getAttribute('data-size');\n            },\n            // 9: Published date\n            9: function _(node) {\n              return node.getAttribute('data-datetime');\n            },\n            // 10: Added date\n            10: function _(node) {\n              return node.getAttribute('data-datetime');\n            }\n          };\n        }(),\n        headers: {\n          9: {\n            sorter: 'realISODate'\n          },\n          // Published\n          10: {\n            sorter: 'realISODate'\n          },\n          // Added\n          11: {\n            sorter: false,\n            parser: false // Snatch link\n\n          }\n        }\n      });\n    }\n\n    function checkCacheUpdates(repeat) {\n      var pollInterval = 5000;\n      repeat = repeat || true;\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var data = $('meta[data-last-prov-updates]').data('last-prov-updates');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      var urlParams = '?indexername=' + indexerName + '&seriesid=' + seriesId + '&season=' + season + '&episode=' + episode;\n\n      if (manualSearchType === 'season') {\n        urlParams += '&manual_search_type=' + manualSearchType;\n      }\n\n      if (!$.isNumeric(seriesId) || !$.isNumeric(season) || !$.isNumeric(episode)) {\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 200);\n      }\n\n      $.ajax({\n        url: 'home/manualSearchCheckCache' + urlParams,\n        type: 'GET',\n        data: data,\n        contentType: 'application/json',\n        error: function error() {\n          // Repeat = false;\n          console.log('Error occurred!!');\n          $('.manualSearchButton').removeAttr('disabled');\n        },\n        complete: function complete() {\n          if (repeat) {\n            setTimeout(checkCacheUpdates, pollInterval);\n          }\n        },\n        timeout: 15000 // Timeout after 15s\n\n      }).done(function (data) {\n        // @TODO: Combine the lower if statements\n        if (data === '') {\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n        }\n\n        if (data.result === 'refresh') {\n          window.location.reload();\n          updateSpinner('Refreshed results...', true);\n        }\n\n        if (data.result === 'searching') {\n          // Ep is searched, you will get a results any minute now\n          pollInterval = 5000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode is being searched, please wait......', true);\n        }\n\n        if (data.result === 'queued') {\n          // Ep is queued, this might take some time to get results\n          pollInterval = 7000;\n          $('.manualSearchButton').prop('disabled', true);\n          updateSpinner('The episode has been queued, because another search is taking place. please wait..', true);\n        }\n\n        if (data.result === 'finished') {\n          // Ep search is finished\n          updateSpinner('Search finished', false);\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = false;\n          $('#srchresults').trigger('update', true);\n          $('[datetime]').timeago();\n        }\n\n        if (data.result === 'error') {\n          // Ep search is finished but with an error\n          console.log('Probably tried to call manualSelectCheckCache, while page was being refreshed.');\n          $('.manualSearchButton').removeAttr('disabled');\n          repeat = true;\n        }\n      });\n    }\n\n    setTimeout(checkCacheUpdates, 2000); // Click event for the reload results and force search buttons\n\n    $(document.body).on('click', '.manualSearchButton', function (event) {\n      event.preventDefault();\n      $('.manualSearchButton').prop('disabled', true);\n      var indexerName = $('meta[data-last-prov-updates]').attr('data-indexer-name');\n      var seriesId = $('meta[data-last-prov-updates]').attr('data-series-id');\n      var season = $('meta[data-last-prov-updates]').attr('data-season');\n      var episode = $('meta[data-last-prov-updates]').attr('data-episode');\n      var manualSearchType = $('meta[data-last-prov-updates]').attr('data-manual-search-type');\n      var forceSearch = $(event.currentTarget).attr('data-force-search');\n      var checkParams = [indexerName, seriesId, season, episode].every(function (checkIsTrue) {\n        return checkIsTrue;\n      });\n\n      if (!checkParams) {\n        console.log('Something went wrong in getting the paramaters from dom.' + \" indexerName: \".concat(indexerName, \", seriesId: \").concat(seriesId, \", season: \").concat(season, \", episode: \").concat(episode));\n        return;\n      }\n\n      if ($.isNumeric(seriesId) && $.isNumeric(season) && $.isNumeric(episode)) {\n        updateSpinner('Started a forced manual search...', true);\n        $.getJSON('home/snatchSelection', {\n          indexername: indexerName,\n          seriesid: seriesId,\n          season: season,\n          episode: episode,\n          manual_search_type: manualSearchType,\n          // eslint-disable-line camelcase\n          perform_search: forceSearch // eslint-disable-line camelcase\n\n        }); // Force the search, but give the checkCacheUpdates the time to start up a search thread\n\n        setTimeout(function () {\n          checkCacheUpdates(true);\n        }, 2000);\n      }\n    }); // Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the\n    // \"Show History\" button to show or hide the snatch/download/failed history for a manual searched episode or pack.\n\n    $('#popover').popover({\n      placement: 'bottom',\n      html: true,\n      // Required if content has HTML\n      content: '<div id=\"popover-target\"></div>'\n    }).on('shown.bs.popover', function () {\n      // Bootstrap popover event triggered when the popover opens\n      $.tablesorter.columnSelector.attachTo($('#srchresults'), '#popover-target');\n    });\n    $('#btnReset').click(function () {\n      $('#showTable').trigger('saveSortReset') // Clear saved sort\n      .trigger('sortReset'); // Reset current table sort\n\n      return false;\n    });\n    initTableSorter('#srchresults');\n    this.reflowLayout();\n    $('body').on('hide.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Show History');\n      $('#wrapper').prop('data-history-toggle', 'hide');\n    });\n    $('body').on('show.bs.collapse', '.collapse.toggle', function () {\n      $('#showhistory').text('Hide History');\n      $('#wrapper').prop('data-history-toggle', 'show');\n    });\n    $(document.body).on('click', '.release-name-ellipses, .release-name-ellipses-toggled', function (event) {\n      var target = $(event.currentTarget);\n\n      if (target.hasClass('release-name-ellipses')) {\n        target.switchClass('release-name-ellipses', 'release-name-ellipses-toggled', 100);\n      } else {\n        target.switchClass('release-name-ellipses-toggled', 'release-name-ellipses', 100);\n      }\n    });\n  }\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\")))\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1080,7 +1080,7 @@ eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
+eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/display-show.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1234,7 +1234,7 @@ eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
+eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* placeholder */\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./src/components/snatch-selection.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1469,6 +1469,30 @@ eval("/*!\n * Determine if an object is a Buffer\n *\n * @author   Feross Aboukh
 
 /***/ }),
 
+/***/ "./node_modules/is-visible/module/index.js":
+/*!*************************************************!*\
+  !*** ./node_modules/is-visible/module/index.js ***!
+  \*************************************************/
+/*! exports provided: isVisible, isVisibleAll, isVisibleAny, default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isVisible\", function() { return isVisible; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isVisibleAll\", function() { return isVisibleAll; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isVisibleAny\", function() { return isVisibleAny; });\n/* harmony import */ var iselement__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! iselement */ \"./node_modules/iselement/module/index.js\");\n/* harmony import */ var style_properties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! style-properties */ \"./node_modules/style-properties/module/index.js\");\n\n // cross-browser way of getting element's style property\n\nfunction getStyle(element, property) {\n  if (window.getComputedStyle) {\n    return Object(style_properties__WEBPACK_IMPORTED_MODULE_1__[\"getStyleProperty\"])(element, property).original;\n  } else if (element.currentStyle) {\n    return element.currentStyle[property];\n  }\n\n  return null;\n}\n\nfunction isVisible(element) {\n  // don't bother with non-element inputs\n  if (!Object(iselement__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(element)) {\n    return false;\n  } // This should prevent problems with ShadowDOMPolyfill. It returns different\n  // object when asking directly via `document.body` (native element) and when\n  // asking via `document.querySelector()` (wrapped element). This would result\n  // in traversing too far in the `while` cycle below.\n\n\n  var body_element = document.querySelector('body');\n  var html_element = document.querySelector('html'); // elements that are not inserted into the body are never visible\n\n  if (!body_element || !body_element.contains(element)) {\n    return false;\n  } // invisible elements\n\n\n  if (getStyle(element, 'visibility') === 'hidden') {\n    return false;\n  } // test display property recursively for element and all its parents, until BODY\n\n\n  while (element && element !== body_element && element !== html_element) {\n    if (getStyle(element, 'display') === 'none') {\n      return false;\n    }\n\n    if (getStyle(element, 'opacity').toString() === '0') {\n      return false;\n    }\n\n    element = element.parentNode;\n  }\n\n  return true;\n}\nfunction isVisibleAll(list) {\n  for (var i = 0; i < list.length; i++) {\n    if (!isVisible(list[i])) {\n      return false;\n    }\n  }\n\n  return true;\n}\nfunction isVisibleAny(list) {\n  for (var i = 0; i < list.length; i++) {\n    if (isVisible(list[i])) {\n      return true;\n    }\n  }\n\n  return false;\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = (isVisible);\n\n//# sourceURL=webpack:///./node_modules/is-visible/module/index.js?");
+
+/***/ }),
+
+/***/ "./node_modules/iselement/module/index.js":
+/*!************************************************!*\
+  !*** ./node_modules/iselement/module/index.js ***!
+  \************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n  return typeof obj;\n} : function (obj) {\n  return obj && typeof Symbol === \"function\" && obj.constructor === Symbol ? \"symbol\" : typeof obj;\n};\n/**\n * Returns `true` if provided input is Element.\n * @name isElement\n * @param {*} [input]\n * @returns {boolean}\n */\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (function (input) {\n  return input != null && (typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.nodeType === 1 && _typeof(input.style) === 'object' && _typeof(input.ownerDocument) === 'object';\n});\n\n//# sourceURL=webpack:///./node_modules/iselement/module/index.js?");
+
+/***/ }),
+
 /***/ "./node_modules/jquery/dist/jquery.js":
 /*!********************************************!*\
   !*** ./node_modules/jquery/dist/jquery.js ***!
@@ -1634,6 +1658,42 @@ eval("/* WEBPACK VAR INJECTION */(function(global, process) {(function (global,
 
 /***/ }),
 
+/***/ "./node_modules/style-properties/module/change-case.js":
+/*!*************************************************************!*\
+  !*** ./node_modules/style-properties/module/change-case.js ***!
+  \*************************************************************/
+/*! exports provided: toCamelCase, toKebabCase */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"toCamelCase\", function() { return toCamelCase; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"toKebabCase\", function() { return toKebabCase; });\nvar delimiters = [' ', '-', '_'];\nfunction toCamelCase() {\n  var input = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];\n  var characters = input.split('');\n  var result = [];\n  var character = void 0;\n\n  while (character = characters.shift()) {\n    if (delimiters.indexOf(character) !== -1) {\n      if (character = characters.shift()) {\n        character = character.toUpperCase();\n      }\n    }\n\n    result.push(character);\n  }\n\n  return result.join('');\n}\nfunction toKebabCase() {\n  var input = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];\n  var characters = input.split('');\n  var result = [];\n  characters.forEach(function (character) {\n    var lowercase_character = character.toLowerCase();\n\n    if (character !== lowercase_character) {\n      result.push('-', lowercase_character);\n    } else if (delimiters.indexOf(character) !== -1) {\n      result.push('-');\n    } else {\n      result.push(character);\n    }\n  });\n  return result.join('');\n}\n\n//# sourceURL=webpack:///./node_modules/style-properties/module/change-case.js?");
+
+/***/ }),
+
+/***/ "./node_modules/style-properties/module/index.js":
+/*!*******************************************************!*\
+  !*** ./node_modules/style-properties/module/index.js ***!
+  \*******************************************************/
+/*! exports provided: getStyleProperty, getStyleProperties */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getStyleProperty\", function() { return getStyleProperty; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getStyleProperties\", function() { return getStyleProperties; });\n/* harmony import */ var _change_case__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./change-case */ \"./node_modules/style-properties/module/change-case.js\");\n/* harmony import */ var _parse_property_value__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./parse-property-value */ \"./node_modules/style-properties/module/parse-property-value.js\");\n\n\n/**\n * @typedef {Object} StyleProperty\n * @property {string} unit - unit of the property, e.g. px, rgb\n * @property {string|number} value - value of the property\n * @property {string} output - valid string representation of value and unit\n *\n * @example <caption>Simple property.</caption>\n * {\n *   unit: 'px',\n *   value: 100,\n *   output: '100px'\n * }\n *\n * @example <caption>Color property.</caption>\n * {\n *   unit: 'rgb',\n *   value: [255, 255, 255],\n *   output: '#ffffff'\n * }\n */\n\n/**\n * Attempts to fix the element when using Webcomponents with ShadowDOMPolyfill. It returns either original element or wrapped element, depending on whether the polyfill replaced the original `getComputedStyle` method or not.\n * This is madness and no sane person should ever do hacks like this. ShadowDOMPolyfill sucks donkey balls!\n * @param {Object|HTMLElement} element\n * @returns {Object|HTMLElement}\n */\n\nfunction fixWebcomponentsElement(element) {\n  if (typeof window.ShadowDOMPolyfill !== 'undefined') {\n    var is_native = document.defaultView.getComputedStyle.toString().indexOf('[native code]') !== -1; // Can't check if element is instance of HTMLElement, because the polyfill\n    // hijacks this. Only reliable way of checking if it is wrapped I found\n    // is using this ugly ass property.\n\n    var is_wrapped = typeof element.__impl4cf1e782hg__ !== 'undefined';\n\n    if (is_native && is_wrapped) {\n      element = window.ShadowDOMPolyfill.unwrap(element);\n    }\n\n    if (!is_native && !is_wrapped) {\n      element = window.ShadowDOMPolyfill.wrap(element);\n    }\n  }\n\n  return element;\n}\n/**\n * Returns information about unit and value of given property for given element.\n * @param {HTMLElement} element\n * @param {string} property - Name of the property. You can use either camelCase (e.g. zIndex) or kebab-case (e.g. z-index).\n * @returns {StyleProperty}\n *\n * @example\n * var element_width = getStyleProperty(my_element, 'width');\n * // returns {unit: 'px', value: 100, output: '100px'}\n */\n\n\nfunction getStyleProperty(element, property) {\n  property = Object(_change_case__WEBPACK_IMPORTED_MODULE_0__[\"toKebabCase\"])(property);\n  element = fixWebcomponentsElement(element);\n  var value = document.defaultView.getComputedStyle(element, null).getPropertyValue(property);\n  return Object(_parse_property_value__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(value);\n}\n/**\n * Returns information about multiple properties of given element.\n * @param {HTMLElement} element\n * @param {Array|string} properties - List of properties. Single property (string) will be converted to an array.\n * @returns {Object} - Keys of the returned objects are property names, values are objects containing information about given property.\n *\n * @example\n * var element_size = getStyleProperties(my_element, ['width', 'height']);\n * // returns\n * // {\n * //   width: {unit: 'px', value: 100, output: '100px'},\n * //   height: {unit: 'px', value: 100, output: '100px'}\n * // }\n */\n\nfunction getStyleProperties(element) {\n  var properties = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];\n\n  if (typeof properties === 'string') {\n    properties = [properties];\n  }\n\n  var result = {};\n  properties.forEach(function (property) {\n    result[property] = getStyleProperty(element, property);\n  });\n  return result;\n}\n\n//# sourceURL=webpack:///./node_modules/style-properties/module/index.js?");
+
+/***/ }),
+
+/***/ "./node_modules/style-properties/module/parse-property-value.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/style-properties/module/parse-property-value.js ***!
+  \**********************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\nvar re_color = /^rgb\\((\\d+),\\s?(\\d+),\\s?(\\d+)\\)$/;\nvar re_prop = /^(-?\\d*\\.?\\d*)(.*)$/; // converts number in base 10 to base 16, adds padding zero if needed\n\nfunction convertColorComponent(input) {\n  var result = input.toString(16);\n\n  if (result.length < 2) {\n    result = '0' + result;\n  }\n\n  return result;\n}\n\nfunction parseColorProperty(value) {\n  var matches = value.match(re_color);\n  var result = {};\n  result.unit = 'rgb';\n  result.value = [parseInt(matches[1], 10), parseInt(matches[2], 10), parseInt(matches[3], 10)];\n  result.output = '#' + convertColorComponent(result.value[0]) + convertColorComponent(result.value[1]) + convertColorComponent(result.value[2]);\n  return result;\n}\n\nfunction parseRegularProperty(value) {\n  var result = {\n    unit: '',\n    value: null,\n    output: 'auto'\n  };\n\n  if (value !== 'auto') {\n    var matches = value.match(re_prop);\n    result.value = parseFloat(matches[1]);\n    result.unit = matches[2];\n    result.output = result.value + result.unit;\n  }\n\n  return result;\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (function (value) {\n  var result = re_color.test(value) ? parseColorProperty(value) : parseRegularProperty(value);\n  result.original = value;\n  return result;\n});\n\n//# sourceURL=webpack:///./node_modules/style-properties/module/parse-property-value.js?");
+
+/***/ }),
+
 /***/ "./node_modules/timers-browserify/main.js":
 /*!************************************************!*\
   !*** ./node_modules/timers-browserify/main.js ***!
@@ -1989,6 +2049,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/**\n  * vue-router v3.0.1\n
 
 /***/ }),
 
+/***/ "./node_modules/vue-scrollto/vue-scrollto.js":
+/*!***************************************************!*\
+  !*** ./node_modules/vue-scrollto/vue-scrollto.js ***!
+  \***************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("(function (global, factory) {\n   true ? module.exports = factory() : undefined;\n})(this, function () {\n  'use strict';\n  /**\n   * https://github.com/gre/bezier-easing\n   * BezierEasing - use bezier curve for transition easing function\n   * by Gaëtan Renaudeau 2014 - 2015 – MIT License\n   */\n  // These values are established by empiricism with tests (tradeoff: performance VS precision)\n\n  var NEWTON_ITERATIONS = 4;\n  var NEWTON_MIN_SLOPE = 0.001;\n  var SUBDIVISION_PRECISION = 0.0000001;\n  var SUBDIVISION_MAX_ITERATIONS = 10;\n  var kSplineTableSize = 11;\n  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);\n  var float32ArraySupported = typeof Float32Array === 'function';\n\n  function A(aA1, aA2) {\n    return 1.0 - 3.0 * aA2 + 3.0 * aA1;\n  }\n\n  function B(aA1, aA2) {\n    return 3.0 * aA2 - 6.0 * aA1;\n  }\n\n  function C(aA1) {\n    return 3.0 * aA1;\n  } // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\n\n\n  function calcBezier(aT, aA1, aA2) {\n    return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;\n  } // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.\n\n\n  function getSlope(aT, aA1, aA2) {\n    return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);\n  }\n\n  function binarySubdivide(aX, aA, aB, mX1, mX2) {\n    var currentX,\n        currentT,\n        i = 0;\n\n    do {\n      currentT = aA + (aB - aA) / 2.0;\n      currentX = calcBezier(currentT, mX1, mX2) - aX;\n\n      if (currentX > 0.0) {\n        aB = currentT;\n      } else {\n        aA = currentT;\n      }\n    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);\n\n    return currentT;\n  }\n\n  function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\n    for (var i = 0; i < NEWTON_ITERATIONS; ++i) {\n      var currentSlope = getSlope(aGuessT, mX1, mX2);\n\n      if (currentSlope === 0.0) {\n        return aGuessT;\n      }\n\n      var currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n      aGuessT -= currentX / currentSlope;\n    }\n\n    return aGuessT;\n  }\n\n  var src = function bezier(mX1, mY1, mX2, mY2) {\n    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {\n      throw new Error('bezier x values must be in [0, 1] range');\n    } // Precompute samples table\n\n\n    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);\n\n    if (mX1 !== mY1 || mX2 !== mY2) {\n      for (var i = 0; i < kSplineTableSize; ++i) {\n        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\n      }\n    }\n\n    function getTForX(aX) {\n      var intervalStart = 0.0;\n      var currentSample = 1;\n      var lastSample = kSplineTableSize - 1;\n\n      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\n        intervalStart += kSampleStepSize;\n      }\n\n      --currentSample; // Interpolate to provide an initial guess for t\n\n      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);\n      var guessForT = intervalStart + dist * kSampleStepSize;\n      var initialSlope = getSlope(guessForT, mX1, mX2);\n\n      if (initialSlope >= NEWTON_MIN_SLOPE) {\n        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\n      } else if (initialSlope === 0.0) {\n        return guessForT;\n      } else {\n        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\n      }\n    }\n\n    return function BezierEasing(x) {\n      if (mX1 === mY1 && mX2 === mY2) {\n        return x; // linear\n      } // Because JavaScript number are imprecise, we should guarantee the extremes are right.\n\n\n      if (x === 0) {\n        return 0;\n      }\n\n      if (x === 1) {\n        return 1;\n      }\n\n      return calcBezier(getTForX(x), mY1, mY2);\n    };\n  };\n\n  var easings = {\n    ease: [0.25, 0.1, 0.25, 1.0],\n    linear: [0.00, 0.0, 1.00, 1.0],\n    \"ease-in\": [0.42, 0.0, 1.00, 1.0],\n    \"ease-out\": [0.00, 0.0, 0.58, 1.0],\n    \"ease-in-out\": [0.42, 0.0, 0.58, 1.0]\n  }; // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection\n\n  var supportsPassive = false;\n\n  try {\n    var opts = Object.defineProperty({}, \"passive\", {\n      get: function get() {\n        supportsPassive = true;\n      }\n    });\n    window.addEventListener(\"test\", null, opts);\n  } catch (e) {}\n\n  var _ = {\n    $: function $(selector) {\n      if (typeof selector !== \"string\") {\n        return selector;\n      }\n\n      return document.querySelector(selector);\n    },\n    on: function on(element, events, handler) {\n      var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {\n        passive: false\n      };\n\n      if (!(events instanceof Array)) {\n        events = [events];\n      }\n\n      for (var i = 0; i < events.length; i++) {\n        element.addEventListener(events[i], handler, supportsPassive ? opts : false);\n      }\n    },\n    off: function off(element, events, handler) {\n      if (!(events instanceof Array)) {\n        events = [events];\n      }\n\n      for (var i = 0; i < events.length; i++) {\n        element.removeEventListener(events[i], handler);\n      }\n    },\n    cumulativeOffset: function cumulativeOffset(element) {\n      var top = 0;\n      var left = 0;\n\n      do {\n        top += element.offsetTop || 0;\n        left += element.offsetLeft || 0;\n        element = element.offsetParent;\n      } while (element);\n\n      return {\n        top: top,\n        left: left\n      };\n    }\n  };\n\n  var _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n    return typeof obj;\n  } : function (obj) {\n    return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n  };\n\n  var _extends = Object.assign || function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n\n    return target;\n  };\n\n  var abortEvents = [\"mousedown\", \"wheel\", \"DOMMouseScroll\", \"mousewheel\", \"keyup\", \"touchmove\"];\n  var defaults$$1 = {\n    container: \"body\",\n    duration: 500,\n    easing: \"ease\",\n    offset: 0,\n    cancelable: true,\n    onStart: false,\n    onDone: false,\n    onCancel: false,\n    x: false,\n    y: true\n  };\n\n  function setDefaults(options) {\n    defaults$$1 = _extends({}, defaults$$1, options);\n  }\n\n  var scroller = function scroller() {\n    var element = void 0; // element to scroll to\n\n    var container = void 0; // container to scroll\n\n    var duration = void 0; // duration of the scrolling\n\n    var easing = void 0; // easing to be used when scrolling\n\n    var offset = void 0; // offset to be added (subtracted)\n\n    var cancelable = void 0; // indicates if user can cancel the scroll or not.\n\n    var onStart = void 0; // callback when scrolling is started\n\n    var onDone = void 0; // callback when scrolling is done\n\n    var onCancel = void 0; // callback when scrolling is canceled / aborted\n\n    var x = void 0; // scroll on x axis\n\n    var y = void 0; // scroll on y axis\n\n    var initialX = void 0; // initial X of container\n\n    var targetX = void 0; // target X of container\n\n    var initialY = void 0; // initial Y of container\n\n    var targetY = void 0; // target Y of container\n\n    var diffX = void 0; // difference\n\n    var diffY = void 0; // difference\n\n    var abort = void 0; // is scrolling aborted\n\n    var abortEv = void 0; // event that aborted scrolling\n\n    var abortFn = function abortFn(e) {\n      if (!cancelable) return;\n      abortEv = e;\n      abort = true;\n    };\n\n    var easingFn = void 0;\n    var timeStart = void 0; // time when scrolling started\n\n    var timeElapsed = void 0; // time elapsed since scrolling started\n\n    var progress = void 0; // progress\n\n    function scrollTop(container) {\n      var scrollTop = container.scrollTop;\n\n      if (container.tagName.toLowerCase() === \"body\") {\n        // in firefox body.scrollTop always returns 0\n        // thus if we are trying to get scrollTop on a body tag\n        // we need to get it from the documentElement\n        scrollTop = scrollTop || document.documentElement.scrollTop;\n      }\n\n      return scrollTop;\n    }\n\n    function scrollLeft(container) {\n      var scrollLeft = container.scrollLeft;\n\n      if (container.tagName.toLowerCase() === \"body\") {\n        // in firefox body.scrollLeft always returns 0\n        // thus if we are trying to get scrollLeft on a body tag\n        // we need to get it from the documentElement\n        scrollLeft = scrollLeft || document.documentElement.scrollLeft;\n      }\n\n      return scrollLeft;\n    }\n\n    function step(timestamp) {\n      if (abort) return done();\n      if (!timeStart) timeStart = timestamp;\n      timeElapsed = timestamp - timeStart;\n      progress = Math.min(timeElapsed / duration, 1);\n      progress = easingFn(progress);\n      topLeft(container, initialY + diffY * progress, initialX + diffX * progress);\n      timeElapsed < duration ? window.requestAnimationFrame(step) : done();\n    }\n\n    function done() {\n      if (!abort) topLeft(container, targetY, targetX);\n      timeStart = false;\n\n      _.off(container, abortEvents, abortFn);\n\n      if (abort && onCancel) onCancel(abortEv, element);\n      if (!abort && onDone) onDone(element);\n    }\n\n    function topLeft(element, top, left) {\n      if (y) element.scrollTop = top;\n      if (x) element.scrollLeft = left;\n\n      if (element.tagName.toLowerCase() === \"body\") {\n        // in firefox body.scrollTop doesn't scroll the page\n        // thus if we are trying to scrollTop on a body tag\n        // we need to scroll on the documentElement\n        if (y) document.documentElement.scrollTop = top;\n        if (x) document.documentElement.scrollLeft = left;\n      }\n    }\n\n    function scrollTo(target, _duration) {\n      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n      if ((typeof _duration === \"undefined\" ? \"undefined\" : _typeof(_duration)) === \"object\") {\n        options = _duration;\n      } else if (typeof _duration === \"number\") {\n        options.duration = _duration;\n      }\n\n      element = _.$(target);\n\n      if (!element) {\n        return console.warn(\"[vue-scrollto warn]: Trying to scroll to an element that is not on the page: \" + target);\n      }\n\n      container = _.$(options.container || defaults$$1.container);\n      duration = options.duration || defaults$$1.duration;\n      easing = options.easing || defaults$$1.easing;\n      offset = options.offset || defaults$$1.offset;\n      cancelable = options.hasOwnProperty(\"cancelable\") ? options.cancelable !== false : defaults$$1.cancelable;\n      onStart = options.onStart || defaults$$1.onStart;\n      onDone = options.onDone || defaults$$1.onDone;\n      onCancel = options.onCancel || defaults$$1.onCancel;\n      x = options.x === undefined ? defaults$$1.x : options.x;\n      y = options.y === undefined ? defaults$$1.y : options.y;\n\n      var cumulativeOffsetContainer = _.cumulativeOffset(container);\n\n      var cumulativeOffsetElement = _.cumulativeOffset(element);\n\n      if (typeof offset === \"function\") {\n        offset = offset();\n      }\n\n      initialY = scrollTop(container);\n      targetY = cumulativeOffsetElement.top - cumulativeOffsetContainer.top + offset;\n      initialX = scrollLeft(container);\n      targetX = cumulativeOffsetElement.left - cumulativeOffsetContainer.left + offset;\n      abort = false;\n      diffY = targetY - initialY;\n      diffX = targetX - initialX;\n\n      if (typeof easing === \"string\") {\n        easing = easings[easing] || easings[\"ease\"];\n      }\n\n      easingFn = src.apply(src, easing);\n      if (!diffY && !diffX) return;\n      if (onStart) onStart(element);\n\n      _.on(container, abortEvents, abortFn, {\n        passive: true\n      });\n\n      window.requestAnimationFrame(step);\n      return function () {\n        abortEv = null;\n        abort = true;\n      };\n    }\n\n    return scrollTo;\n  };\n\n  var _scroller = scroller();\n\n  var bindings = []; // store binding data\n\n  function deleteBinding(el) {\n    for (var i = 0; i < bindings.length; ++i) {\n      if (bindings[i].el === el) {\n        bindings.splice(i, 1);\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  function findBinding(el) {\n    for (var i = 0; i < bindings.length; ++i) {\n      if (bindings[i].el === el) {\n        return bindings[i];\n      }\n    }\n  }\n\n  function getBinding(el) {\n    var binding = findBinding(el);\n\n    if (binding) {\n      return binding;\n    }\n\n    bindings.push(binding = {\n      el: el,\n      binding: {}\n    });\n    return binding;\n  }\n\n  function handleClick(e) {\n    e.preventDefault();\n    var ctx = getBinding(this).binding;\n\n    if (typeof ctx.value === \"string\") {\n      return _scroller(ctx.value);\n    }\n\n    _scroller(ctx.value.el || ctx.value.element, ctx.value);\n  }\n\n  var VueScrollTo$1 = {\n    bind: function bind(el, binding) {\n      getBinding(el).binding = binding;\n\n      _.on(el, \"click\", handleClick);\n    },\n    unbind: function unbind(el) {\n      deleteBinding(el);\n\n      _.off(el, \"click\", handleClick);\n    },\n    update: function update(el, binding) {\n      getBinding(el).binding = binding;\n    },\n    scrollTo: _scroller,\n    bindings: bindings\n  };\n\n  var install = function install(Vue, options) {\n    if (options) setDefaults(options);\n    Vue.directive(\"scroll-to\", VueScrollTo$1);\n    Vue.prototype.$scrollTo = VueScrollTo$1.scrollTo;\n  };\n\n  if (typeof window !== \"undefined\" && window.Vue) {\n    window.VueScrollTo = VueScrollTo$1;\n    window.VueScrollTo.setDefaults = setDefaults;\n    Vue.use(install);\n  }\n\n  VueScrollTo$1.install = install;\n  return VueScrollTo$1;\n});\n\n//# sourceURL=webpack:///./node_modules/vue-scrollto/vue-scrollto.js?");
+
+/***/ }),
+
 /***/ "./node_modules/vue-snotify/vue-snotify.esm.js":
 /*!*****************************************************!*\
   !*** ./node_modules/vue-snotify/vue-snotify.esm.js ***!
@@ -2388,7 +2459,7 @@ eval("var g; // This works in non-strict mode\n\ng = function () {\n  return thi
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"webRoot\", function() { return webRoot; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiKey\", function() { return apiKey; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiRoute\", function() { return apiRoute; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiv1\", function() { return apiv1; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"api\", function() { return api; });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__);\n\nvar webRoot = document.body.getAttribute('web-root');\nvar apiKey = document.body.getAttribute('api-key');\n/**\n * Api client based on the axios client, to communicate with medusa's web routes, which return json data.\n */\n\nvar apiRoute = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/',\n  timeout: 10000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v1.\n */\n\nvar apiv1 = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v1/' + apiKey + '/',\n  timeout: 10000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v2.\n */\n\nvar api = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v2/',\n  timeout: 10000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json',\n    'X-Api-Key': apiKey\n  }\n});\n\n\n//# sourceURL=webpack:///./src/api.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"webRoot\", function() { return webRoot; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiKey\", function() { return apiKey; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiRoute\", function() { return apiRoute; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"apiv1\", function() { return apiv1; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"api\", function() { return api; });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__);\n\nvar webRoot = document.body.getAttribute('web-root');\nvar apiKey = document.body.getAttribute('api-key');\n/**\n * Api client based on the axios client, to communicate with medusa's web routes, which return json data.\n */\n\nvar apiRoute = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/',\n  timeout: 30000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v1.\n */\n\nvar apiv1 = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v1/' + apiKey + '/',\n  timeout: 30000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json'\n  }\n});\n/**\n * Api client based on the axios client, to communicate with medusa's api v2.\n */\n\nvar api = axios__WEBPACK_IMPORTED_MODULE_0___default.a.create({\n  // eslint-disable-line no-unused-vars\n  baseURL: webRoot + '/api/v2/',\n  timeout: 30000,\n  headers: {\n    Accept: 'application/json',\n    'Content-Type': 'application/json',\n    'X-Api-Key': apiKey\n  }\n});\n\n\n//# sourceURL=webpack:///./src/api.js?");
 
 /***/ }),
 
@@ -3767,7 +3838,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mut
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\nvar state = {\n  show: {\n    airs: null,\n    akas: null,\n    cache: null,\n    classification: null,\n    config: {\n      airByDate: null,\n      aliases: null,\n      anime: null,\n      defaultEpisodeStatus: null,\n      dvdOrder: null,\n      location: null,\n      paused: null,\n      qualities: null,\n      release: null,\n      scene: null,\n      seasonFolders: null,\n      sports: null,\n      subtitlesEnabled: null\n    },\n    countries: null,\n    country_codes: null,\n    // eslint-disable-line camelcase\n    genres: null,\n    id: {\n      tvdb: null,\n      slug: null\n    },\n    indexer: null,\n    language: null,\n    network: null,\n    nextAirDate: null,\n    plot: null,\n    rating: {\n      imdb: {\n        rating: null,\n        votes: null\n      }\n    },\n    runtime: null,\n    showType: null,\n    status: null,\n    title: null,\n    type: null,\n    year: null\n  }\n};\nvar mutations = {};\nvar getters = {};\nvar actions = {};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  state: state,\n  mutations: mutations,\n  getters: getters,\n  actions: actions\n});\n\n//# sourceURL=webpack:///./src/store/modules/defaults.js?");
+eval("__webpack_require__.r(__webpack_exports__);\nvar state = {\n  show: {\n    airs: null,\n    akas: null,\n    cache: null,\n    classification: null,\n    config: {\n      airByDate: null,\n      aliases: null,\n      anime: null,\n      defaultEpisodeStatus: null,\n      dvdOrder: null,\n      location: null,\n      paused: null,\n      qualities: null,\n      release: null,\n      scene: null,\n      seasonFolders: null,\n      sports: null,\n      subtitlesEnabled: null\n    },\n    countries: null,\n    country_codes: null,\n    // eslint-disable-line camelcase\n    genres: null,\n    id: {\n      tvdb: null,\n      slug: null\n    },\n    indexer: null,\n    language: null,\n    network: null,\n    nextAirDate: null,\n    plot: null,\n    rating: {\n      imdb: {\n        rating: null,\n        votes: null\n      }\n    },\n    runtime: null,\n    showType: null,\n    status: null,\n    title: null,\n    type: null,\n    year: {}\n  }\n};\nvar mutations = {};\nvar getters = {};\nvar actions = {};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  state: state,\n  mutations: mutations,\n  getters: getters,\n  actions: actions\n});\n\n//# sourceURL=webpack:///./src/store/modules/defaults.js?");
 
 /***/ }),
 
diff --git a/themes/light/templates/partials/seasonEpisode.mako b/themes/light/templates/partials/seasonEpisode.mako
deleted file mode 100644
index f46a2fe5a0..0000000000
--- a/themes/light/templates/partials/seasonEpisode.mako
+++ /dev/null
@@ -1,6 +0,0 @@
-Manual search for:<br>
-    <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.series_id}" class="snatchTitle">${show.name}</app-link> / Season ${season}
-        % if manual_search_type != 'season':
-            Episode ${episode}
-        % endif
-    </app-link>
diff --git a/themes/light/templates/partials/showheader.mako b/themes/light/templates/partials/showheader.mako
index 24d5fd2216..8083828b34 100644
--- a/themes/light/templates/partials/showheader.mako
+++ b/themes/light/templates/partials/showheader.mako
@@ -10,64 +10,52 @@
 <%namespace file="/inc_defs.mako" import="renderQualityPill"/>
 
 <div class="row">
-    <div id="showtitle" class="col-lg-12" data-showname="${show.name | h}">
+    ## @TODO: Remove data attributes
+    ## @SEE: https://github.com/pymedusa/Medusa/pull/5087#discussion_r214074436
+    <div id="showtitle" class="col-lg-12" :data-showname="show.title">
         <div>
-            <h1 class="title" data-indexer-name="${show.indexer_name}" data-series-id="${show.indexerid}" id="scene_exception_${show.indexerid}">
-                <app-link href="home/displayShow?indexername=${show.indexer_name}&seriesid=${show.indexerid}" class="snatchTitle">${show.name | h}</app-link>
+            ## @TODO: Remove data attributes
+            ## @SEE: https://github.com/pymedusa/Medusa/pull/5087#discussion_r214077142
+            <h1 class="title" :data-indexer-name="show.indexer" :data-series-id="show.id[show.indexer]" :id="'scene_exception_' + show.id[show.indexer]">
+                <app-link :href="'home/displayShow?indexername=' + show.indexer + '&seriesid=' + show.id[show.indexer]" class="snatchTitle">{{ show.title }}</app-link>
             </h1>
         </div>
 
-    % if action == 'snatchSelection':
-        <div id="show-specials-and-seasons" class="pull-right">
+        <div v-if="$route.name === 'snatchSelection'" id="show-specials-and-seasons" class="pull-right">
             <span class="h2footer display-specials">
-                <%include file="/partials/seasonEpisode.mako"/>
+                Manual search for:<br>
+                <app-link
+                    :href="'home/displayShow?indexername=' + show.indexer + '&seriesid=' + show.id[show.indexer]"
+                    class="snatchTitle"
+                    >{{ show.title }}</app-link> / Season {{ season }}<template v-if="episode && !$route.query.manual_search_type"> Episode {{ episode }}</template>
             </span>
         </div>
-    % else:
-        % if season_results:
-            ##There is a special/season_0?##
-            % if int(season_results[-1]["season"]) == 0:
-                <% season_special = 1 %>
-            % else:
-                <% season_special = 0 %>
-            % endif
-            % if not app.DISPLAY_SHOW_SPECIALS and season_special:
-                <% lastSeason = season_results.pop(-1) %>
-            % endif
-            <div id="show-specials-and-seasons" class="pull-right">
-                <span class="h2footer display-specials">
-                % if season_special:
-                    Display Specials: <a class="inner" style="cursor: pointer;">${'Hide' if app.DISPLAY_SHOW_SPECIALS else 'Show'}</a>
-                % endif
-                </span>
+        <div v-if="$route.name !== 'snatchSelection' && show.seasons && show.seasons.length >= 1" id="show-specials-and-seasons" class="pull-right">
+            <span class="h2footer display-specials" v-if="show.seasons.find(season => ({ season }) => season === 0)">
+                Display Specials: <a @click="toggleSpecials()" class="inner" style="cursor: pointer;">{{ config.layout.show.specials ? 'Hide' : 'Show' }}</a>
+            </span>
 
-                <div class="h2footer display-seasons clear">
-                    <span>
-                    % if (len(season_results) > 14):
-                        <select id="seasonJump" class="form-control input-sm" style="position: relative">
-                            <option value="jump">Jump to Season</option>
-                        % for seasonNum in season_results:
-                            <option value="#season-${seasonNum["season"]}" data-season="${seasonNum["season"]}">${'Season ' + str(seasonNum["season"]) if int(seasonNum["season"]) > 0 else 'Specials'}</option>
-                        % endfor
-                        </select>
-                    % else:
+            <div class="h2footer display-seasons clear">
+                <span>
+                    <select v-if="show.seasons.length >= 15" v-model="jumpToSeason" id="seasonJump" class="form-control input-sm" style="position: relative">
+                        <option value="jump">Jump to Season</option>
+                        <option v-for="season in show.seasons" :value="'#season-' + season[0].season" :data-season="season[0].season">
+                        <%text>
+                            {{ season[0].season === 0 ? 'Specials' : `Season ${season[0].season}` }}
+                        </%text>
+                        </option>
+                    </select>
+                    <template v-else-if="show.seasons.length >= 1">
                         Season:
-                        % for seasonNum in season_results:
-                            % if int(seasonNum["season"]) == 0:
-                                <app-link href="#season-${seasonNum["season"]}">Specials</app-link>
-                            % else:
-                                <app-link href="#season-${seasonNum["season"]}">${str(seasonNum["season"])}</app-link>
-                            % endif
-                            % if seasonNum != season_results[-1]:
-                                <span class="separator">|</span>
-                            % endif
-                        % endfor
-                    % endif
-                    </span>
-                </div>
+                        <template v-for="(season, $index) in reverse(show.seasons)">
+                            <app-link :href="'#season-' + season[0].season">{{ season[0].season === 0 ? 'Specials' : season[0].season }}</app-link>
+                            <slot> </slot>
+                            <span v-if="$index !== (show.seasons.length - 1)" class="separator">| </span>
+                        </template>
+                    </template>
+                </span>
             </div>
-            % endif
-        % endif
+        </div>
     </div> <!-- end show title -->
 </div> <!-- end row showtitle-->
 
@@ -84,7 +72,7 @@
         <div class="show-poster-container">
             <div class="row">
                 <div class="image-flex-container col-md-12">
-                    <asset default="images/poster.png" show-slug="${show.slug}" type="posterThumb" cls="show-image shadow" :link="true"></asset>
+                    <asset default="images/poster.png" :show-slug="show.id.slug" type="posterThumb" cls="show-image shadow" :link="true"></asset>
                 </div>
             </div>
         </div>
@@ -94,55 +82,50 @@
         <div class="show-info-container">
             <div class="row">
                 <div class="pull-right col-lg-3 col-md-3 hidden-sm hidden-xs">
-                    <asset default="images/banner.png" show-slug="${show.slug}" type="banner" cls="show-banner pull-right shadow" :link="true"></asset>
+                    <asset default="images/banner.png" :show-slug="show.id.slug" type="banner" cls="show-banner pull-right shadow" :link="true"></asset>
                 </div>
                 <div id="show-rating" class="pull-left col-lg-9 col-md-9 col-sm-12 col-xs-12">
-                 % if 'rating' in show.imdb_info:
-                     <% rating_tip = str(show.imdb_info['rating']) + " / 10" + " Stars" + "<br>" + str(show.imdb_info['votes']) + " Votes" %>
-                     <span class="imdbstars" qtip-content="${rating_tip}">${show.imdb_info['rating']}</span>
-                 % endif
-                 % if not show.imdb_id:
-                     <span>(${show.start_year}) - ${show.runtime} minutes - </span>
-                 % else:
-                     % if 'country_codes' in show.imdb_info:
-                         % for country in show.imdb_info['country_codes'].split('|'):
-                                 <img src="images/blank.png" class="country-flag flag-${country}" width="16" height="11" style="margin-left: 3px; vertical-align:middle;" />
-                         % endfor
-                     % endif
-                                 <span>
-                     % if show.imdb_info.get('year'):
-                                     (${show.imdb_info['year']}) -
-                     % endif
-                                     ${show.imdb_info.get('runtimes') or show.runtime} minutes
-                                 </span>
-                                 <app-link href="http://www.imdb.com/title/${show.imdb_id}" title="http://www.imdb.com/title/${show.imdb_id}">
-                                     <img alt="[imdb]" height="16" width="16" src="images/imdb.png" style="margin-top: -1px; vertical-align:middle;"/>
-                                 </app-link>
-                 % endif
-                % if show.externals.get('trakt_id'):
-                    <app-link href="https://trakt.tv/shows/${show.externals.get('trakt_id')}" title="https://trakt.tv/shows/${show.externals.get('trakt_id')}">
+                    <span v-if="show.rating.imdb && show.rating.imdb.rating"
+                        class="imdbstars"
+                        :qtip-content="show.rating.imdb.rating + ' / 10 Stars<br> ' + show.rating.imdb.votes + ' Votes'"
+                    >
+                        <span :style="{ width: (Number(show.rating.imdb.rating) * 12) + '%' }"></span>
+                    </span>
+                    <template v-if="!show.id.imdb">
+                        <span v-if="show.year.start">({{ show.year.start }}) - {{ show.runtime }} minutes - </span>
+                    </template>
+                    <template v-else>
+                        <img v-for="country in show.country_codes" src="images/blank.png" :class="['country-flag', 'flag-' + country]" width="16" height="11" style="margin-left: 3px; vertical-align:middle;" />
+                        <span>
+                        % if show.imdb_info.get('year'):
+                            (${show.imdb_info['year']}) -
+                        % endif
+                            ${show.imdb_info.get('runtimes') or show.runtime} minutes
+                        </span>
+                        <app-link :href="'https://www.imdb.com/title/' + show.id.imdb" :title="'https://www.imdb.com/title/' + show.id.imdb">
+                            <img alt="[imdb]" height="16" width="16" src="images/imdb.png" style="margin-top: -1px; vertical-align:middle;"/>
+                        </app-link>
+                    </template>
+                    <app-link v-if="show.id.trakt" :href="'https://trakt.tv/shows/' + show.id.trakt" :title="'https://trakt.tv/shows/' + show.id.trakt">
                         <img alt="[trakt]" height="16" width="16" src="images/trakt.png" />
                     </app-link>
-                % endif
-                 <app-link href="${indexerApi(show.indexer).config['show_url']}${show.indexerid}" title="${indexerApi(show.indexer).config["show_url"] + str(show.indexerid)}">
-                     <img alt="${indexerApi(show.indexer).name | h}" height="16" width="16" src="images/${indexerApi(show.indexer).config["icon"]}" style="margin-top: -1px; vertical-align:middle;"/>
-                 </app-link>
+                    <app-link v-if="showIndexerUrl" :href="showIndexerUrl" :title="showIndexerUrl">
+                        <img :alt="indexerConfig[show.indexer].name" height="16" width="16" :src="'images/' + indexerConfig[show.indexer].icon" style="margin-top: -1px; vertical-align:middle;"/>
+                    </app-link>
                  % if xem_numbering or xem_absolute_numbering:
                      <app-link href="http://thexem.de/search?q=${show.name | h}" title="http://thexem.de/search?q-${show.name | h}">
                          <img alt="[xem]" height="16" width="16" src="images/xem.png" style="margin-top: -1px; vertical-align:middle;"/>
                      </app-link>
                  % endif
-                     <app-link href="https://fanart.tv/series/${show.indexerid}" title="https://fanart.tv/series/${show.name | h}"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>
+                    <app-link :href="'https://fanart.tv/series/' + show.id[show.indexer]" :title="'https://fanart.tv/series/' + show.id[show.indexer]"><img alt="[fanart.tv]" height="16" width="16" src="images/fanart.tv.png" class="fanart"/></app-link>
                  </div>
                  <div id="tags" class="pull-left col-lg-9 col-md-9 col-sm-12 col-xs-12">
                      <ul class="tags">
-                         % if show.imdb_info.get('genres'):
+                         %if show.genre:
+                            <app-link v-for="genre in dedupeGenres(show.genres)" :key="genre.toString()" :href="'https://trakt.tv/shows/popular/?genres=' + genre.toLowerCase().replace(' ', '-')" :title="'View other popular ' + genre + ' shows on trakt.tv.'"><li>{{ genre }}</li></app-link>
+                         % elif show.imdb_info.get('genres'):
                              % for imdbgenre in show.imdb_info['genres'].replace('Sci-Fi', 'Science-Fiction').split('|'):
-                                 <app-link href="http://www.imdb.com/search/title?count=100&title_type=tv_series&genres=${imdbgenre.lower()}" title="View other popular ${imdbgenre} shows on IMDB."><li>${imdbgenre}</li></app-link>
-                             % endfor
-                         % elif show.genre:
-                             % for genre in show.genre.strip('|').split('|'):
-                                 <app-link href="http://trakt.tv/shows/popular/?genres=${genre.lower()}" title="View other popular ${genre} shows on trakt.tv."><li>${genre}</li></app-link>
+                                 <app-link href="https://www.imdb.com/search/title?count=100&title_type=tv_series&genres=${imdbgenre.lower()}" title="View other popular ${imdbgenre} shows on IMDB."><li>${imdbgenre}</li></app-link>
                              % endfor
                          % endif
                      </ul>
@@ -152,7 +135,7 @@
             <div class="row">
                 <!-- Show Summary -->
                 <div id="summary" class="col-md-12">
-                    <div id="show-summary" class="${'summaryFanArt' if app.FANART_BACKGROUND else ''} col-lg-9 col-md-8 col-sm-8 col-xs-12">
+                    <div id="show-summary" :class="[{ summaryFanArt: config.fanartBackground }, 'col-lg-9', 'col-md-8', 'col-sm-8', 'col-xs-12']">
                         <table class="summaryTable pull-left">
                             <tr v-if="show.plot">
                                 <td colspan="2" style="padding-bottom: 15px;">
@@ -173,15 +156,11 @@
                                 % endif
                             % endif
                                 </td></tr>
-                            % if show.network and show.airs:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.airs} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"} on ${show.network}</td></tr>
-                            % elif show.network:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.network}</td></tr>
-                            % elif show.airs:
-                                <tr><td class="showLegend">Originally Airs: </td><td>${show.airs} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"}</td></tr>
-                            % endif
-                                <tr><td class="showLegend">Show Status: </td><td>${show.status}</td></tr>
-                                <tr><td class="showLegend">Default EP Status: </td><td>${statusStrings[show.default_ep_status]}</td></tr>
+                                <tr v-if="show.network && show.airs"><td class="showLegend">Originally Airs: </td><td>{{ show.airs }} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"} on {{ show.network }}</td></tr>
+                                <tr v-else-if="show.network"><td class="showLegend">Originally Airs: </td><td>{{ show.network }}</td></tr>
+                                <tr v-else-if="show.airs"><td class="showLegend">Originally Airs: </td><td>{{ show.airs }} ${"" if network_timezones.test_timeformat(show.airs) else "<font color='#FF0000'><b>(invalid Timeformat)</b></font>"}</td></tr>
+                                <tr><td class="showLegend">Show Status: </td><td>{{ show.status }}</td></tr>
+                                <tr><td class="showLegend">Default EP Status: </td><td>{{ show.config.defaultEpisodeStatus }}</td></tr>
                             % if showLoc[1]:
                                 <tr><td class="showLegend">Location: </td><td>${showLoc[0]}</td></tr>
                             % else:
@@ -223,16 +202,14 @@
                         <table class="pull-xs-left pull-md-right pull-sm-right pull-lg-right">
                             <% info_flag = subtitles.code_from_code(show.lang) if show.lang else '' %>
                             <tr><td class="showLegend">Info Language:</td><td><img src="images/subtitles/flags/${info_flag}.png" width="16" height="11" alt="${show.lang}" title="${show.lang}" onError="this.onerror=null;this.src='images/flags/unknown.png';"/></td></tr>
-                            % if app.USE_SUBTITLES:
-                            <tr><td class="showLegend">Subtitles: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.subtitles)]}" alt="${("N", "Y")[bool(show.subtitles)]}" width="16" height="16" /></td></tr>
-                            % endif
-                            <tr><td class="showLegend">Season Folders: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" alt="${("N", "Y")[bool(show.season_folders or app.NAMING_FORCE_FOLDERS)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Paused: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.paused)]}" alt="${("N", "Y")[bool(show.paused)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Air-by-Date: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.air_by_date)]}" alt="${("N", "Y")[bool(show.air_by_date)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Sports: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.is_sports)]}" alt="${("N", "Y")[bool(show.is_sports)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Anime: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.is_anime)]}" alt="${("N", "Y")[bool(show.is_anime)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">DVD Order: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.dvd_order)]}" alt="${("N", "Y")[bool(show.dvd_order)]}" width="16" height="16" /></td></tr>
-                            <tr><td class="showLegend">Scene Numbering: </td><td><img src="images/${("no16.png", "yes16.png")[bool(show.scene)]}" alt="${("N", "Y")[bool(show.scene)]}" width="16" height="16" /></td></tr>
+                            <tr v-if="config.subtitles.enabled"><td class="showLegend">Subtitles: </td><td><img :src="'images/' + (show.config.subtitlesEnabled ? 'yes' : 'no') + '16.png'" :alt="show.config.subtitlesEnabled ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Season Folders: </td><td><img :src="'images/' + (show.config.seasonFolders || config.namingForceFolders ? 'yes' : 'no') + '16.png'" :alt="show.config.seasonFolders || config.namingForceFolders ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Paused: </td><td><img :src="'images/' + (show.config.paused ? 'yes' : 'no') + '16.png'" :alt="show.config.paused ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Air-by-Date: </td><td><img :src="'images/' + (show.config.airByDate ? 'yes' : 'no') + '16.png'" :alt="show.config.airByDate ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Sports: </td><td><img :src="'images/' + (show.config.sports ? 'yes' : 'no') + '16.png'" :alt="show.config.sports ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Anime: </td><td><img :src="'images/' + (show.config.anime ? 'yes' : 'no') + '16.png'" :alt="show.config.anime ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">DVD Order: </td><td><img :src="'images/' + (show.config.dvdOrder ? 'yes' : 'no') + '16.png'" :alt="show.config.dvdOrder ? 'Y' : 'N'" width="16" height="16" /></td></tr>
+                            <tr><td class="showLegend">Scene Numbering: </td><td><img :src="'images/' + (show.config.scene ? 'yes' : 'no') + '16.png'" :alt="show.config.scene ? 'Y' : 'N'" width="16" height="16" /></td></tr>
                         </table>
                      </div> <!-- end of show-status -->
                 </div> <!-- end of summary -->
@@ -243,8 +220,7 @@
 
 <div id="row-show-episodes-controls" class="row">
     <div id="col-show-episodes-controls" class="col-md-12">
-    % if (action == "displayShow"):
-        <div class="row key"> <!-- Checkbox filter controls -->
+        <div v-if="$route.name === 'displayShow'" class="row key"> <!-- Checkbox filter controls -->
             <div class="col-lg-12" id="checkboxControls">
                 <div id="key-padding" class="pull-left top-5">
                     <% total_snatched = ep_counts[Overview.SNATCHED] + ep_counts[Overview.SNATCHED_PROPER] + ep_counts[Overview.SNATCHED_BEST] %>
@@ -283,8 +259,6 @@
                 </div>
             </div> <!-- checkboxControls -->
         </div> <!-- end of row -->
-    % else:
-        <div></div>
-    % endif
+        <div v-else></div>
     </div> <!-- end of col -->
 </div> <!-- end of row -->