diff --git a/CHANGELOG.md b/CHANGELOG.md
index 263f7ad62d..115d5984e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Added delete method to EpisodeHandler (apiv2), for deleting a single episode ([#5685](https://github.com/pymedusa/Medusa/pull/5685))
 - Allowed Nyaa and Anidex to search for non-anime shows ([#5680](https://github.com/pymedusa/Medusa/pull/5680) & [#5681](https://github.com/pymedusa/Medusa/pull/5681))
 - Do not allow to enable the anime options, when using tmdb or tvmaze ([#5701](https://github.com/pymedusa/Medusa/pull/5701))
+- Vueified "config - search" page. Improved responsiveness of the notification page on smaller screens. ([#5553](https://github.com/pymedusa/Medusa/pull/5553))
 
 #### Fixes
 - Fixed test not working for Download Station ([#5561](https://github.com/pymedusa/Medusa/pull/5561))
diff --git a/dredd/api-description.yml b/dredd/api-description.yml
index 7c529aebf7..e411a939e0 100644
--- a/dredd/api-description.yml
+++ b/dredd/api-description.yml
@@ -1983,6 +1983,84 @@ definitions:
                 type: boolean
               notifyOnSubtitleDownload:
                 type: boolean
+      clients:
+        type: object
+        properties:
+          nzb:
+            type: object
+            properties:
+              enabled:
+                type: boolean
+              dir:
+                type: string
+              method:
+                type: string
+              nzbget:
+                type: object
+                properties:
+                  category:
+                    type: string
+                  categoryAnime:
+                    type: string
+                  categoryAnimeBacklog:
+                    type: string
+                  categoryBacklog:
+                    type: string
+                  host:
+                    type: string
+                  priority:
+                    type: integer
+                  useHttps:
+                    type: boolean
+                  username:
+                    type: string
+              sabnzbd:
+                type: object
+                properties:
+                  category:
+                    type: string
+                  categoryAnime:
+                    type: string
+                  categoryAnimeBacklog:
+                    type: string
+                  categoryBacklog:
+                    type: string
+                  forced:
+                    type: boolean
+                  host:
+                    type: string
+                  username:
+                    type: string
+          torrents:
+            type: object
+            properties:
+              username:
+                type: string
+              seedTime:
+                type: integer
+              rpcurl:
+                type: string
+              authType:
+                type: string
+              paused:
+                type: boolean
+              host:
+                type: string
+              path:
+                type: string
+              verifySSL:
+                type: boolean
+              highBandwidth:
+                type: boolean
+              enabled:
+                type: boolean
+              label:
+                type: string
+              labelAnime:
+                type: string
+              method:
+                type: string
+                enum: ["blackhole", "utorrent", "transmission", "deluge", "deluged", "downloadstation", "rtorrent", "qbittorrent", "mlnet"]
   Log:
     type: object
     properties:
diff --git a/medusa/server/api/v2/config.py b/medusa/server/api/v2/config.py
index c681753846..959f726bfa 100644
--- a/medusa/server/api/v2/config.py
+++ b/medusa/server/api/v2/config.py
@@ -72,43 +72,43 @@ class ConfigHandler(BaseRequestHandler):
     patches = {
         'anonRedirect': StringField(app, 'ANON_REDIRECT'),
         'emby.enabled': BooleanField(app, 'USE_EMBY'),
-        'torrents.authType': StringField(app, 'TORRENT_AUTH_TYPE'),
-        'torrents.dir': StringField(app, 'TORRENT_DIR'),
-        'torrents.enabled': BooleanField(app, 'USE_TORRENTS'),
-        'torrents.highBandwidth': StringField(app, 'TORRENT_HIGH_BANDWIDTH'),
-        'torrents.host': StringField(app, 'TORRENT_HOST'),
-        'torrents.label': StringField(app, 'TORRENT_LABEL'),
-        'torrents.labelAnime': StringField(app, 'TORRENT_LABEL_ANIME'),
-        'torrents.method': StringField(app, 'TORRENT_METHOD'),
-        'torrents.password': StringField(app, 'TORRENT_PASSWORD'),
-        'torrents.path': BooleanField(app, 'TORRENT_PATH'),
-        'torrents.paused': BooleanField(app, 'TORRENT_PAUSED'),
-        'torrents.rpcurl': StringField(app, 'TORRENT_RPCURL'),
-        'torrents.seedLocation': StringField(app, 'TORRENT_SEED_LOCATION'),
-        'torrents.seedTime': StringField(app, 'TORRENT_SEED_TIME'),
-        'torrents.username': StringField(app, 'TORRENT_USERNAME'),
-        'torrents.verifySSL': BooleanField(app, 'TORRENT_VERIFY_CERT'),
-        'nzb.enabled': BooleanField(app, 'USE_NZBS'),
-        'nzb.dir': StringField(app, 'NZB_DIR'),
-        'nzb.method': StringField(app, 'NZB_METHOD'),
-        'nzb.nzbget.category': StringField(app, 'NZBGET_CATEGORY'),
-        'nzb.nzbget.categoryAnime': StringField(app, 'NZBGET_CATEGORY_ANIME'),
-        'nzb.nzbget.categoryAnimeBacklog': StringField(app, 'NZBGET_CATEGORY_ANIME_BACKLOG'),
-        'nzb.nzbget.categoryBacklog': StringField(app, 'NZBGET_CATEGORY_BACKLOG'),
-        'nzb.nzbget.host': StringField(app, 'NZBGET_HOST'),
-        'nzb.nzbget.password': StringField(app, 'NZBGET_PASSWORD'),
-        'nzb.nzbget.priority': StringField(app, 'NZBGET_PRIORITY'),
-        'nzb.nzbget.useHttps': BooleanField(app, 'NZBGET_USE_HTTPS'),
-        'nzb.nzbget.username': StringField(app, 'NZBGET_USERNAME'),
-        'nzb.sabnzbd.apiKey': StringField(app, 'SAB_APIKEY'),
-        'nzb.sabnzbd.category': StringField(app, 'SAB_CATEGORY'),
-        'nzb.sabnzbd.categoryAnime': StringField(app, 'SAB_CATEGORY_ANIME'),
-        'nzb.sabnzbd.categoryAnimeBacklog': StringField(app, 'SAB_CATEGORY_ANIME_BACKLOG'),
-        'nzb.sabnzbd.categoryBacklog': StringField(app, 'SAB_CATEGORY_BACKLOG'),
-        'nzb.sabnzbd.forced': BooleanField(app, 'SAB_FORCED'),
-        'nzb.sabnzbd.host': StringField(app, 'SAB_HOST'),
-        'nzb.sabnzbd.password': StringField(app, 'SAB_PASSWORD'),
-        'nzb.sabnzbd.username': StringField(app, 'SAB_USERNAME'),
+        'clients.torrents.authType': StringField(app, 'TORRENT_AUTH_TYPE'),
+        'clients.torrents.dir': StringField(app, 'TORRENT_DIR'),
+        'clients.torrents.enabled': BooleanField(app, 'USE_TORRENTS'),
+        'clients.torrents.highBandwidth': BooleanField(app, 'TORRENT_HIGH_BANDWIDTH'),
+        'clients.torrents.host': StringField(app, 'TORRENT_HOST'),
+        'clients.torrents.label': StringField(app, 'TORRENT_LABEL'),
+        'clients.torrents.labelAnime': StringField(app, 'TORRENT_LABEL_ANIME'),
+        'clients.torrents.method': StringField(app, 'TORRENT_METHOD'),
+        'clients.torrents.password': StringField(app, 'TORRENT_PASSWORD'),
+        'clients.torrents.path': BooleanField(app, 'TORRENT_PATH'),
+        'clients.torrents.paused': BooleanField(app, 'TORRENT_PAUSED'),
+        'clients.torrents.rpcurl': StringField(app, 'TORRENT_RPCURL'),
+        'clients.torrents.seedLocation': StringField(app, 'TORRENT_SEED_LOCATION'),
+        'clients.torrents.seedTime': IntegerField(app, 'TORRENT_SEED_TIME'),
+        'clients.torrents.username': StringField(app, 'TORRENT_USERNAME'),
+        'clients.torrents.verifySSL': BooleanField(app, 'TORRENT_VERIFY_CERT'),
+        'clients.nzb.enabled': BooleanField(app, 'USE_NZBS'),
+        'clients.nzb.dir': StringField(app, 'NZB_DIR'),
+        'clients.nzb.method': StringField(app, 'NZB_METHOD'),
+        'clients.nzb.nzbget.category': StringField(app, 'NZBGET_CATEGORY'),
+        'clients.nzb.nzbget.categoryAnime': StringField(app, 'NZBGET_CATEGORY_ANIME'),
+        'clients.nzb.nzbget.categoryAnimeBacklog': StringField(app, 'NZBGET_CATEGORY_ANIME_BACKLOG'),
+        'clients.nzb.nzbget.categoryBacklog': StringField(app, 'NZBGET_CATEGORY_BACKLOG'),
+        'clients.nzb.nzbget.host': StringField(app, 'NZBGET_HOST'),
+        'clients.nzb.nzbget.password': StringField(app, 'NZBGET_PASSWORD'),
+        'clients.nzb.nzbget.priority': IntegerField(app, 'NZBGET_PRIORITY'),
+        'clients.nzb.nzbget.useHttps': BooleanField(app, 'NZBGET_USE_HTTPS'),
+        'clients.nzb.nzbget.username': StringField(app, 'NZBGET_USERNAME'),
+        'clients.nzb.sabnzbd.apiKey': StringField(app, 'SAB_APIKEY'),
+        'clients.nzb.sabnzbd.category': StringField(app, 'SAB_CATEGORY'),
+        'clients.nzb.sabnzbd.categoryAnime': StringField(app, 'SAB_CATEGORY_ANIME'),
+        'clients.nzb.sabnzbd.categoryAnimeBacklog': StringField(app, 'SAB_CATEGORY_ANIME_BACKLOG'),
+        'clients.nzb.sabnzbd.categoryBacklog': StringField(app, 'SAB_CATEGORY_BACKLOG'),
+        'clients.nzb.sabnzbd.forced': BooleanField(app, 'SAB_FORCED'),
+        'clients.nzb.sabnzbd.host': StringField(app, 'SAB_HOST'),
+        'clients.nzb.sabnzbd.password': StringField(app, 'SAB_PASSWORD'),
+        'clients.nzb.sabnzbd.username': StringField(app, 'SAB_USERNAME'),
         'selectedRootIndex': IntegerField(app, 'SELECTED_ROOT'),
         'layout.schedule': EnumField(app, 'COMING_EPS_LAYOUT', ('poster', 'banner', 'list', 'calendar'),
                                      default_value='banner', post_processor=layout_schedule_post_processor),
@@ -534,46 +534,6 @@ def data_main():
         section_data['failedDownloads']['enabled'] = bool(app.USE_FAILED_DOWNLOADS)
         section_data['failedDownloads']['deleteFailed'] = bool(app.DELETE_FAILED)
 
-        section_data['torrents'] = NonEmptyDict()
-        section_data['torrents']['authType'] = app.TORRENT_AUTH_TYPE
-        section_data['torrents']['dir'] = app.TORRENT_DIR
-        section_data['torrents']['enabled'] = bool(app.USE_TORRENTS)
-        section_data['torrents']['highBandwidth'] = app.TORRENT_HIGH_BANDWIDTH
-        section_data['torrents']['host'] = app.TORRENT_HOST
-        section_data['torrents']['label'] = app.TORRENT_LABEL
-        section_data['torrents']['labelAnime'] = app.TORRENT_LABEL_ANIME
-        section_data['torrents']['method'] = app.TORRENT_METHOD
-        section_data['torrents']['path'] = app.TORRENT_PATH
-        section_data['torrents']['paused'] = bool(app.TORRENT_PAUSED)
-        section_data['torrents']['rpcurl'] = app.TORRENT_RPCURL
-        section_data['torrents']['seedLocation'] = app.TORRENT_SEED_LOCATION
-        section_data['torrents']['seedTime'] = app.TORRENT_SEED_TIME
-        section_data['torrents']['username'] = app.TORRENT_USERNAME
-        section_data['torrents']['verifySSL'] = bool(app.TORRENT_VERIFY_CERT)
-
-        section_data['nzb'] = NonEmptyDict()
-        section_data['nzb']['enabled'] = bool(app.USE_NZBS)
-        section_data['nzb']['dir'] = app.NZB_DIR
-        section_data['nzb']['method'] = app.NZB_METHOD
-        section_data['nzb']['nzbget'] = NonEmptyDict()
-        section_data['nzb']['nzbget']['category'] = app.NZBGET_CATEGORY
-        section_data['nzb']['nzbget']['categoryAnime'] = app.NZBGET_CATEGORY_ANIME
-        section_data['nzb']['nzbget']['categoryAnimeBacklog'] = app.NZBGET_CATEGORY_ANIME_BACKLOG
-        section_data['nzb']['nzbget']['categoryBacklog'] = app.NZBGET_CATEGORY_BACKLOG
-        section_data['nzb']['nzbget']['host'] = app.NZBGET_HOST
-        section_data['nzb']['nzbget']['priority'] = app.NZBGET_PRIORITY
-        section_data['nzb']['nzbget']['useHttps'] = bool(app.NZBGET_USE_HTTPS)
-        section_data['nzb']['nzbget']['username'] = app.NZBGET_USERNAME
-
-        section_data['nzb']['sabnzbd'] = NonEmptyDict()
-        section_data['nzb']['sabnzbd']['category'] = app.SAB_CATEGORY
-        section_data['nzb']['sabnzbd']['categoryAnime'] = app.SAB_CATEGORY_ANIME
-        section_data['nzb']['sabnzbd']['categoryAnimeBacklog'] = app.SAB_CATEGORY_ANIME_BACKLOG
-        section_data['nzb']['sabnzbd']['categoryBacklog'] = app.SAB_CATEGORY_BACKLOG
-        section_data['nzb']['sabnzbd']['forced'] = bool(app.SAB_FORCED)
-        section_data['nzb']['sabnzbd']['host'] = app.SAB_HOST
-        section_data['nzb']['sabnzbd']['username'] = app.SAB_USERNAME
-
         section_data['layout'] = NonEmptyDict()
         section_data['layout']['schedule'] = app.COMING_EPS_LAYOUT
         section_data['layout']['history'] = app.HISTORY_LAYOUT
@@ -951,3 +911,50 @@ def data_notifiers():
         section_data['slack']['webhook'] = app.SLACK_WEBHOOK
 
         return section_data
+
+    @staticmethod
+    def data_clients():
+        """Notifications."""
+        section_data = NonEmptyDict()
+
+        section_data['torrents'] = NonEmptyDict()
+        section_data['torrents']['authType'] = app.TORRENT_AUTH_TYPE
+        section_data['torrents']['dir'] = app.TORRENT_DIR
+        section_data['torrents']['enabled'] = bool(app.USE_TORRENTS)
+        section_data['torrents']['highBandwidth'] = bool(app.TORRENT_HIGH_BANDWIDTH)
+        section_data['torrents']['host'] = app.TORRENT_HOST
+        section_data['torrents']['label'] = app.TORRENT_LABEL
+        section_data['torrents']['labelAnime'] = app.TORRENT_LABEL_ANIME
+        section_data['torrents']['method'] = app.TORRENT_METHOD
+        section_data['torrents']['path'] = app.TORRENT_PATH
+        section_data['torrents']['paused'] = bool(app.TORRENT_PAUSED)
+        section_data['torrents']['rpcurl'] = app.TORRENT_RPCURL
+        section_data['torrents']['seedLocation'] = app.TORRENT_SEED_LOCATION
+        section_data['torrents']['seedTime'] = app.TORRENT_SEED_TIME
+        section_data['torrents']['username'] = app.TORRENT_USERNAME
+        section_data['torrents']['verifySSL'] = bool(app.TORRENT_VERIFY_CERT)
+
+        section_data['nzb'] = NonEmptyDict()
+        section_data['nzb']['enabled'] = bool(app.USE_NZBS)
+        section_data['nzb']['dir'] = app.NZB_DIR
+        section_data['nzb']['method'] = app.NZB_METHOD
+        section_data['nzb']['nzbget'] = NonEmptyDict()
+        section_data['nzb']['nzbget']['category'] = app.NZBGET_CATEGORY
+        section_data['nzb']['nzbget']['categoryAnime'] = app.NZBGET_CATEGORY_ANIME
+        section_data['nzb']['nzbget']['categoryAnimeBacklog'] = app.NZBGET_CATEGORY_ANIME_BACKLOG
+        section_data['nzb']['nzbget']['categoryBacklog'] = app.NZBGET_CATEGORY_BACKLOG
+        section_data['nzb']['nzbget']['host'] = app.NZBGET_HOST
+        section_data['nzb']['nzbget']['priority'] = int(app.NZBGET_PRIORITY)
+        section_data['nzb']['nzbget']['useHttps'] = bool(app.NZBGET_USE_HTTPS)
+        section_data['nzb']['nzbget']['username'] = app.NZBGET_USERNAME
+
+        section_data['nzb']['sabnzbd'] = NonEmptyDict()
+        section_data['nzb']['sabnzbd']['category'] = app.SAB_CATEGORY
+        section_data['nzb']['sabnzbd']['categoryAnime'] = app.SAB_CATEGORY_ANIME
+        section_data['nzb']['sabnzbd']['categoryAnimeBacklog'] = app.SAB_CATEGORY_ANIME_BACKLOG
+        section_data['nzb']['sabnzbd']['categoryBacklog'] = app.SAB_CATEGORY_BACKLOG
+        section_data['nzb']['sabnzbd']['forced'] = bool(app.SAB_FORCED)
+        section_data['nzb']['sabnzbd']['host'] = app.SAB_HOST
+        section_data['nzb']['sabnzbd']['username'] = app.SAB_USERNAME
+
+        return section_data
diff --git a/tests/apiv2/test_config.py b/tests/apiv2/test_config.py
index ad1de31b67..58c661809b 100644
--- a/tests/apiv2/test_config.py
+++ b/tests/apiv2/test_config.py
@@ -103,46 +103,6 @@ def config_main(monkeypatch, app_config):
     config_data['failedDownloads']['enabled'] = bool(app.USE_FAILED_DOWNLOADS)
     config_data['failedDownloads']['deleteFailed'] = bool(app.DELETE_FAILED)
 
-    config_data['torrents'] = NonEmptyDict()
-    config_data['torrents']['authType'] = app.TORRENT_AUTH_TYPE
-    config_data['torrents']['dir'] = app.TORRENT_DIR
-    config_data['torrents']['enabled'] = bool(app.USE_TORRENTS)
-    config_data['torrents']['highBandwidth'] = app.TORRENT_HIGH_BANDWIDTH
-    config_data['torrents']['host'] = app.TORRENT_HOST
-    config_data['torrents']['label'] = app.TORRENT_LABEL
-    config_data['torrents']['labelAnime'] = app.TORRENT_LABEL_ANIME
-    config_data['torrents']['method'] = app.TORRENT_METHOD
-    config_data['torrents']['path'] = app.TORRENT_PATH
-    config_data['torrents']['paused'] = bool(app.TORRENT_PAUSED)
-    config_data['torrents']['rpcurl'] = app.TORRENT_RPCURL
-    config_data['torrents']['seedLocation'] = app.TORRENT_SEED_LOCATION
-    config_data['torrents']['seedTime'] = app.TORRENT_SEED_TIME
-    config_data['torrents']['username'] = app.TORRENT_USERNAME
-    config_data['torrents']['verifySSL'] = bool(app.TORRENT_VERIFY_CERT)
-
-    config_data['nzb'] = NonEmptyDict()
-    config_data['nzb']['enabled'] = bool(app.USE_NZBS)
-    config_data['nzb']['dir'] = app.NZB_DIR
-    config_data['nzb']['method'] = app.NZB_METHOD
-    config_data['nzb']['nzbget'] = NonEmptyDict()
-    config_data['nzb']['nzbget']['category'] = app.NZBGET_CATEGORY
-    config_data['nzb']['nzbget']['categoryAnime'] = app.NZBGET_CATEGORY_ANIME
-    config_data['nzb']['nzbget']['categoryAnimeBacklog'] = app.NZBGET_CATEGORY_ANIME_BACKLOG
-    config_data['nzb']['nzbget']['categoryBacklog'] = app.NZBGET_CATEGORY_BACKLOG
-    config_data['nzb']['nzbget']['host'] = app.NZBGET_HOST
-    config_data['nzb']['nzbget']['priority'] = app.NZBGET_PRIORITY
-    config_data['nzb']['nzbget']['useHttps'] = bool(app.NZBGET_USE_HTTPS)
-    config_data['nzb']['nzbget']['username'] = app.NZBGET_USERNAME
-
-    config_data['nzb']['sabnzbd'] = NonEmptyDict()
-    config_data['nzb']['sabnzbd']['category'] = app.SAB_CATEGORY
-    config_data['nzb']['sabnzbd']['categoryAnime'] = app.SAB_CATEGORY_ANIME
-    config_data['nzb']['sabnzbd']['categoryAnimeBacklog'] = app.SAB_CATEGORY_ANIME_BACKLOG
-    config_data['nzb']['sabnzbd']['categoryBacklog'] = app.SAB_CATEGORY_BACKLOG
-    config_data['nzb']['sabnzbd']['forced'] = bool(app.SAB_FORCED)
-    config_data['nzb']['sabnzbd']['host'] = app.SAB_HOST
-    config_data['nzb']['sabnzbd']['username'] = app.SAB_USERNAME
-
     config_data['layout'] = NonEmptyDict()
     config_data['layout']['schedule'] = app.COMING_EPS_LAYOUT
     config_data['layout']['history'] = app.HISTORY_LAYOUT
diff --git a/themes-default/slim/src/components/helpers/config-textbox-number.vue b/themes-default/slim/src/components/helpers/config-textbox-number.vue
index abe922c974..8948661a7b 100644
--- a/themes-default/slim/src/components/helpers/config-textbox-number.vue
+++ b/themes-default/slim/src/components/helpers/config-textbox-number.vue
@@ -6,7 +6,7 @@
                     <span>{{ label }}</span>
                 </label>
                 <div class="col-sm-10 content">
-                    <input type="number" v-bind="{min, step, id, name: id, class: inputClass, placeholder}" v-model="localValue" @input="updateValue()"/>
+                    <input type="number" v-bind="{min, max, step, id, name: id, class: inputClass, placeholder, disabled}" v-model="localValue" @input="updateValue()"/>
                     <p v-for="(explanation, index) in explanations" :key="index">{{ explanation }}</p>
                     <slot></slot>
                 </div>
@@ -46,6 +46,10 @@ export default {
             type: Number,
             default: 10
         },
+        max: {
+            type: Number,
+            default: null
+        },
         step: {
             type: Number,
             default: 1
@@ -53,6 +57,10 @@ export default {
         placeholder: {
             type: String,
             default: ''
+        },
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
diff --git a/themes-default/slim/src/components/helpers/config-textbox.vue b/themes-default/slim/src/components/helpers/config-textbox.vue
index 220896c6b6..3724f8afa2 100644
--- a/themes-default/slim/src/components/helpers/config-textbox.vue
+++ b/themes-default/slim/src/components/helpers/config-textbox.vue
@@ -6,7 +6,7 @@
                     <span>{{ label }}</span>
                 </label>
                 <div class="col-sm-10 content">
-                    <input v-bind="{id, type, name: id, class: inputClass, placeholder}" v-model="localValue" @input="updateValue()"/>
+                    <input v-bind="{id, type, name: id, class: inputClass, placeholder, disabled}" v-model="localValue" @input="updateValue()"/>
                     <p v-for="(explanation, index) in explanations" :key="index">{{ explanation }}</p>
                     <slot></slot>
                 </div>
@@ -39,6 +39,10 @@ export default {
             type: String,
             default: 'text'
         },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
         /**
          * Overwrite the default configured class on the <input/> element.
          */
diff --git a/themes-default/slim/src/components/helpers/select-list.vue b/themes-default/slim/src/components/helpers/select-list.vue
index 9a9870da54..63b133e27d 100644
--- a/themes-default/slim/src/components/helpers/select-list.vue
+++ b/themes-default/slim/src/components/helpers/select-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="select-list max-width">
+    <div class="select-list max-width" v-bind="{disabled}">
         <i class="switch-input glyphicon glyphicon-refresh" @click="switchFields()" title="Switch between a list and comma separated values"></i>
 
         <ul v-if="!csvMode">
@@ -51,6 +51,10 @@ export default {
             type: Boolean,
             default: false,
             required: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
diff --git a/themes-default/slim/src/store/index.js b/themes-default/slim/src/store/index.js
index 42515bd0f3..58800c14a1 100644
--- a/themes-default/slim/src/store/index.js
+++ b/themes-default/slim/src/store/index.js
@@ -3,12 +3,14 @@ import Vuex from 'vuex';
 import VueNativeSock from 'vue-native-websocket';
 import {
     auth,
+    clients,
     config,
     defaults,
     metadata,
     notifications,
     notifiers,
     qualities,
+    search,
     shows,
     socket,
     statuses
@@ -29,12 +31,14 @@ Vue.use(Vuex);
 const store = new Store({
     modules: {
         auth,
+        clients,
         config,
         defaults,
         metadata,
         notifications,
         notifiers,
         qualities,
+        search,
         shows,
         socket,
         statuses
diff --git a/themes-default/slim/src/store/modules/clients.js b/themes-default/slim/src/store/modules/clients.js
new file mode 100644
index 0000000000..dd4696aeec
--- /dev/null
+++ b/themes-default/slim/src/store/modules/clients.js
@@ -0,0 +1,68 @@
+import { ADD_CONFIG } from '../mutation-types';
+
+const state = {
+    torrents: {
+        authType: null,
+        dir: null,
+        enabled: null,
+        highBandwidth: null,
+        host: null,
+        label: null,
+        labelAnime: null,
+        method: null,
+        path: null,
+        paused: null,
+        rpcurl: null,
+        seedLocation: null,
+        seedTime: null,
+        username: null,
+        verifySSL: null,
+        testStatus: 'Click below to test'
+    },
+    nzb: {
+        enabled: null,
+        method: null,
+        nzbget: {
+            category: null,
+            categoryAnime: null,
+            categoryAnimeBacklog: null,
+            categoryBacklog: null,
+            host: null,
+            priority: null,
+            useHttps: null,
+            username: null,
+            testStatus: 'Click below to test'
+        },
+        sabnzbd: {
+            category: null,
+            forced: null,
+            categoryAnime: null,
+            categoryBacklog: null,
+            categoryAnimeBacklog: null,
+            host: null,
+            username: null,
+            password: null,
+            apiKey: null,
+            testStatus: 'Click below to test'
+        }
+    }
+};
+
+const mutations = {
+    [ADD_CONFIG](state, { section, config }) {
+        if (section === 'clients') {
+            state = Object.assign(state, config);
+        }
+    }
+};
+
+const getters = {};
+
+const actions = {};
+
+export default {
+    state,
+    mutations,
+    getters,
+    actions
+};
diff --git a/themes-default/slim/src/store/modules/config.js b/themes-default/slim/src/store/modules/config.js
index 7bcc2f2870..eae38d18ea 100644
--- a/themes-default/slim/src/store/modules/config.js
+++ b/themes-default/slim/src/store/modules/config.js
@@ -67,7 +67,9 @@ const state = {
             categoryBacklog: null,
             categoryAnimeBacklog: null,
             host: null,
-            username: null
+            username: null,
+            password: null,
+            apiKey: null
         }
     },
     configFile: null,
diff --git a/themes-default/slim/src/store/modules/index.js b/themes-default/slim/src/store/modules/index.js
index 71d7612f61..bd4d313113 100644
--- a/themes-default/slim/src/store/modules/index.js
+++ b/themes-default/slim/src/store/modules/index.js
@@ -1,4 +1,5 @@
 export { default as auth } from './auth';
+export { default as clients } from './clients';
 export { default as config } from './config';
 export { default as defaults } from './defaults';
 export { default as metadata } from './metadata';
@@ -6,5 +7,6 @@ export { default as notifications } from './notifications';
 export { default as notifiers } from './notifiers';
 export { default as qualities } from './qualities';
 export { default as shows } from './shows';
+export { default as search } from './search';
 export { default as socket } from './socket';
 export { default as statuses } from './statuses';
diff --git a/themes-default/slim/src/store/modules/search.js b/themes-default/slim/src/store/modules/search.js
new file mode 100644
index 0000000000..2347ba3ffa
--- /dev/null
+++ b/themes-default/slim/src/store/modules/search.js
@@ -0,0 +1,94 @@
+import { ADD_CONFIG } from '../mutation-types';
+
+const state = {
+    filters: {
+        ignoreUnknownSubs: false,
+        ignored: [
+            'german',
+            'french',
+            'core2hd',
+            'dutch',
+            'swedish',
+            'reenc',
+            'MrLss',
+            'dubbed'
+        ],
+        undesired: [
+            'internal',
+            'xvid'
+        ],
+        ignoredSubsList: [
+            'dk',
+            'fin',
+            'heb',
+            'kor',
+            'nor',
+            'nordic',
+            'pl',
+            'swe'
+        ],
+        required: [],
+        preferred: []
+    },
+    general: {
+        minDailySearchFrequency: 10,
+        minBacklogFrequency: 720,
+        dailySearchFrequency: 40,
+        checkPropersInterval: '4h',
+        usenetRetention: 500,
+        maxCacheAge: 30,
+        backlogDays: 7,
+        torrentCheckerFrequency: 60,
+        backlogFrequency: 720,
+        cacheTrimming: false,
+        deleteFailed: false,
+        downloadPropers: true,
+        useFailedDownloads: false,
+        minTorrentCheckerFrequency: 30,
+        removeFromClient: false,
+        randomizeProviders: false,
+        propersSearchDays: 2,
+        allowHighPriority: true,
+        trackersList: [
+            'udp://tracker.coppersurfer.tk:6969/announce',
+            'udp://tracker.leechers-paradise.org:6969/announce',
+            'udp://tracker.zer0day.to:1337/announce',
+            'udp://tracker.opentrackr.org:1337/announce',
+            'http://tracker.opentrackr.org:1337/announce',
+            'udp://p4p.arenabg.com:1337/announce',
+            'http://p4p.arenabg.com:1337/announce',
+            'udp://explodie.org:6969/announce',
+            'udp://9.rarbg.com:2710/announce',
+            'http://explodie.org:6969/announce',
+            'http://tracker.dler.org:6969/announce',
+            'udp://public.popcorn-tracker.org:6969/announce',
+            'udp://tracker.internetwarriors.net:1337/announce',
+            'udp://ipv4.tracker.harry.lu:80/announce',
+            'http://ipv4.tracker.harry.lu:80/announce',
+            'udp://mgtracker.org:2710/announce',
+            'http://mgtracker.org:6969/announce',
+            'udp://tracker.mg64.net:6969/announce',
+            'http://tracker.mg64.net:6881/announce',
+            'http://torrentsmd.com:8080/announce'
+        ]
+    }
+};
+
+const mutations = {
+    [ADD_CONFIG](state, { section, config }) {
+        if (section === 'search') {
+            state = Object.assign(state, config);
+        }
+    }
+};
+
+const getters = {};
+
+const actions = {};
+
+export default {
+    state,
+    mutations,
+    getters,
+    actions
+};
diff --git a/themes-default/slim/test/specs/config-textbox-number.spec.js b/themes-default/slim/test/specs/config-textbox-number.spec.js
index 2461ed6279..9c61be13fa 100644
--- a/themes-default/slim/test/specs/config-textbox-number.spec.js
+++ b/themes-default/slim/test/specs/config-textbox-number.spec.js
@@ -25,3 +25,24 @@ test('renders', t => {
 
     t.snapshot(wrapper.html());
 });
+
+test('renders with min and max', t => {
+    const { localVue } = t.context;
+    const wrapper = mount(ConfigTextboxNumber, {
+        localVue,
+        propsData: {
+            label: 'test-label',
+            explanations: [
+                'explanation 1',
+                'explanation 2'
+            ],
+            value: 30,
+            id: 'test-id',
+            min: 20,
+            step: 0.5,
+            max: 100
+        }
+    });
+
+    t.snapshot(wrapper.html());
+});
diff --git a/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.md b/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.md
index 15ce2dd22f..9ca843795c 100644
--- a/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.md
+++ b/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.md
@@ -9,3 +9,9 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     '<div id="config-textbox-number-content"><div class="form-group"><div class="row"><label for="test-id" class="col-sm-2 control-label"><span>test-label</span></label><div class="col-sm-10 content"><input type="number" min="20" step="0.5" id="test-id" name="test-id" placeholder="" class="form-control input-sm input75"><p>explanation 1</p><p>explanation 2</p></div></div></div></div>'
+
+## renders with min and max
+
+> Snapshot 1
+
+    '<div id="config-textbox-number-content"><div class="form-group"><div class="row"><label for="test-id" class="col-sm-2 control-label"><span>test-label</span></label><div class="col-sm-10 content"><input type="number" min="20" max="100" step="0.5" id="test-id" name="test-id" placeholder="" class="form-control input-sm input75"><p>explanation 1</p><p>explanation 2</p></div></div></div></div>'
diff --git a/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.snap b/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.snap
index 204ef93476..a2951ee2e6 100644
Binary files a/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.snap and b/themes-default/slim/test/specs/snapshots/config-textbox-number.spec.js.snap differ
diff --git a/themes-default/slim/views/config_search.mako b/themes-default/slim/views/config_search.mako
index 4f362728ef..080829afba 100644
--- a/themes-default/slim/views/config_search.mako
+++ b/themes-default/slim/views/config_search.mako
@@ -17,7 +17,26 @@ window.app = new Vue({
     el: '#vue-wrap',
     data() {
         return {
-            clients: {
+            configLoaded: false,
+            checkPropersIntervalLabels: [
+                { text: '24 hours', value: 'daily' },
+                { text: '4 hours', value: '4h' },
+                { text: '90 mins', value: '90m' },
+                { text: '45 mins', value: '45m' },
+                { text: '24 hours', value: '15m' }
+            ],
+            nzbGetPriorityOptions: [
+                { text: 'Very low', value: -100 },
+                { text: 'Low', value: -50 },
+                { text: 'Normal', value: 0 },
+                { text: 'High', value: 50 },
+                { text: 'Very high', value: 100 },
+                { text: 'Force', value: 900 },
+
+            ],
+
+            // Static clients config
+            clientsConfig: {
                 torrent: {
                     blackhole: {
                         title: 'Black hole'
@@ -103,60 +122,126 @@ window.app = new Vue({
                     }
                 },
             },
-            torrent: {
-                enabled: ${js_bool(app.USE_TORRENTS)},
-                dir: ${json.dumps(app.TORRENT_DIR)},
-                method: ${json.dumps(app.TORRENT_METHOD)},
-                host: ${json.dumps(app.TORRENT_HOST)},
-                rpcUrl: ${json.dumps(app.TORRENT_RPCURL)},
-                username: ${json.dumps(app.TORRENT_USERNAME)},
-                password: ${json.dumps(app.TORRENT_PASSWORD)},
-                label: ${json.dumps(app.TORRENT_LABEL)},
-                labelAnime: ${json.dumps(app.TORRENT_LABEL_ANIME)},
-                path: ${json.dumps(app.TORRENT_PATH)},
-                seedLocation: ${json.dumps(app.TORRENT_SEED_LOCATION)},
-                seedTime: ${json.dumps(app.TORRENT_SEED_TIME)},
-                testStatus: 'Click below to test',
-                authType: ${json.dumps(app.TORRENT_AUTH_TYPE)},
-                verifyCert: ${js_bool(app.TORRENT_VERIFY_CERT)},
-                paused: ${js_bool(app.TORRENT_PAUSED)},
-                highBandwidth: ${js_bool(app.TORRENT_HIGH_BANDWIDTH)},
-            },
-            nzb: {
-                enabled: ${js_bool(app.USE_NZBS)},
-                dir: ${json.dumps(app.NZB_DIR)},
-                method: ${json.dumps(app.NZB_METHOD)},
-                nzbget: {
-                    useHttps: ${js_bool(app.NZBGET_USE_HTTPS)},
-                    host: ${json.dumps(app.NZBGET_HOST)},
-                    username: ${json.dumps(app.NZBGET_USERNAME)},
-                    password: ${json.dumps(app.NZBGET_PASSWORD)},
+            // Mapped from state module: clients.js
+            clients: {
+                torrents: {
+                    authType: null,
+                    dir: null,
+                    enabled: null,
+                    highBandwidth: null,
+                    host: null,
+                    label: null,
+                    labelAnime: null,
+                    method: null,
+                    path: null,
+                    paused: null,
+                    rpcurl: null,
+                    seedLocation: null,
+                    seedTime: null,
+                    username: null,
+                    verifySSL: null,
                     testStatus: 'Click below to test',
-                    category: ${json.dumps(app.NZBGET_CATEGORY)},
-                    categoryBacklog: ${json.dumps(app.NZBGET_CATEGORY_BACKLOG)},
-                    categoryAnime: ${json.dumps(app.NZBGET_CATEGORY_ANIME)},
-                    categoryAnimeBacklog: ${json.dumps(app.NZBGET_CATEGORY_ANIME_BACKLOG)},
-                    priority: ${app.NZBGET_PRIORITY},
-                    priorityOptions: {
-                        'Very low': -100,
-                        'Low': -50,
-                        'Normal': 0,
-                        'High': 50,
-                        'Very high': 100,
-                        'Force': 900
+                },
+                nzb: {
+                    enabled: null,
+                    method: null,
+                    nzbget: {
+                        category: null,
+                        categoryAnime: null,
+                        categoryAnimeBacklog: null,
+                        categoryBacklog: null,
+                        host: null,
+                        priority: null,
+                        useHttps: null,
+                        username: null,
+                        testStatus: 'Click below to test',
+                    },
+                    sabnzbd: {
+                        category: null,
+                        forced: null,
+                        categoryAnime: null,
+                        categoryBacklog: null,
+                        categoryAnimeBacklog: null,
+                        host: null,
+                        username: null,
+                        password: null,
+                        apiKey: null,
+                        testStatus: 'Click below to test',
                     }
+                }
+            },
+            // Mapped from state module: search.js
+            search: {
+		        filters: {
+                    ignoreUnknownSubs: false,
+                    ignored: [
+                        'german',
+                        'french',
+                        'core2hd',
+                        'dutch',
+                        'swedish',
+                        'reenc',
+                        'MrLss',
+                        'dubbed'
+                    ],
+                    undesired: [
+                        'internal',
+                        'xvid'
+                    ],
+                    ignoredSubsList: [
+                        'dk',
+                        'fin',
+                        'heb',
+                        'kor',
+                        'nor',
+                        'nordic',
+                        'pl',
+                        'swe'
+                    ],
+                    required: [],
+                    preferred: []
                 },
-                sabnzbd: {
-                    host: ${json.dumps(app.SAB_HOST)},
-                    username: ${json.dumps(app.SAB_USERNAME)},
-                    password: ${json.dumps(app.SAB_PASSWORD)},
-                    apiKey: ${json.dumps(app.SAB_APIKEY)},
-                    testStatus: 'Click below to test',
-                    category: ${json.dumps(app.SAB_CATEGORY)},
-                    categoryBacklog: ${json.dumps(app.SAB_CATEGORY_BACKLOG)},
-                    categoryAnime: ${json.dumps(app.SAB_CATEGORY_ANIME)},
-                    categoryAnimeBacklog: ${json.dumps(app.SAB_CATEGORY_ANIME_BACKLOG)},
-                    forced: ${js_bool(app.SAB_FORCED)}
+                general: {
+                    minDailySearchFrequency: 10,
+                    minBacklogFrequency: 720,
+                    dailySearchFrequency: 40,
+                    checkPropersInterval: '4h',
+                    usenetRetention: 500,
+                    maxCacheAge: 30,
+                    backlogDays: 7,
+                    torrentCheckerFrequency: 60,
+                    backlogFrequency: 720,
+                    cacheTrimming: false,
+                    deleteFailed: false,
+                    downloadPropers: true,
+                    useFailedDownloads: false,
+                    minTorrentCheckerFrequency: 30,
+                    removeFromClient: false,
+                    randomizeProviders: false,
+                    propersSearchDays: 2,
+                    allowHighPriority: true,
+                    trackersList: [
+                        'udp://tracker.coppersurfer.tk:6969/announce',
+                        'udp://tracker.leechers-paradise.org:6969/announce',
+                        'udp://tracker.zer0day.to:1337/announce',
+                        'udp://tracker.opentrackr.org:1337/announce',
+                        'http://tracker.opentrackr.org:1337/announce',
+                        'udp://p4p.arenabg.com:1337/announce',
+                        'http://p4p.arenabg.com:1337/announce',
+                        'udp://explodie.org:6969/announce',
+                        'udp://9.rarbg.com:2710/announce',
+                        'http://explodie.org:6969/announce',
+                        'http://tracker.dler.org:6969/announce',
+                        'udp://public.popcorn-tracker.org:6969/announce',
+                        'udp://tracker.internetwarriors.net:1337/announce',
+                        'udp://ipv4.tracker.harry.lu:80/announce',
+                        'http://ipv4.tracker.harry.lu:80/announce',
+                        'udp://mgtracker.org:2710/announce',
+                        'http://mgtracker.org:6969/announce',
+                        'udp://tracker.mg64.net:6969/announce',
+                        'http://tracker.mg64.net:6881/announce',
+                        'http://torrentsmd.com:8080/announce'
+                    ]
                 }
             },
             httpAuthTypes: {
@@ -164,50 +249,56 @@ window.app = new Vue({
                 basic: 'Basic',
                 digest: 'Digest'
             },
-
-            // Episode Search: General Config
-            randomizeProviders: ${js_bool(app.RANDOMIZE_PROVIDERS)},
-            downloadPropers: ${js_bool(app.DOWNLOAD_PROPERS)},
-            checkPropersInterval: ${json.dumps(app.CHECK_PROPERS_INTERVAL)},
-            propersIntervalLabels: ${json.dumps(app.PROPERS_INTERVAL_LABELS)},
-            propersSearchDays: ${app.PROPERS_SEARCH_DAYS},
-            backlogDays: ${app.BACKLOG_DAYS},
-            backlogFrequency: ${app.BACKLOG_FREQUENCY},
-            minBacklogFrequency: ${app.MIN_BACKLOG_FREQUENCY},
-            dailySearchFrequency: ${app.DAILYSEARCH_FREQUENCY},
-            minDailySearchFrequency: ${app.MIN_DAILYSEARCH_FREQUENCY},
-            removeFromClient: ${js_bool(app.REMOVE_FROM_CLIENT and app.TORRENT_METHOD in ('transmission', 'deluge', 'deluged'))},
-            torrentCheckerFrequency: ${app.TORRENT_CHECKER_FREQUENCY},
-            minTorrentCheckerFrequency: ${app.MIN_TORRENT_CHECKER_FREQUENCY},
-            usenetRetention: ${app.USENET_RETENTION},
-            trackersList: ${json.dumps(app.TRACKERS_LIST)}.join(', '),
-            allowHighPriority: ${js_bool(app.ALLOW_HIGH_PRIORITY)},
-            useFailedDownloads: ${js_bool(app.USE_FAILED_DOWNLOADS)},
-            deleteFailed: ${js_bool(app.DELETE_FAILED)},
-            cacheTrimming: ${js_bool(app.CACHE_TRIMMING)},
-            maxCacheAge: ${app.MAX_CACHE_AGE},
-
-            // Episode Search: Search Filters
-            ignoreWords: ${json.dumps(app.IGNORE_WORDS)}.join(', '),
-            undesiredWords: ${json.dumps(app.UNDESIRED_WORDS)}.join(', '),
-            preferredWords: ${json.dumps(app.PREFERRED_WORDS)}.join(', '),
-            requireWords: ${json.dumps(app.REQUIRE_WORDS)}.join(', '),
-            ignoredSubsList: ${json.dumps(app.IGNORED_SUBS_LIST)}.join(', '),
-            ignoreUndSubs: ${js_bool(app.IGNORE_UND_SUBS)},
-
-            // Global
-            dataDir: ${json.dumps(app.DATA_DIR)},
         };
     },
+    computed: {
+        stateSearch() {
+            return this.$store.state.search;
+        },
+        stateClients() {
+            return this.$store.state.clients;            
+        },
+        torrentUsernameIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (!['rtorrent', 'deluge'].includes(method) || method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        },
+        torrentPasswordIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (method !== 'rtorrent' || method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        },
+        authTypeIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        }
+    },
     beforeMount() {
         $('#config-components').tabs();
     },
     methods: {
         async testTorrentClient() {
-            const { torrent } = this;
-            const { method, host, username, password } = torrent;
+            const { clients } = this;
+            const { torrents } = clients;
+            const { method, host, username, password } = torrents;
 
-            this.torrent.testStatus = MEDUSA.config.loading;
+            this.clients.torrents.testStatus = MEDUSA.config.loading;
 
             const params = {
                 torrent_method: method,
@@ -217,14 +308,15 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testTorrent', { params });
 
-            this.torrent.testStatus = resp.data;
+            this.clients.torrents.testStatus = resp.data;
         },
         async testNzbget() {
-            const { nzb } = this;
+            const { clients } = this;
+            const { nzb } = clients;
             const { nzbget } = nzb;
             const { host, username, password, useHttps } = nzbget;
 
-            this.nzb.nzbget.testStatus = MEDUSA.config.loading;
+            this.clients.nzb.nzbget.testStatus = MEDUSA.config.loading;
 
             const params = {
                 host,
@@ -234,14 +326,15 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testNZBget', { params });
 
-            this.nzb.nzbget.testStatus = resp.data;
+            this.clients.nzb.nzbget.testStatus = resp.data;
         },
         async testSabnzbd() {
-            const { nzb } = this;
+            const { clients } = this;
+            const { nzb } = clients;
             const { sabnzbd } = nzb;
             const { host, username, password, apiKey } = sabnzbd;
 
-            this.nzb.sabnzbd.testStatus = MEDUSA.config.loading;
+            this.clients.nzb.sabnzbd.testStatus = MEDUSA.config.loading;
 
             const params = {
                 host,
@@ -251,42 +344,85 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testSABnzbd', { params });
 
-            this.nzb.sabnzbd.testStatus = resp.data;
+            this.clients.nzb.sabnzbd.testStatus = resp.data;
+        },
+        save() {
+            const { $store, clients, configLoaded, search } = this;
+            // We want to wait until the page has been fully loaded, before starting to save stuff.
+            if (!configLoaded) {
+                return;
+            }
+            // Disable the save button until we're done.
+            this.saving = true;
+
+            // Clone the config into a new object
+            const config = Object.assign({}, {search}, {clients});
+
+            const section = 'main';
+            $store.dispatch('setConfig', { section, config }).then(() => {
+                this.$snotify.success(
+                    'Saved Search config',
+                    'Saved',
+                    { timeout: 5000 }
+                );
+            }).catch(() => {
+                this.$snotify.error(
+                    'Error while trying to save search config',
+                    'Error'
+                );
+            });
         }
     },
     watch: {
-        'torrent.host'(host) {
-            const { torrent } = this;
-            const { method } = torrent;
+        'clients.torrents.host'(host) {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { method } = torrents;
 
             if (method === 'rtorrent') {
+                if (!host) {
+                    return;
+                }
                 const isMatch = host.startsWith('scgi://');
 
                 if (isMatch) {
-                    this.torrent.username = '';
-                    this.torrent.password = '';
-                    this.torrent.authType = 'none';
+                    this.clients.torrents.username = '';
+                    this.clients.torrents.password = '';
+                    this.clients.torrents.authType = 'none';
                 }
             }
 
             if (method === 'deluge') {
-                this.torrent.username = '';
+                this.clients.torrents.username = '';
             }
         },
-        'torrent.method'(method) {
-            if (!this.clients.torrent[method].removeFromClientOption) {
-                this.removeFromClient = false;
+        'clients.torrents.method'(method) {
+            if (!this.clientsConfig.torrent[method].removeFromClientOption) {
+                this.search.general.removeFromClient = false;
             }
         }
+    },
+    mounted() {
+        // The real vue stuff
+        // This is used to wait for the config to be loaded by the store.
+        this.$once('loaded', () => {
+            const { clients, search, stateClients, stateSearch } = this;
+
+            // Map the state values to local data.
+            this.search = Object.assign({}, search, stateSearch);
+            this.clients = Object.assign({}, clients, stateClients);
+            this.configLoaded = true;
+        });
     }
 });
 </script>
 </%block>
 <%block name="content">
+<vue-snotify></vue-snotify>
 <h1 class="header">{{ $route.meta.header }}</h1>
 <div id="config">
     <div id="config-content">
-        <form id="configForm" action="config/search/saveSearch" method="post">
+        <form id="configForm" method="post" @submit.prevent="save()">
             <div id="config-components">
                 <ul>
                     <li><app-link href="#episode-search">Episode Search</app-link></li>
@@ -295,676 +431,323 @@ window.app = new Vue({
                 </ul>
                 <div id="episode-search">
                     <!-- general settings //-->
-                    <div class="component-group-desc-legacy">
-                        <h3>General Search Settings</h3>
-                        <p>How to manage searching with <app-link href="config/providers">providers</app-link>.</p>
-                    </div>
-                    <div class="component-group">
-                        <fieldset class="component-group-list">
-                            <div class="field-pair">
-                                <label for="randomize_providers">
-                                    <span class="component-title">Randomize Providers</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="randomize_providers" id="randomize_providers" v-model="randomizeProviders"/>
-                                        <p>randomize the provider search order instead of going in order of placement</p>
-                                    </span>
-                                </label>
-                            </div><!-- randomize providers -->
-                            <div class="field-pair">
-                                <label for="download_propers">
-                                    <span class="component-title">Download propers</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="download_propers" id="download_propers" v-model="downloadPropers"/>
-                                        <p>replace original download with "Proper" or "Repack" if nuked</p>
-                                    </span>
-                                </label>
-                            </div><!-- download propers -->
-                            <div v-show="downloadPropers">
-                                <div class="field-pair">
-                                    <label for="check_propers_interval">
-                                        <span class="component-title">Check propers every:</span>
-                                        <span class="component-desc">
-                                            <select id="check_propers_interval" name="check_propers_interval" v-model="checkPropersInterval" class="form-control input-sm">
-                                                <option v-for="(label, interval) in propersIntervalLabels" :value="interval">{{label}}</option>
-                                            </select>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Proper search days</span>
-                                        <span class="component-desc">
-                                            <input type="number" min="2" max="7" step="1" name="propers_search_days" v-model.number="propersSearchDays" class="form-control input-sm input75"/>
-                                            <p>how many days to keep searching for propers since episode airdate (default: 2 days)</p>
-                                        </span>
-                                    </label>
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>General Search Settings</h3>
+                            <p>How to manage searching with <app-link href="config/providers">providers</app-link>.</p>
+                        </div>
+                    
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-toggle-slider v-model="search.general.randomizeProviders" label="Randomize Providers" id="randomize_providers" :explanations="['randomize the provider search order instead of going in order of placement']" ></config-toggle-slider>
+                                <config-toggle-slider v-model="search.general.downloadPropers" label="Download propers" id="download_propers" :explanations="['replace original download with \'Proper\' or \'Repack\' if nuked']" ></config-toggle-slider>
+                                
+                                <div v-show="search.general.downloadPropers">
+                                    <config-template label="Check propers every" label-for="check_propers_interval">
+                                        <select id="check_propers_interval" name="check_propers_interval" v-model="search.general.checkPropersInterval" class="form-control input-sm">
+                                            <option v-for="option in checkPropersIntervalLabels" :value="option.value">
+                                                {{option.text}}
+                                            </option>
+                                        </select>
+                                    </config-template>
+
+                                    <config-textbox-number :min="2" :max="7" :step="1" v-model.number="search.general.propersSearchDays" label="Proper search days" id="propers_search_days" :explanations="['how many days to keep searching for propers since episode airdate (default: 2 days)']"></config-textbox-number>
+                                    
                                 </div><!-- check propers -->
-                            </div>
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Forced backlog search day(s)</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="backlog_days" v-model.number="backlogDays" class="form-control input-sm input75"/>
-                                        <p>number of day(s) that the "Forced Backlog Search" will cover (e.g. 7 Days)</p>
-                                    </span>
-                                </label>
-                            </div><!-- backlog days -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Backlog search frequency</span>
-                                    <span class="component-desc">
-                                        <input type="number" :min="minBacklogFrequency" step="1" name="backlog_frequency" v-model.number="backlogFrequency" class="form-control input-sm input75"/>
-                                        <p>time in minutes between searches (min. {{minBacklogFrequency}})</p>
-                                    </span>
-                                </label>
-                            </div><!-- backlog frequency -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Daily search frequency</span>
-                                    <span class="component-desc">
-                                        <input type="number" :min="minDailySearchFrequency" step="1" name="dailysearch_frequency" v-model.number="dailySearchFrequency" class="form-control input-sm input75"/>
-                                        <p>time in minutes between searches (min. {{minDailySearchFrequency}})</p>
-                                    </span>
-                                </label>
-                            </div><!-- daily search frequency -->
-                            <div class="field-pair" v-show="clients.torrent[torrent.method].removeFromClientOption">
-                                <label for="remove_from_client">
-                                    <span class="component-title">Remove torrents from client</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="remove_from_client" id="remove_from_client" v-model="removeFromClient"/>
-                                        <p>Remove torrent from client (also torrent data) when provider ratio is reached</p>
-                                        <p><b>Note:</b> For now only Transmission and Deluge are supported</p>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="removeFromClient">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Frequency to check torrents ratio</span>
-                                        <span class="component-desc">
-                                            <input type="number" :min="minTorrentCheckerFrequency" step="1" name="torrent_checker_frequency" v-model.number="torrentCheckerFrequency" class="form-control input-sm input75"/>
-                                            <p>Frequency in minutes to check torrent's ratio (default: 60)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Usenet retention</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="usenet_retention" v-model.number="usenetRetention" class="form-control input-sm input75"/>
-                                        <p>age limit in days for usenet articles to be used (e.g. 500)</p>
-                                    </span>
-                                </label>
-                            </div><!-- usenet retention -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Trackers list</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="trackers_list" v-model="trackersList" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            Trackers that will be added to magnets without trackers<br>
-                                            separate trackers with a comma, e.g. "tracker1, tracker2, tracker3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- trackers -->
-                            <div class="field-pair">
-                                <label for="allow_high_priority">
-                                    <span class="component-title">Allow high priority</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="allow_high_priority" id="allow_high_priority" v-model="allowHighPriority"/>
-                                        <p>set downloads of recently aired episodes to high priority</p>
-                                    </span>
-                                </label>
-                            </div><!-- high priority -->
-                            <div class="field-pair">
-                                <label for="use_failed_downloads">
-                                    <span class="component-title">Use Failed Downloads</span>
-                                    <span class="component-desc">
-                                        <input id="use_failed_downloads" type="checkbox" name="use_failed_downloads" v-model="useFailedDownloads"/>
-                                        Use Failed Download Handling?<br>
-                                        Will only work with snatched/downloaded episodes after enabling this
-                                    </span>
-                                </label>
-                            </div><!-- use failed -->
-                            <div class="field-pair" v-show="useFailedDownloads">
-                                <label for="delete_failed">
-                                    <span class="component-title">Delete Failed</span>
-                                    <span class="component-desc">
-                                        <input id="delete_failed" type="checkbox" name="delete_failed" v-model="deleteFailed"/>
-                                        Delete files left over from a failed download?<br>
-                                        <b>NOTE:</b> This only works if Use Failed Downloads is enabled.
-                                    </span>
-                                </label>
-                            </div><!-- delete failed -->
-                            <div class="field-pair">
-                                <label for="cache_trimming">
-                                    <span class="component-title">Cache Trimming</span>
-                                    <span class="component-desc">
-                                        <input id="cache_trimming" type="checkbox" name="cache_trimming" v-model="cacheTrimming"/>
-                                        Enable trimming of provider cache<br>
-                                    </span>
-                                </label>
-                            </div><!-- cache trimming -->
-                            <div class="field-pair" v-show="cacheTrimming">
-                                <label for="max_cache_age">
-                                    <span class="component-title">Cache Retention</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="max_cache_age" id="max_cache_age" v-model.number="maxCacheAge" class="form-control input-sm input75"/>
-                                        days<br>
-                                        <br>
-                                        Number of days to retain results in cache.  Results older than this will be removed if cache trimming is enabled.
-                                    </span>
-                                </label>
-                            </div><!-- max cache age -->
-                            <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
-                        </fieldset>
-                    </div><!-- /general settings //-->
+                                
+                                <config-textbox-number :min="1" :step="1" v-model.number="search.general.backlogDays" label="Forced backlog search day(s)" id="backlog_days" :explanations="['how many days to keep searching for propers since episode airdate (default: 2 days)']"></config-textbox-number>
+                                    
+                                <config-textbox-number :min="search.general.minDailySearchFrequency" :step="1" v-model.number="search.general.minBacklogFrequency" label="Backlog search frequency" id="backlog_frequency">
+                                    <p>time in minutes between searches (min. {{search.general.minBacklogFrequency}})</p>
+                                </config-textbox-number>
+                                
+                                <config-toggle-slider v-if="clientsConfig.torrent[clients.torrents.method]" v-show="clientsConfig.torrent[clients.torrents.method].removeFromClientOption" v-model="search.general.removeFromClient" label="Remove torrents from client" id="remove_from_client">
+                                    <p>Remove torrent from client (also torrent data) when provider ratio is reached</p>
+                                    <p><b>Note:</b> For now only Transmission and Deluge are supported</p>
+                                </config-toggle-slider>
+                                    
+                                <config-textbox-number v-show="search.general.removeFromClient" :min="search.general.minTorrentCheckerFrequency" :step="1" v-model.number="search.general.torrentCheckerFrequency" label="Frequency to check torrents ratio" id="torrent_checker_frequency" :explanations="['Frequency in minutes to check torrent\'s ratio (default: 60)']"></config-textbox-number>
+
+
+                                <config-textbox-number :min="1" :step="1" v-model.number="search.general.usenetRetention" label="Usenet retention" id="usenet_retention" :explanations="['age limit in days for usenet articles to be used (e.g. 500)']"></config-textbox-number>
+
+                                <config-template label-for="trackers_list" label="Trackers list">
+                                    <select-list name="trackers_list" id="trackers_list" :list-items="search.general.trackersList" @change="search.general.trackersList = $event.map(x => x.value)"></select-list>
+                                    Trackers that will be added to magnets without trackers<br>
+                                    separate trackers with a comma, e.g. "tracker1, tracker2, tracker3"
+                                </config-template>
+
+                                <config-toggle-slider v-model="search.general.allowHighPriority" label="Allow high priority" id="allow_high_priority" :explanations="['set downloads of recently aired episodes to high priority']" ></config-toggle-slider>
+                                
+                                
+                                <config-toggle-slider v-model="search.general.useFailedDownloads" label="Use Failed Downloads" id="use_failed_downloads" :explanations="['Use Failed Download Handling?',
+                                    'Will only work with snatched/downloaded episodes after enabling this']" >
+                                </config-toggle-slider>
+                                
+                                
+                                <config-toggle-slider v-show="search.general.useFailedDownloads" v-model="search.general.deleteFailed" label="Delete Failed" id="delete_failed">
+                                    Delete files left over from a failed download?<br>
+                                    <b>NOTE:</b> This only works if Use Failed Downloads is enabled.
+                                </config-toggle-slider>
+
+
+                                <config-toggle-slider v-model="search.general.cacheTrimming" label="Cache Trimming" id="cache_trimming" :explanations="['Enable trimming of provider cache']" ></config-toggle-slider>
+                                
+                                <config-textbox-number v-show="search.general.cacheTrimming" :min="1" :step="1" v-model.number="search.general.maxCacheAge" label="Cache Retention" id="max_cache_age" :explanations="['Number of days to retain results in cache.  Results older than this will be removed if cache trimming is enabled.']"></config-textbox-number>
+
+                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
+                            </fieldset>
+                        </div><!-- /general settings //-->
+                    </div><!-- /row -->
+
                     <!-- search filters //-->
-                    <div class="component-group-desc-legacy">
-                        <h3>Search Filters</h3>
-                        <p>Options to filter search results</p>
-                    </div>
-                    <div class="component-group">
-                        <fieldset class="component-group-list">
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Ignore words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="ignore_words" v-model="ignoreWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with any words from this list will be ignored<br>
-                                            separate words with a comma, e.g. "word1,word2,word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- ignored words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Undesired words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="undesired_words" v-model="undesiredWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with words from this list will only be selected as a last resort<br>
-                                            separate words with a comma, e.g. "word1, word2, word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- undesired words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Preferred words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="preferred_words" v-model="preferredWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with one or more word from this list will be chosen over others<br>
-                                            separate words with a comma, e.g. "word1, word2, word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- preferred words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Require words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="require_words" v-model="requireWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results must include at least one word from this list<br>
-                                            separate words with a comma, e.g. "word1,word2,word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- required words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Ignore language names in subbed results</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="ignored_subs_list" v-model="ignoredSubsList" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            Ignore subbed releases based on language names <br>
-                                            Example: "dk" will ignore words: dksub, dksubs, dksubbed, dksubed <br>
-                                            separate languages with a comma, e.g. "lang1, lang2, lang3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- subbed results -->
-                            <div class="field-pair">
-                                <label for="ignore_und_subs">
-                                    <span class="component-title">Ignore unknown subbed releases</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="ignore_und_subs" id="ignore_und_subs" v-model="ignoreUndSubs"/>
-                                        Ignore subbed releases without language names <br>
-                                        Filter words: subbed, subpack, subbed, subs, etc.)
-                                    </span>
-                                </label>
-                            </div><!-- ignore unknown subs -->
-                            <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
-                        </fieldset>
-                    </div><!-- /search filters //-->
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>Search Filters</h3>
+                            <p>Options to filter search results</p>
+                        </div>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-template label-for="ignore_words" label="Ignore words">
+                                    <select-list name="ignore_words" id="ignore_words" :list-items="search.filters.ignored" @change="search.filters.ignored = $event.map(x => x.value)"></select-list>
+                                    results with any words from this list will be ignored
+                                </config-template>
+
+                                <config-template label-for="undesired_words" label="Undesired words">
+                                    <select-list name="undesired_words" id="undesired_words" :list-items="search.filters.undesired" @change="search.filters.undesired = $event.map(x => x.value)"></select-list>
+                                    results with words from this list will only be selected as a last resort
+                                </config-template>
+
+                                <config-template label-for="preferred_words" label="Preferred words">
+                                    <select-list name="preferred_words" id="preferred_words" :list-items="search.filters.preferred" @change="search.filters.preferred = $event.map(x => x.value)"></select-list>
+                                    results with one or more word from this list will be chosen over others
+                                </config-template>
+
+                                <config-template label-for="require_words" label="Require words">
+                                    <select-list name="require_words" id="require_words" :list-items="search.filters.required" @change="search.filters.required = $event.map(x => x.value)"></select-list>
+                                    results must include at least one word from this list
+                                </config-template>
+
+                                <config-template label-for="ignored_subs_list" label="Ignore language names in subbed results">
+                                    <select-list name="ignored_subs_list" id="ignored_subs_list" :list-items="search.filters.ignoredSubsList" @change="search.filters.ignoredSubsList = $event.map(x => x.value)"></select-list>
+                                    Ignore subbed releases based on language names <br>
+                                    Example: "dk" will ignore words: dksub, dksubs, dksubbed, dksubed <br>
+                                </config-template>
+
+                                <config-toggle-slider v-model="search.filters.ignoreUnknownSubs" label="Ignore unknown subbed releases" id="ignore_und_subs" :explanations="['Ignore subbed releases without language names', 'Filter words: subbed, subpack, subbed, subs, etc.)']"></config-toggle-slider>
+
+                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
+                            </fieldset>
+                        </div><!-- /col //-->
+                    </div><!-- /row //-->   
                 </div><!-- /#episode-search //-->
-                <div id="nzb-search" class="component-group">
-                    <div class="component-group-desc-legacy">
-                        <h3>NZB Search</h3>
-                        <p>How to handle NZB search results.</p>
-                        <div id="nzb_method_icon" :class="'add-client-icon-' + nzb.method"></div>
-                    </div>
-                    <fieldset class="component-group-list">
-                        <div class="field-pair">
-                            <label for="use_nzbs">
-                                <span class="component-title">Search NZBs</span>
-                                <span class="component-desc">
-                                    <input type="checkbox" name="use_nzbs" id="use_nzbs" v-model="nzb.enabled"/>
-                                    <p>enable NZB search providers</p>
-                                </span>
-                            </label>
+                
+
+                <div id="nzb-search">
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>NZB Search</h3>
+                            <p>How to handle NZB search results.</p>
+                            <div id="nzb_method_icon" :class="'add-client-icon-' + clients.nzb.method"></div>
                         </div>
-                        <div v-show="nzb.enabled">
-                            <div class="field-pair">
-                                <label for="nzb_method">
-                                    <span class="component-title">Send .nzb files to:</span>
-                                    <span class="component-desc">
-                                        <select v-model="nzb.method" name="nzb_method" id="nzb_method" class="form-control input-sm">
-                                            <option v-for="(client, name) in clients.nzb" :value="name">{{client.title}}</option>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-toggle-slider v-model="clients.nzb.enabled" label="Search NZBs" id="use_nzbs" :explanations="['enable NZB search providers']"></config-toggle-slider>
+
+                                <div v-show="clients.nzb.enabled">
+                                    <config-template label-for="nzb_method" label="Send .nzb files to">
+                                        <select v-model="clients.nzb.method" name="nzb_method" id="nzb_method" class="form-control input-sm">
+                                            <option v-for="(client, name) in clientsConfig.nzb" :value="name">{{client.title}}</option>
                                         </select>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="nzb.method === 'blackhole'" id="blackhole_settings">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Black hole folder location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="nzb_dir" title="Select .nzb black hole location" :initial-dir="nzb.dir" @update="nzb.dir = $event"></file-browser>
-                                            <div class="clear-left">
-                                                <p><b>.nzb</b> files are stored at this location for external software to find and use</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div v-show="nzb.method === 'sabnzbd'" id="sabnzbd_settings">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd server URL</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.host" type="text" id="sab_host" name="sab_host" class="form-control input-sm input350"/>
+                                    </config-template>
+                                    
+                                    <config-template v-show="clients.nzb.method === 'blackhole'" id="blackhole_settings" label-for="nzb_dir" label="Black hole folder location">
+                                        <file-browser name="nzb_dir" title="Select .nzb black hole location" :initial-dir="clients.nzb.dir" @update="clients.nzb.dir = $event"></file-browser>
+                                        <div class="clear-left">
+                                            <p><b>.nzb</b> files are stored at this location for external software to find and use</p>
+                                        </div>
+                                    </config-template>
+                                    
+                                    
+                                    <div v-if="clients.nzb.method" v-show="clients.nzb.method === 'sabnzbd'" id="sabnzbd_settings">
+                                        
+                                        <config-textbox v-model="clients.nzb.sabnzbd.host" label="SABnzbd server URL" id="sab_host" :explanations="['username for your KODI server (blank for none)']" @change="save()">
                                             <div class="clear-left">
-                                                <p v-html="clients.nzb[nzb.method].description"></p>
+                                                <p v-html="clientsConfig.nzb[clients.nzb.method].description"></p>
                                             </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd username</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.username" type="text" name="sab_username" id="sab_username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd password</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.password" type="password" name="sab_password" id="sab_password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd API key</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.apiKey" type="text" name="sab_apikey" id="sab_apikey" class="form-control input-sm input350"/>
-                                            <div class="clear-left"><p>locate at... SABnzbd Config -> General -> API Key</p></div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category" id="sab_category" v-model="nzb.sabnzbd.category" class="form-control input-sm input200"/>
-                                            <p>add downloads to this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_backlog" id="sab_category_backlog" v-model="nzb.sabnzbd.categoryBacklog" class="form-control input-sm input200"/>
-                                            <p>add downloads of old episodes to this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_anime" id="sab_category_anime" v-model="nzb.sabnzbd.categoryAnime" class="form-control input-sm input200"/>
-                                            <p>add anime downloads to this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category for anime (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_anime_backlog" id="sab_category_anime_backlog" v-model="nzb.sabnzbd.categoryAnimeBacklog" class="form-control input-sm input200"/>
-                                            <p>add anime downloads of old episodes to this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair" v-show="allowHighPriority">
-                                    <label for="sab_forced">
-                                        <span class="component-title">Use forced priority</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="sab_forced" id="sab_forced" v-model="nzb.sabnzbd.forced"/>
-                                            <p>enable to change priority from HIGH to FORCED</p></span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="nzb.sabnzbd.testStatus" v-html="nzb.sabnzbd.testStatus"></div>
-                                <input @click="testSabnzbd" type="button" value="Test SABnzbd" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                            <div v-show="nzb.method === 'nzbget'" id="nzbget_settings">
-                                <div class="field-pair">
-                                    <label for="nzbget_use_https">
-                                        <span class="component-title">Connect using HTTPS</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="nzbget_use_https" id="nzbget_use_https" v-model="nzb.nzbget.useHttps"/>
+                                        </config-textbox>
+                                        
+                                        <config-textbox v-model="clients.nzb.sabnzbd.username" label="SABnzbd username" id="sab_username" :explanations="['(blank for none)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.password" type="password" label="SABnzbd password" id="sab_password" :explanations="['(blank for none)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.apiKey" label="SABnzbd API key" id="sab_apikey" :explanations="['locate at... SABnzbd Config -> General -> API Key']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.category" label="Use SABnzbd category" id="sab_category" :explanations="['add downloads to this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryBacklog" label="Use SABnzbd category (backlog episodes)" id="sab_category_backlog" :explanations="['add downloads of old episodes to this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryAnime" label="Use SABnzbd category for anime" id="sab_category_anime" :explanations="['add anime downloads to this category (e.g. anime)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryAnimeBacklog" label="Use SABnzbd category for anime (backlog episodes)" id="sab_category_anime_backlog" :explanations="['add anime downloads of old episodes to this category (e.g. anime)']"></config-textbox>
+                                        <config-toggle-slider v-model="clients.nzb.sabnzbd.forced" label="Use forced priority" id="sab_forced" :explanations="['enable to change priority from HIGH to FORCED']" ></config-toggle-slider>
+                                
+                                        <div class="testNotification" v-show="clients.nzb.sabnzbd.testStatus" v-html="clients.nzb.sabnzbd.testStatus"></div>
+                                        <input @click="testSabnzbd" type="button" value="Test SABnzbd" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+                                    
+                                    <div v-if="clients.nzb.method" v-show="clients.nzb.method === 'nzbget'" id="nzbget_settings">
+                                        
+                                        <config-toggle-slider v-model="clients.nzb.nzbget.useHttps" label="Connect using HTTP" id="nzbget_use_https">
                                             <p><b>note:</b> enable Secure control in NZBGet and set the correct Secure Port here</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget host:port</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_host" id="nzbget_host" v-model="nzb.nzbget.host" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p v-html="clients.nzb[nzb.method].description"></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget username</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_username" id="nzbget_username" v-model="nzb.nzbget.username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>locate in nzbget.conf (default:nzbget)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget password</span>
-                                        <span class="component-desc">
-                                            <input type="password" name="nzbget_password" id="nzbget_password" v-model="nzb.nzbget.password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>locate in nzbget.conf (default:tegbzn6789)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category" id="nzbget_category" v-model="nzb.nzbget.category" class="form-control input-sm input200"/>
-                                            <p>send downloads marked this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_backlog" id="nzbget_category_backlog" v-model="nzb.nzbget.categoryBacklog" class="form-control input-sm input200"/>
-                                            <p>send downloads of old episodes marked this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_anime" id="nzbget_category_anime" v-model="nzb.nzbget.categoryAnime" class="form-control input-sm input200"/>
-                                            <p>send anime downloads marked this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category for anime (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_anime_backlog" id="nzbget_category_anime_backlog" v-model="nzb.nzbget.categoryAnimeBacklog" class="form-control input-sm input200"/>
-                                            <p>send anime downloads of old episodes marked this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget priority</span>
-                                        <span class="component-desc">
-                                            <select name="nzbget_priority" id="nzbget_priority" v-model="nzb.nzbget.priority" class="form-control input-sm">
-                                                <option v-for="(value, title) in nzb.nzbget.priorityOptions" :value="value">{{title}}</option>
+                                        </config-toggle-slider>
+
+                                        <config-textbox v-model="clients.nzb.nzbget.host" label="NZBget host:port" id="nzbget_host">
+                                            <p v-if="clientsConfig.nzb[clients.nzb.method]" v-html="clientsConfig.nzb[clients.nzb.method].description"></p>
+                                        </config-textbox>
+
+                                        <config-textbox v-model="clients.nzb.nzbget.username" label="NZBget username" id="nzbget_username" :explanations="['locate in nzbget.conf (default:nzbget)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.password" type="password" label="NZBget password" id="nzbget_password" :explanations="['locate in nzbget.conf (default:tegbzn6789)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.category" label="Use NZBget category" id="nzbget_category" :explanations="['send downloads marked this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryBacklog" label="Use NZBget category (backlog episodes)" id="nzbget_category_backlog" :explanations="['send downloads of old episodes marked this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryAnime" label="Use NZBget category for anime" id="nzbget_category_anime" :explanations="['send anime downloads marked this category (e.g. anime)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryAnimeBacklog" label="Use NZBget category for anime (backlog episodes)" id="nzbget_category_anime_backlog" :explanations="['send anime downloads of old episodes marked this category (e.g. anime)']"></config-textbox>
+                                        
+                                        <config-template label-for="nzbget_priority" label="NZBget priority">
+                                            <select name="nzbget_priority" id="nzbget_priority" v-model="clients.nzb.nzbget.priority" class="form-control input-sm">
+                                                <option v-for="option in nzbGetPriorityOptions" :value="option.value">{{option.text}}</option>
                                             </select>
                                             <span>priority for daily snatches (no backlog)</span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="nzb.nzbget.testStatus" v-html="nzb.nzbget.testStatus"></div>
-                                <input @click="testNzbget" type="button" value="Test NZBget" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div><!-- /nzb.enabled //-->
+                                        </config-template>
+                                        
+                                        <div class="testNotification" v-show="clients.nzb.nzbget.testStatus" v-html="clients.nzb.nzbget.testStatus"></div>
+                                        <input @click="testNzbget" type="button" value="Test NZBget" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div><!-- /nzb.enabled //-->
+                                </div>
+                            </fieldset>
                         </div>
-                    </fieldset>
+                    </div> <!-- /row -->
                 </div><!-- /#nzb-search //-->
-                <div id="torrent-search" class="component-group">
-                    <div class="component-group-desc-legacy">
-                        <h3>Torrent Search</h3>
-                        <p>How to handle Torrent search results.</p>
-                        <div id="torrent_method_icon" :class="'add-client-icon-' + torrent.method"></div>
-                    </div>
-                    <fieldset class="component-group-list">
-                        <div class="field-pair">
-                            <label for="use_torrents">
-                                <span class="component-title">Search torrents</span>
-                                <span class="component-desc">
-                                    <input type="checkbox" name="use_torrents" id="use_torrents" v-model="torrent.enabled"/>
-                                    <p>enable torrent search providers</p>
-                                </span>
-                            </label>
+                
+                <div id="torrent-search">
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>Torrent Search</h3>
+                            <p>How to handle Torrent search results.</p>
+                            <div id="torrent_method_icon" :class="'add-client-icon-' + clients.torrents.method"></div>
                         </div>
-                        <div v-show="torrent.enabled">
-                            <div class="field-pair">
-                                <label for="torrent_method">
-                                    <span class="component-title">Send .torrent files to:</span>
-                                    <span class="component-desc">
-                                        <select v-model="torrent.method" name="torrent_method" id="torrent_method" class="form-control input-sm">
-                                            <option v-for="(client, name) in clients.torrent" :value="name">{{client.title}}</option>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                
+                                <config-toggle-slider v-model="clients.torrents.enabled" label="Search torrents" id="use_torrents" :explanations="['enable torrent search providers']"></config-toggle-slider>
+                                <div v-show="clients.torrents.enabled">
+                                    
+                                    <config-template label-for="torrent_method" label="Send .torrent files to">
+                                        <select v-model="clients.torrents.method" name="torrent_method" id="torrent_method" class="form-control input-sm">
+                                            <option v-for="(client, name) in clientsConfig.torrent" :value="name">{{client.title}}</option>
                                         </select>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="torrent.method === 'blackhole'">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Black hole folder location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_dir" title="Select .torrent black hole location" :initial-dir="torrent.dir" @update="torrent.dir = $event"></file-browser>
-                                            <div class="clear-left">
-                                                <p><b>.torrent</b> files are stored at this location for external software to find and use</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                            <div v-show="torrent.method !== 'blackhole'">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title" id="host_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} host:port</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_host" id="torrent_host" v-model="torrent.host" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p v-html="clients.torrent[torrent.method].description"></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'transmission'" class="field-pair" id="torrent_rpcurl_option">
-                                    <label>
-                                        <span class="component-title" id="rpcurl_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} RPC URL</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_rpcurl" id="torrent_rpcurl" v-model="torrent.rpcUrl" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p id="rpcurl_desc_">The path without leading and trailing slashes (e.g. transmission)</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://')" class="field-pair" id="torrent_auth_type_option">
-                                    <label>
-                                        <span class="component-title">Http Authentication</span>
-                                        <span class="component-desc">
-                                            <select v-model="torrent.authType" name="torrent_auth_type" id="torrent_auth_type" class="form-control input-sm">
+                                    </config-template>
+                                    
+                                    <div v-if="clients.torrents.method" v-show="clients.torrents.method === 'blackhole'">
+                                        <config-template label-for="torrent_dir" label="Black hole folder location">
+                                            <file-browser name="torrent_dir" title="Select .torrent black hole location" :initial-dir="clients.torrents.dir" @update="clients.torrents.dir = $event"></file-browser>
+                                            <p><b>.torrent</b> files are stored at this location for external software to find and use</p>
+                                        </config-template>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+
+                                    <div v-if="clients.torrents.method" v-show="clients.torrents.method !== 'blackhole'">
+                                        
+                                        <config-textbox v-model="clients.torrents.host" :label="clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title + ' host:port'" id="torrent_host">
+                                            <p v-html="clientsConfig.torrent[clients.torrents.method].description"></p>
+                                        </config-textbox>
+                                        
+                                        <config-textbox v-show="clients.torrents.method === 'transmission'" v-model="clients.torrents.rpcUrl" :label="clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title + ' RPC URL'" id="rpcurl_title">
+                                            <p id="rpcurl_desc_">The path without leading and trailing slashes (e.g. transmission)</p>
+                                        </config-textbox>
+
+                                        <config-template v-show="!authTypeIsDisabled" label-for="torrent_auth_type" label="Http Authentication">
+                                            <select v-model="clients.torrents.authType" name="torrent_auth_type" id="torrent_auth_type" class="form-control input-sm">
                                                 <option v-for="(title, name) in httpAuthTypes" :value="name">{{title}}</option>
                                             </select>
-                                            <p></p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].verifyCertOption" class="field-pair">
-                                    <label for="torrent_verify_cert">
-                                        <span class="component-title">Verify certificate</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_verify_cert" id="torrent_verify_cert" v-model="torrent.verifyCert"/>
+                                        </config-template>
+
+                                        <config-toggle-slider v-show="clientsConfig.torrent[clients.torrents.method].verifyCertOption" v-model="clients.torrents.verifyCert" label="Verify certificate" id="torrent_verify_cert">
                                             <p>Verify SSL certificates for HTTPS requests</p>
-                                            <p v-show="torrent.method === 'deluge'">disable if you get "Deluge: Authentication Error" in your log</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="!['rtorrent', 'deluge'].includes(torrent.method) || (torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://'))" class="field-pair" id="torrent_username_option">
-                                    <label>
-                                        <span class="component-title" id="username_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} username</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_username" id="torrent_username" v-model="torrent.username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method !== 'rtorrent' || (torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://'))" class="field-pair" id="torrent_password_option">
-                                    <label>
-                                        <span class="component-title" id="password_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} password</span>
-                                        <span class="component-desc">
-                                            <input type="password" name="torrent_password" id="torrent_password" v-model="torrent.password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].labelOption" class="field-pair" id="torrent_label_option">
-                                    <label>
-                                        <span class="component-title">Add label to torrent</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_label" id="torrent_label" v-model="torrent.label" class="form-control input-sm input200"/>
-                                            <span v-show="['deluge', 'deluged'].includes(torrent.method)"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: label plugin must be enabled in Deluge clients</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: for qBitTorrent 3.3.1 and up</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'utorrent'">
-                                                <div class="clear-left"><p>Global label for torrents.<br>
-                                                <b>%N:</b> use Series-Name as label (can be used with other text)</p></div>
-                                            </span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].labelAnimeOption" class="field-pair">
-                                    <label>
-                                        <span class="component-title">Add label to torrent for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_label_anime" id="torrent_label_anime" v-model="torrent.labelAnime" class="form-control input-sm input200"/>
-                                            <span v-show="['deluge', 'deluged'].includes(torrent.method)"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: label plugin must be enabled in Deluge clients</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: for qBitTorrent 3.3.1 and up</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'utorrent'">
-                                                <div class="clear-left"><p>Global label for torrents.<br>
-                                                <b>%N:</b> use Series-Name as label (can be used with other text)</p></div>
-                                            </span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].pathOption" class="field-pair" id="torrent_path_option">
-                                    <label>
-                                        <span class="component-title" id="directory_title">Downloaded files location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_path" title="Select downloaded files location" :initial-dir="torrent.path" @update="torrent.path = $event"></file-browser>
-                                            <div class="clear-left"><p>where <span id="torrent_client">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}}</span> will save downloaded files (blank for client default)
-                                                <span v-show="torrent.method === 'downloadstation'"> <b>note:</b> the destination has to be a shared folder for Synology DS</span></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].seedLocationOption" class="field-pair">
-                                    <label>
-                                        <span class="component-title" id="directory_title">Post-Processed seeding torrents location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_seed_location" title="Select torrent seed location" :initial-dir="torrent.seedLocation" @update="torrent.seedLocation = $event"></file-browser>
-                                            <div class="clear-left">
+                                            <p v-show="clients.torrents.method === 'deluge'">disable if you get "Deluge: Authentication Error" in your log</p>
+                                        </config-toggle-slider>
+
+                                        <config-textbox v-show="!torrentUsernameIsDisabled" 
+                                            v-model="clients.torrents.username" :label="(clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title) + ' username'" id="torrent_username" :explanations="['(blank for none)']">
+                                        </config-textbox>
+                                        
+                                        <config-textbox type="password" v-show="!torrentPasswordIsDisabled" 
+                                            v-model="clients.torrents.password" :label="(clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title) + ' password'" id="torrent_password" :explanations="['(blank for none)']">
+                                        </config-textbox>
+                                        
+                                        <div v-show="clientsConfig.torrent[clients.torrents.method].labelOption" id="torrent_label_option">
+                                            <config-textbox v-model="clients.torrents.label" label="Add label to torrent" id="torrent_label">
+                                                <span v-show="['deluge', 'deluged'].includes(clients.torrents.method)">
+                                                    <p>(blank spaces are not allowed)</p>
+                                                    <p>note: label plugin must be enabled in Deluge clients</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
+                                                    <p>note: for qBitTorrent 3.3.1 and up</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'utorrent'">
+                                                    <p>Global label for torrents.<br>
+                                                    <b>%N:</b> use Series-Name as label (can be used with other text)</p>
+                                                </span>
+                                            </config-textbox>
+                                        </div>
+
+                                        <div v-show="clientsConfig.torrent[clients.torrents.method].labelAnimeOption">
+                                            <config-textbox v-model="clients.torrents.labelAnime" label="Add label to torrent for anime" id="torrent_label_anime">
+                                                <span v-show="['deluge', 'deluged'].includes(clients.torrents.method)">
+                                                    <p>(blank spaces are not allowed)</p>
+                                                    <p>note: label plugin must be enabled in Deluge clients</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
+                                                    <p>note: for qBitTorrent 3.3.1 and up</p>
+                                                <span v-show="clients.torrents.method === 'utorrent'">
+                                                    <p>Global label for torrents.<br>
+                                                    <b>%N:</b> use Series-Name as label (can be used with other text)</p>
+                                                </span>
+                                            </config-textbox>
+                                        </div>
+
+                                        <config-template v-show="clientsConfig.torrent[clients.torrents.method].pathOption" label-for="torrent_client" label="Downloaded files location">
+                                                <file-browser name="torrent_path" title="Select downloaded files location" :initial-dir="clients.torrents.path" @update="clients.torrents.path = $event"></file-browser>
+                                                <p>where <span id="torrent_client" v-if="clientsConfig.torrent[clients.torrents.method]">{{clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title}}</span> will save downloaded files (blank for client default)
+                                                    <span v-show="clients.torrents.method === 'downloadstation'"> <b>note:</b> the destination has to be a shared folder for Synology DS</span>
+                                                </p>
+                                        </config-template>
+                                        
+                                        <config-template v-show="clientsConfig.torrent[clients.torrents.method].seedLocationOption" label-for="torrent_seed_location" label="Post-Processed seeding torrents location">
+                                                <file-browser name="torrent_seed_location" title="Select torrent seed location" :initial-dir="clients.torrents.seedLocation" @update="clients.torrents.seedLocation = $event"></file-browser>
                                                 <p>
-                                                    where <span id="torrent_client_seed_path">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}}</span> will move Torrents after Post-Processing<br/>
+                                                    where <span id="torrent_client_seed_path">{{clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title}}</span> will move Torrents after Post-Processing<br/>
                                                     <b>Note:</b> If your Post-Processor method is set to hard/soft link this will move your torrent
                                                     to another location after Post-Processor to prevent reprocessing the same file over and over.
                                                     This feature does a "Set Torrent location" or "Move Torrent" like in client
                                                 </p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].seedTimeOption" class="field-pair" id="torrent_seed_time_option">
-                                    <label>
-                                        <span class="component-title" id="torrent_seed_time_label">{{torrent.method === 'transmission' ? 'Stop seeding when inactive for' : 'Minimum seeding time is'}}</span>
-                                        <span class="component-desc">
-                                            <input type="number" step="1" name="torrent_seed_time" id="torrent_seed_time" v-model="torrent.seedTime" class="form-control input-sm input100" />
-                                            <p>hours. (default: '0' passes blank to client and '-1' passes nothing)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].pausedOption" class="field-pair" id="torrent_paused_option">
-                                    <label>
-                                        <span class="component-title">Start torrent paused</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_paused" id="torrent_paused" v-model="torrent.paused"/>
+                                        </config-template>
+
+                                        <config-textbox-number v-show="clientsConfig.torrent[clients.torrents.method].seedTimeOption" :min="-1" :step="1" v-model.number="clients.torrents.seedTime" :label="clients.torrents.method === 'transmission' ? 'Stop seeding when inactive for' : 'Minimum seeding time is'" id="torrent_seed_time" :explanations="['hours. (default: \'0\' passes blank to client and \'-1\' passes nothing)']"></config-textbox-number>
+
+                                        <config-toggle-slider v-show="clientsConfig.torrent[clients.torrents.method].pausedOption" v-model="clients.torrents.paused" label="Start torrent paused" id="torrent_paused">
                                             <p>add .torrent to client but do <b style="font-weight:900;">not</b> start downloading</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'transmission'" class="field-pair">
-                                    <label>
-                                        <span class="component-title">Allow high bandwidth</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_high_bandwidth" id="torrent_high_bandwidth" v-model="torrent.highBandwidth"/>
-                                            <p>use high bandwidth allocation if priority is high</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="torrent.testStatus" v-html="torrent.testStatus"></div>
-                                <input @click="testTorrentClient" type="button" value="Test Connection" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                        </div><!-- /torrent.enabled //-->
-                    </fieldset>
+                                        </config-toggle-slider>
+
+                                        <config-toggle-slider v-show="clients.torrents.method === 'transmission'" v-model="clients.torrents.highBandwidth" label="Allow high bandwidth" id="torrent_high_bandwidth" :explanations="['use high bandwidth allocation if priority is high']"></config-toggle-slider>
+
+                                        <div class="testNotification" v-show="clients.torrents.testStatus" v-html="clients.torrents.testStatus"></div>
+                                        <input @click="testTorrentClient" type="button" value="Test Connection" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+                                </div><!-- /torrent.enabled //-->
+                            </fieldset>
+                        </div>
+                    </div>
                 </div><!-- /#torrent-search //-->
                 <br>
-                <h6 class="pull-right"><b>All non-absolute folder locations are relative to <span class="path">{{dataDir}}</span></b> </h6>
+                <h6 class="pull-right"><b>All non-absolute folder locations are relative to <span class="path">{{config.dataDir}}</span></b> </h6>
                 <input type="submit" class="btn-medusa pull-left config_submitter button" value="Save Changes" />
             </div><!-- /config-components //-->
         </form>
diff --git a/themes/dark/assets/js/medusa-runtime.js b/themes/dark/assets/js/medusa-runtime.js
index d03b22ddd3..08cf58cf25 100644
--- a/themes/dark/assets/js/medusa-runtime.js
+++ b/themes/dark/assets/js/medusa-runtime.js
@@ -140,7 +140,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n/
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox-number',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: Number,\n      default: 10\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm input75'\n    },\n    min: {\n      type: Number,\n      default: 10\n    },\n    step: {\n      type: Number,\n      default: 1\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', Number(localValue));\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox-number',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: Number,\n      default: 10\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm input75'\n    },\n    min: {\n      type: Number,\n      default: 10\n    },\n    max: {\n      type: Number,\n      default: null\n    },\n    step: {\n      type: Number,\n      default: 1\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', Number(localValue));\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -152,7 +152,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n/
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    type: {\n      type: String,\n      default: 'text'\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm max-input350'\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', localValue);\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    type: {\n      type: String,\n      default: 'text'\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm max-input350'\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', localValue);\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -248,7 +248,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(f
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'select-list',\n  props: {\n    listItems: {\n      type: Array,\n      default: function _default() {\n        return [];\n      },\n      required: true\n    },\n    unique: {\n      type: Boolean,\n      default: true,\n      required: false\n    },\n    csvEnabled: {\n      type: Boolean,\n      default: false,\n      required: false\n    }\n  },\n  data: function data() {\n    return {\n      editItems: [],\n      newItem: '',\n      indexCounter: 0,\n      csv: '',\n      csvMode: this.csvEnabled\n    };\n  },\n  created: function created() {\n    var _this = this;\n\n    /*\n    These are needed in order to test the component,\n    but they break the component in the application:\n     this.editItems = this.sanitize(this.listItems);\n    this.csv = this.editItems.map(item => item.value).join(', ');\n    */\n\n    /**\n     * ListItems property might receive values originating from the API,\n     * that are sometimes not available when rendering.\n     * @TODO: This is not ideal! Maybe we can remove this in the future.\n     */\n    var unwatchProp = this.$watch('listItems', function () {\n      unwatchProp();\n      _this.editItems = _this.sanitize(_this.listItems);\n      _this.csv = _this.editItems.map(function (item) {\n        return item.value;\n      }).join(', ');\n    });\n  },\n  methods: {\n    addItem: function addItem(item) {\n      if (this.unique && this.editItems.find(function (i) {\n        return i.value === item;\n      })) {\n        return;\n      }\n\n      this.editItems.push({\n        id: this.indexCounter,\n        value: item\n      });\n      this.indexCounter += 1;\n    },\n    addNewItem: function addNewItem() {\n      var newItem = this.newItem,\n          editItems = this.editItems;\n\n      if (this.newItem === '') {\n        return;\n      }\n\n      this.addItem(newItem);\n      this.newItem = '';\n      this.$emit('change', editItems);\n    },\n    deleteItem: function deleteItem(item) {\n      this.editItems = this.editItems.filter(function (e) {\n        return e !== item;\n      });\n      this.$refs.newItemInput.focus();\n      this.$emit('change', this.editItems);\n    },\n    removeEmpty: function removeEmpty(item) {\n      return item.value === '' ? this.deleteItem(item) : false;\n    },\n\n    /**\n     * Initially an array of strings is passed, which we'd like to translate to an array of object.\n     * Where the index has been added.\n     * @param {string[]} values - Array of strings.\n     * @returns {Object[]} - An array of objects with the index and value.\n     */\n    sanitize: function sanitize(values) {\n      var _this2 = this;\n\n      if (!values) {\n        return [];\n      }\n\n      return values.map(function (value) {\n        if (typeof value === 'string') {\n          _this2.indexCounter += 1;\n          return {\n            id: _this2.indexCounter - 1,\n            value: value\n          };\n        }\n\n        return value;\n      });\n    },\n\n    /**\n     * Depending on which option is selected, sync the data to the other.\n     * Sync from editItems to a csv (comma separated) field.\n     * Or from csv to editItems.\n     */\n    syncValues: function syncValues() {\n      var _this3 = this;\n\n      if (this.csvMode) {\n        this.editItems = [];\n        this.csv.split(',').forEach(function (value) {\n          // Omit empty strings\n          if (value.trim()) {\n            _this3.addItem(value.trim());\n          }\n        });\n      } else {\n        this.csv = this.editItems.map(function (item) {\n          return item.value;\n        }).join(', ');\n      }\n    },\n\n    /**\n     * When switching between a list of inputs and a csv input\n     * whe're making sure that 1. the data is updated in editItems (which is the source of truth)\n     * and this.csv, which keeps track of the csv.\n     */\n    switchFields: function switchFields() {\n      this.syncValues();\n      this.csvMode = !this.csvMode;\n    }\n  },\n  watch: {\n    csv: function csv() {\n      this.syncValues();\n    },\n    listItems: function listItems() {\n      this.editItems = this.sanitize(this.listItems);\n      this.newItem = '';\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'select-list',\n  props: {\n    listItems: {\n      type: Array,\n      default: function _default() {\n        return [];\n      },\n      required: true\n    },\n    unique: {\n      type: Boolean,\n      default: true,\n      required: false\n    },\n    csvEnabled: {\n      type: Boolean,\n      default: false,\n      required: false\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data: function data() {\n    return {\n      editItems: [],\n      newItem: '',\n      indexCounter: 0,\n      csv: '',\n      csvMode: this.csvEnabled\n    };\n  },\n  created: function created() {\n    var _this = this;\n\n    /*\n    These are needed in order to test the component,\n    but they break the component in the application:\n     this.editItems = this.sanitize(this.listItems);\n    this.csv = this.editItems.map(item => item.value).join(', ');\n    */\n\n    /**\n     * ListItems property might receive values originating from the API,\n     * that are sometimes not available when rendering.\n     * @TODO: This is not ideal! Maybe we can remove this in the future.\n     */\n    var unwatchProp = this.$watch('listItems', function () {\n      unwatchProp();\n      _this.editItems = _this.sanitize(_this.listItems);\n      _this.csv = _this.editItems.map(function (item) {\n        return item.value;\n      }).join(', ');\n    });\n  },\n  methods: {\n    addItem: function addItem(item) {\n      if (this.unique && this.editItems.find(function (i) {\n        return i.value === item;\n      })) {\n        return;\n      }\n\n      this.editItems.push({\n        id: this.indexCounter,\n        value: item\n      });\n      this.indexCounter += 1;\n    },\n    addNewItem: function addNewItem() {\n      var newItem = this.newItem,\n          editItems = this.editItems;\n\n      if (this.newItem === '') {\n        return;\n      }\n\n      this.addItem(newItem);\n      this.newItem = '';\n      this.$emit('change', editItems);\n    },\n    deleteItem: function deleteItem(item) {\n      this.editItems = this.editItems.filter(function (e) {\n        return e !== item;\n      });\n      this.$refs.newItemInput.focus();\n      this.$emit('change', this.editItems);\n    },\n    removeEmpty: function removeEmpty(item) {\n      return item.value === '' ? this.deleteItem(item) : false;\n    },\n\n    /**\n     * Initially an array of strings is passed, which we'd like to translate to an array of object.\n     * Where the index has been added.\n     * @param {string[]} values - Array of strings.\n     * @returns {Object[]} - An array of objects with the index and value.\n     */\n    sanitize: function sanitize(values) {\n      var _this2 = this;\n\n      if (!values) {\n        return [];\n      }\n\n      return values.map(function (value) {\n        if (typeof value === 'string') {\n          _this2.indexCounter += 1;\n          return {\n            id: _this2.indexCounter - 1,\n            value: value\n          };\n        }\n\n        return value;\n      });\n    },\n\n    /**\n     * Depending on which option is selected, sync the data to the other.\n     * Sync from editItems to a csv (comma separated) field.\n     * Or from csv to editItems.\n     */\n    syncValues: function syncValues() {\n      var _this3 = this;\n\n      if (this.csvMode) {\n        this.editItems = [];\n        this.csv.split(',').forEach(function (value) {\n          // Omit empty strings\n          if (value.trim()) {\n            _this3.addItem(value.trim());\n          }\n        });\n      } else {\n        this.csv = this.editItems.map(function (item) {\n          return item.value;\n        }).join(', ');\n      }\n    },\n\n    /**\n     * When switching between a list of inputs and a csv input\n     * whe're making sure that 1. the data is updated in editItems (which is the source of truth)\n     * and this.csv, which keeps track of the csv.\n     */\n    switchFields: function switchFields() {\n      this.syncValues();\n      this.csvMode = !this.csvMode;\n    }\n  },\n  watch: {\n    csv: function csv() {\n      this.syncValues();\n    },\n    listItems: function listItems() {\n      this.editItems = this.sanitize(this.listItems);\n      this.newItem = '';\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -876,7 +876,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox-number-content\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            _c(\n              \"input\",\n              _vm._b(\n                {\n                  directives: [\n                    {\n                      name: \"model\",\n                      rawName: \"v-model\",\n                      value: _vm.localValue,\n                      expression: \"localValue\"\n                    }\n                  ],\n                  attrs: { type: \"number\" },\n                  domProps: { value: _vm.localValue },\n                  on: {\n                    input: [\n                      function($event) {\n                        if ($event.target.composing) {\n                          return\n                        }\n                        _vm.localValue = $event.target.value\n                      },\n                      function($event) {\n                        _vm.updateValue()\n                      }\n                    ]\n                  }\n                },\n                \"input\",\n                {\n                  min: _vm.min,\n                  step: _vm.step,\n                  id: _vm.id,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder\n                },\n                false\n              )\n            ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox-number-content\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            _c(\n              \"input\",\n              _vm._b(\n                {\n                  directives: [\n                    {\n                      name: \"model\",\n                      rawName: \"v-model\",\n                      value: _vm.localValue,\n                      expression: \"localValue\"\n                    }\n                  ],\n                  attrs: { type: \"number\" },\n                  domProps: { value: _vm.localValue },\n                  on: {\n                    input: [\n                      function($event) {\n                        if ($event.target.composing) {\n                          return\n                        }\n                        _vm.localValue = $event.target.value\n                      },\n                      function($event) {\n                        _vm.updateValue()\n                      }\n                    ]\n                  }\n                },\n                \"input\",\n                {\n                  min: _vm.min,\n                  max: _vm.max,\n                  step: _vm.step,\n                  id: _vm.id,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder,\n                  disabled: _vm.disabled\n                },\n                false\n              )\n            ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -888,7 +888,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            {\n              id: _vm.id,\n              type: _vm.type,\n              name: _vm.id,\n              class: _vm.inputClass,\n              placeholder: _vm.placeholder\n            }.type === \"checkbox\"\n              ? _c(\n                  \"input\",\n                  _vm._b(\n                    {\n                      directives: [\n                        {\n                          name: \"model\",\n                          rawName: \"v-model\",\n                          value: _vm.localValue,\n                          expression: \"localValue\"\n                        }\n                      ],\n                      attrs: { type: \"checkbox\" },\n                      domProps: {\n                        checked: Array.isArray(_vm.localValue)\n                          ? _vm._i(_vm.localValue, null) > -1\n                          : _vm.localValue\n                      },\n                      on: {\n                        input: function($event) {\n                          _vm.updateValue()\n                        },\n                        change: function($event) {\n                          var $$a = _vm.localValue,\n                            $$el = $event.target,\n                            $$c = $$el.checked ? true : false\n                          if (Array.isArray($$a)) {\n                            var $$v = null,\n                              $$i = _vm._i($$a, $$v)\n                            if ($$el.checked) {\n                              $$i < 0 && (_vm.localValue = $$a.concat([$$v]))\n                            } else {\n                              $$i > -1 &&\n                                (_vm.localValue = $$a\n                                  .slice(0, $$i)\n                                  .concat($$a.slice($$i + 1)))\n                            }\n                          } else {\n                            _vm.localValue = $$c\n                          }\n                        }\n                      }\n                    },\n                    \"input\",\n                    {\n                      id: _vm.id,\n                      type: _vm.type,\n                      name: _vm.id,\n                      class: _vm.inputClass,\n                      placeholder: _vm.placeholder\n                    },\n                    false\n                  )\n                )\n              : {\n                  id: _vm.id,\n                  type: _vm.type,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder\n                }.type === \"radio\"\n                ? _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: { type: \"radio\" },\n                        domProps: { checked: _vm._q(_vm.localValue, null) },\n                        on: {\n                          input: function($event) {\n                            _vm.updateValue()\n                          },\n                          change: function($event) {\n                            _vm.localValue = null\n                          }\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder\n                      },\n                      false\n                    )\n                  )\n                : _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: {\n                          type: {\n                            id: _vm.id,\n                            type: _vm.type,\n                            name: _vm.id,\n                            class: _vm.inputClass,\n                            placeholder: _vm.placeholder\n                          }.type\n                        },\n                        domProps: { value: _vm.localValue },\n                        on: {\n                          input: [\n                            function($event) {\n                              if ($event.target.composing) {\n                                return\n                              }\n                              _vm.localValue = $event.target.value\n                            },\n                            function($event) {\n                              _vm.updateValue()\n                            }\n                          ]\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder\n                      },\n                      false\n                    )\n                  ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            {\n              id: _vm.id,\n              type: _vm.type,\n              name: _vm.id,\n              class: _vm.inputClass,\n              placeholder: _vm.placeholder,\n              disabled: _vm.disabled\n            }.type === \"checkbox\"\n              ? _c(\n                  \"input\",\n                  _vm._b(\n                    {\n                      directives: [\n                        {\n                          name: \"model\",\n                          rawName: \"v-model\",\n                          value: _vm.localValue,\n                          expression: \"localValue\"\n                        }\n                      ],\n                      attrs: { type: \"checkbox\" },\n                      domProps: {\n                        checked: Array.isArray(_vm.localValue)\n                          ? _vm._i(_vm.localValue, null) > -1\n                          : _vm.localValue\n                      },\n                      on: {\n                        input: function($event) {\n                          _vm.updateValue()\n                        },\n                        change: function($event) {\n                          var $$a = _vm.localValue,\n                            $$el = $event.target,\n                            $$c = $$el.checked ? true : false\n                          if (Array.isArray($$a)) {\n                            var $$v = null,\n                              $$i = _vm._i($$a, $$v)\n                            if ($$el.checked) {\n                              $$i < 0 && (_vm.localValue = $$a.concat([$$v]))\n                            } else {\n                              $$i > -1 &&\n                                (_vm.localValue = $$a\n                                  .slice(0, $$i)\n                                  .concat($$a.slice($$i + 1)))\n                            }\n                          } else {\n                            _vm.localValue = $$c\n                          }\n                        }\n                      }\n                    },\n                    \"input\",\n                    {\n                      id: _vm.id,\n                      type: _vm.type,\n                      name: _vm.id,\n                      class: _vm.inputClass,\n                      placeholder: _vm.placeholder,\n                      disabled: _vm.disabled\n                    },\n                    false\n                  )\n                )\n              : {\n                  id: _vm.id,\n                  type: _vm.type,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder,\n                  disabled: _vm.disabled\n                }.type === \"radio\"\n                ? _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: { type: \"radio\" },\n                        domProps: { checked: _vm._q(_vm.localValue, null) },\n                        on: {\n                          input: function($event) {\n                            _vm.updateValue()\n                          },\n                          change: function($event) {\n                            _vm.localValue = null\n                          }\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder,\n                        disabled: _vm.disabled\n                      },\n                      false\n                    )\n                  )\n                : _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: {\n                          type: {\n                            id: _vm.id,\n                            type: _vm.type,\n                            name: _vm.id,\n                            class: _vm.inputClass,\n                            placeholder: _vm.placeholder,\n                            disabled: _vm.disabled\n                          }.type\n                        },\n                        domProps: { value: _vm.localValue },\n                        on: {\n                          input: [\n                            function($event) {\n                              if ($event.target.composing) {\n                                return\n                              }\n                              _vm.localValue = $event.target.value\n                            },\n                            function($event) {\n                              _vm.updateValue()\n                            }\n                          ]\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder,\n                        disabled: _vm.disabled\n                      },\n                      false\n                    )\n                  ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -984,7 +984,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"select-list max-width\" }, [\n    _c(\"i\", {\n      staticClass: \"switch-input glyphicon glyphicon-refresh\",\n      attrs: { title: \"Switch between a list and comma separated values\" },\n      on: {\n        click: function($event) {\n          _vm.switchFields()\n        }\n      }\n    }),\n    _vm._v(\" \"),\n    !_vm.csvMode\n      ? _c(\n          \"ul\",\n          [\n            _vm._l(_vm.editItems, function(item) {\n              return _c(\"li\", { key: item.id }, [\n                _c(\"div\", { staticClass: \"input-group\" }, [\n                  _c(\"input\", {\n                    directives: [\n                      {\n                        name: \"model\",\n                        rawName: \"v-model\",\n                        value: item.value,\n                        expression: \"item.value\"\n                      }\n                    ],\n                    staticClass: \"form-control input-sm\",\n                    attrs: { type: \"text\" },\n                    domProps: { value: item.value },\n                    on: {\n                      input: [\n                        function($event) {\n                          if ($event.target.composing) {\n                            return\n                          }\n                          _vm.$set(item, \"value\", $event.target.value)\n                        },\n                        function($event) {\n                          _vm.removeEmpty(item)\n                        }\n                      ]\n                    }\n                  }),\n                  _vm._v(\" \"),\n                  _c(\n                    \"div\",\n                    {\n                      staticClass: \"input-group-btn\",\n                      on: {\n                        click: function($event) {\n                          _vm.deleteItem(item)\n                        }\n                      }\n                    },\n                    [_vm._m(0, true)]\n                  )\n                ])\n              ])\n            }),\n            _vm._v(\" \"),\n            _c(\"div\", { staticClass: \"new-item\" }, [\n              _c(\"div\", { staticClass: \"input-group\" }, [\n                _c(\"input\", {\n                  directives: [\n                    {\n                      name: \"model\",\n                      rawName: \"v-model\",\n                      value: _vm.newItem,\n                      expression: \"newItem\"\n                    }\n                  ],\n                  ref: \"newItemInput\",\n                  staticClass: \"form-control input-sm\",\n                  attrs: {\n                    type: \"text\",\n                    placeholder: \"add new values per line\"\n                  },\n                  domProps: { value: _vm.newItem },\n                  on: {\n                    input: function($event) {\n                      if ($event.target.composing) {\n                        return\n                      }\n                      _vm.newItem = $event.target.value\n                    }\n                  }\n                }),\n                _vm._v(\" \"),\n                _c(\n                  \"div\",\n                  {\n                    staticClass: \"input-group-btn\",\n                    on: {\n                      click: function($event) {\n                        _vm.addNewItem()\n                      }\n                    }\n                  },\n                  [_vm._m(1)]\n                )\n              ])\n            ]),\n            _vm._v(\" \"),\n            _vm.newItem.length > 0\n              ? _c(\"div\", { staticClass: \"new-item-help\" }, [\n                  _vm._v(\"\\n            Click \"),\n                  _c(\"i\", { staticClass: \"glyphicon glyphicon-plus\" }),\n                  _vm._v(\" to finish adding the value.\\n        \")\n                ])\n              : _vm._e()\n          ],\n          2\n        )\n      : _c(\"div\", { staticClass: \"csv\" }, [\n          _c(\"input\", {\n            directives: [\n              {\n                name: \"model\",\n                rawName: \"v-model\",\n                value: _vm.csv,\n                expression: \"csv\"\n              }\n            ],\n            staticClass: \"form-control input-sm\",\n            attrs: { type: \"text\", placeholder: \"add values comma separated\" },\n            domProps: { value: _vm.csv },\n            on: {\n              input: function($event) {\n                if ($event.target.composing) {\n                  return\n                }\n                _vm.csv = $event.target.value\n              }\n            }\n          })\n        ])\n  ])\n}\nvar staticRenderFns = [\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-remove\",\n          attrs: { title: \"Remove\" }\n        })\n      ]\n    )\n  },\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-plus\",\n          attrs: { title: \"Add\" }\n        })\n      ]\n    )\n  }\n]\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    _vm._b(\n      { staticClass: \"select-list max-width\" },\n      \"div\",\n      { disabled: _vm.disabled },\n      false\n    ),\n    [\n      _c(\"i\", {\n        staticClass: \"switch-input glyphicon glyphicon-refresh\",\n        attrs: { title: \"Switch between a list and comma separated values\" },\n        on: {\n          click: function($event) {\n            _vm.switchFields()\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      !_vm.csvMode\n        ? _c(\n            \"ul\",\n            [\n              _vm._l(_vm.editItems, function(item) {\n                return _c(\"li\", { key: item.id }, [\n                  _c(\"div\", { staticClass: \"input-group\" }, [\n                    _c(\"input\", {\n                      directives: [\n                        {\n                          name: \"model\",\n                          rawName: \"v-model\",\n                          value: item.value,\n                          expression: \"item.value\"\n                        }\n                      ],\n                      staticClass: \"form-control input-sm\",\n                      attrs: { type: \"text\" },\n                      domProps: { value: item.value },\n                      on: {\n                        input: [\n                          function($event) {\n                            if ($event.target.composing) {\n                              return\n                            }\n                            _vm.$set(item, \"value\", $event.target.value)\n                          },\n                          function($event) {\n                            _vm.removeEmpty(item)\n                          }\n                        ]\n                      }\n                    }),\n                    _vm._v(\" \"),\n                    _c(\n                      \"div\",\n                      {\n                        staticClass: \"input-group-btn\",\n                        on: {\n                          click: function($event) {\n                            _vm.deleteItem(item)\n                          }\n                        }\n                      },\n                      [_vm._m(0, true)]\n                    )\n                  ])\n                ])\n              }),\n              _vm._v(\" \"),\n              _c(\"div\", { staticClass: \"new-item\" }, [\n                _c(\"div\", { staticClass: \"input-group\" }, [\n                  _c(\"input\", {\n                    directives: [\n                      {\n                        name: \"model\",\n                        rawName: \"v-model\",\n                        value: _vm.newItem,\n                        expression: \"newItem\"\n                      }\n                    ],\n                    ref: \"newItemInput\",\n                    staticClass: \"form-control input-sm\",\n                    attrs: {\n                      type: \"text\",\n                      placeholder: \"add new values per line\"\n                    },\n                    domProps: { value: _vm.newItem },\n                    on: {\n                      input: function($event) {\n                        if ($event.target.composing) {\n                          return\n                        }\n                        _vm.newItem = $event.target.value\n                      }\n                    }\n                  }),\n                  _vm._v(\" \"),\n                  _c(\n                    \"div\",\n                    {\n                      staticClass: \"input-group-btn\",\n                      on: {\n                        click: function($event) {\n                          _vm.addNewItem()\n                        }\n                      }\n                    },\n                    [_vm._m(1)]\n                  )\n                ])\n              ]),\n              _vm._v(\" \"),\n              _vm.newItem.length > 0\n                ? _c(\"div\", { staticClass: \"new-item-help\" }, [\n                    _vm._v(\"\\n            Click \"),\n                    _c(\"i\", { staticClass: \"glyphicon glyphicon-plus\" }),\n                    _vm._v(\" to finish adding the value.\\n        \")\n                  ])\n                : _vm._e()\n            ],\n            2\n          )\n        : _c(\"div\", { staticClass: \"csv\" }, [\n            _c(\"input\", {\n              directives: [\n                {\n                  name: \"model\",\n                  rawName: \"v-model\",\n                  value: _vm.csv,\n                  expression: \"csv\"\n                }\n              ],\n              staticClass: \"form-control input-sm\",\n              attrs: {\n                type: \"text\",\n                placeholder: \"add values comma separated\"\n              },\n              domProps: { value: _vm.csv },\n              on: {\n                input: function($event) {\n                  if ($event.target.composing) {\n                    return\n                  }\n                  _vm.csv = $event.target.value\n                }\n              }\n            })\n          ])\n    ]\n  )\n}\nvar staticRenderFns = [\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-remove\",\n          attrs: { title: \"Remove\" }\n        })\n      ]\n    )\n  },\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-plus\",\n          attrs: { title: \"Add\" }\n        })\n      ]\n    )\n  }\n]\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -2956,7 +2956,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue_
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue-native-websocket */ \"./node_modules/vue-native-websocket/dist/build.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules */ \"./src/store/modules/index.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./mutation-types */ \"./src/store/mutation-types.js\");\n\n\n\n\n\nvar Store = vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Store;\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nvar store = new Store({\n  modules: {\n    auth: _modules__WEBPACK_IMPORTED_MODULE_3__[\"auth\"],\n    config: _modules__WEBPACK_IMPORTED_MODULE_3__[\"config\"],\n    defaults: _modules__WEBPACK_IMPORTED_MODULE_3__[\"defaults\"],\n    metadata: _modules__WEBPACK_IMPORTED_MODULE_3__[\"metadata\"],\n    notifications: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifications\"],\n    notifiers: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifiers\"],\n    qualities: _modules__WEBPACK_IMPORTED_MODULE_3__[\"qualities\"],\n    shows: _modules__WEBPACK_IMPORTED_MODULE_3__[\"shows\"],\n    socket: _modules__WEBPACK_IMPORTED_MODULE_3__[\"socket\"],\n    statuses: _modules__WEBPACK_IMPORTED_MODULE_3__[\"statuses\"]\n  },\n  state: {},\n  mutations: {},\n  getters: {},\n  actions: {}\n}); // Keep as a non-arrow function for `this` context.\n\nvar passToStoreHandler = function passToStoreHandler(eventName, event, next) {\n  var target = eventName.toUpperCase();\n  var eventData = event.data;\n\n  if (target === 'SOCKET_ONMESSAGE') {\n    var message = JSON.parse(eventData);\n    var data = message.data,\n        _event = message.event; // Show the notification to the user\n\n    if (_event === 'notification') {\n      var body = data.body,\n          hash = data.hash,\n          type = data.type,\n          title = data.title;\n      window.displayNotification(type, title, body, hash);\n    } else if (_event === 'configUpdated') {\n      var section = data.section,\n          _config = data.config;\n      this.store.dispatch('updateConfig', {\n        section: section,\n        config: _config\n      });\n    } else {\n      window.displayNotification('info', _event, data);\n    }\n  } // Resume normal 'passToStore' handling\n\n\n  next(eventName, event);\n};\n\nvar websocketUrl = function () {\n  var _window$location = window.location,\n      protocol = _window$location.protocol,\n      host = _window$location.host;\n  var proto = protocol === 'https:' ? 'wss:' : 'ws:';\n  var WSMessageUrl = '/ui';\n  var webRoot = document.body.getAttribute('web-root');\n  return \"\".concat(proto, \"//\").concat(host).concat(webRoot, \"/ws\").concat(WSMessageUrl);\n}();\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default.a, websocketUrl, {\n  store: store,\n  format: 'json',\n  reconnection: true,\n  // (Boolean) whether to reconnect automatically (false)\n  reconnectionAttempts: 2,\n  // (Number) number of reconnection attempts before giving up (Infinity),\n  reconnectionDelay: 1000,\n  // (Number) how long to initially wait before attempting a new (1000)\n  passToStoreHandler: passToStoreHandler,\n  // (Function|<false-y>) Handler for events triggered by the WebSocket (false)\n  mutations: {\n    SOCKET_ONOPEN: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONOPEN\"],\n    SOCKET_ONCLOSE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONCLOSE\"],\n    SOCKET_ONERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONERROR\"],\n    SOCKET_ONMESSAGE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONMESSAGE\"],\n    SOCKET_RECONNECT: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT\"],\n    SOCKET_RECONNECT_ERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT_ERROR\"]\n  }\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (store);\n\n//# sourceURL=webpack:///./src/store/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue-native-websocket */ \"./node_modules/vue-native-websocket/dist/build.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules */ \"./src/store/modules/index.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./mutation-types */ \"./src/store/mutation-types.js\");\n\n\n\n\n\nvar Store = vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Store;\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nvar store = new Store({\n  modules: {\n    auth: _modules__WEBPACK_IMPORTED_MODULE_3__[\"auth\"],\n    clients: _modules__WEBPACK_IMPORTED_MODULE_3__[\"clients\"],\n    config: _modules__WEBPACK_IMPORTED_MODULE_3__[\"config\"],\n    defaults: _modules__WEBPACK_IMPORTED_MODULE_3__[\"defaults\"],\n    metadata: _modules__WEBPACK_IMPORTED_MODULE_3__[\"metadata\"],\n    notifications: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifications\"],\n    notifiers: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifiers\"],\n    qualities: _modules__WEBPACK_IMPORTED_MODULE_3__[\"qualities\"],\n    search: _modules__WEBPACK_IMPORTED_MODULE_3__[\"search\"],\n    shows: _modules__WEBPACK_IMPORTED_MODULE_3__[\"shows\"],\n    socket: _modules__WEBPACK_IMPORTED_MODULE_3__[\"socket\"],\n    statuses: _modules__WEBPACK_IMPORTED_MODULE_3__[\"statuses\"]\n  },\n  state: {},\n  mutations: {},\n  getters: {},\n  actions: {}\n}); // Keep as a non-arrow function for `this` context.\n\nvar passToStoreHandler = function passToStoreHandler(eventName, event, next) {\n  var target = eventName.toUpperCase();\n  var eventData = event.data;\n\n  if (target === 'SOCKET_ONMESSAGE') {\n    var message = JSON.parse(eventData);\n    var data = message.data,\n        _event = message.event; // Show the notification to the user\n\n    if (_event === 'notification') {\n      var body = data.body,\n          hash = data.hash,\n          type = data.type,\n          title = data.title;\n      window.displayNotification(type, title, body, hash);\n    } else if (_event === 'configUpdated') {\n      var section = data.section,\n          _config = data.config;\n      this.store.dispatch('updateConfig', {\n        section: section,\n        config: _config\n      });\n    } else {\n      window.displayNotification('info', _event, data);\n    }\n  } // Resume normal 'passToStore' handling\n\n\n  next(eventName, event);\n};\n\nvar websocketUrl = function () {\n  var _window$location = window.location,\n      protocol = _window$location.protocol,\n      host = _window$location.host;\n  var proto = protocol === 'https:' ? 'wss:' : 'ws:';\n  var WSMessageUrl = '/ui';\n  var webRoot = document.body.getAttribute('web-root');\n  return \"\".concat(proto, \"//\").concat(host).concat(webRoot, \"/ws\").concat(WSMessageUrl);\n}();\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default.a, websocketUrl, {\n  store: store,\n  format: 'json',\n  reconnection: true,\n  // (Boolean) whether to reconnect automatically (false)\n  reconnectionAttempts: 2,\n  // (Number) number of reconnection attempts before giving up (Infinity),\n  reconnectionDelay: 1000,\n  // (Number) how long to initially wait before attempting a new (1000)\n  passToStoreHandler: passToStoreHandler,\n  // (Function|<false-y>) Handler for events triggered by the WebSocket (false)\n  mutations: {\n    SOCKET_ONOPEN: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONOPEN\"],\n    SOCKET_ONCLOSE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONCLOSE\"],\n    SOCKET_ONERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONERROR\"],\n    SOCKET_ONMESSAGE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONMESSAGE\"],\n    SOCKET_RECONNECT: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT\"],\n    SOCKET_RECONNECT_ERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT_ERROR\"]\n  }\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (store);\n\n//# sourceURL=webpack:///./src/store/index.js?");
 
 /***/ }),
 
@@ -2972,6 +2972,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mut
 
 /***/ }),
 
+/***/ "./src/store/modules/clients.js":
+/*!**************************************!*\
+  !*** ./src/store/modules/clients.js ***!
+  \**************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  torrents: {\n    authType: null,\n    dir: null,\n    enabled: null,\n    highBandwidth: null,\n    host: null,\n    label: null,\n    labelAnime: null,\n    method: null,\n    path: null,\n    paused: null,\n    rpcurl: null,\n    seedLocation: null,\n    seedTime: null,\n    username: null,\n    verifySSL: null,\n    testStatus: 'Click below to test'\n  },\n  nzb: {\n    enabled: null,\n    method: null,\n    nzbget: {\n      category: null,\n      categoryAnime: null,\n      categoryAnimeBacklog: null,\n      categoryBacklog: null,\n      host: null,\n      priority: null,\n      useHttps: null,\n      username: null,\n      testStatus: 'Click below to test'\n    },\n    sabnzbd: {\n      category: null,\n      forced: null,\n      categoryAnime: null,\n      categoryBacklog: null,\n      categoryAnimeBacklog: null,\n      host: null,\n      username: null,\n      password: null,\n      apiKey: null,\n      testStatus: 'Click below to test'\n    }\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_0__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'clients') {\n    state = Object.assign(state, config);\n  }\n});\n\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/clients.js?");
+
+/***/ }),
+
 /***/ "./src/store/modules/config.js":
 /*!*************************************!*\
   !*** ./src/store/modules/config.js ***!
@@ -2980,7 +2992,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__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../api */ \"./src/api.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  wikiUrl: null,\n  donationsUrl: null,\n  localUser: null,\n  posterSortdir: null,\n  locale: null,\n  themeName: null,\n  selectedRootIndex: null,\n  webRoot: null,\n  namingForceFolders: null,\n  cacheDir: null,\n  databaseVersion: {\n    major: null,\n    minor: null\n  },\n  programDir: null,\n  dataDir: null,\n  animeSplitHomeInTabs: null,\n  torrents: {\n    authType: null,\n    dir: null,\n    enabled: null,\n    highBandwidth: null,\n    host: null,\n    label: null,\n    labelAnime: null,\n    method: null,\n    path: null,\n    paused: null,\n    rpcurl: null,\n    seedLocation: null,\n    seedTime: null,\n    username: null,\n    verifySSL: null\n  },\n  layout: {\n    show: {\n      specials: null,\n      showListOrder: [],\n      allSeasons: null\n    },\n    home: null,\n    history: null,\n    schedule: null\n  },\n  dbPath: null,\n  nzb: {\n    enabled: null,\n    method: null,\n    nzbget: {\n      category: null,\n      categoryAnime: null,\n      categoryAnimeBacklog: null,\n      categoryBacklog: null,\n      host: null,\n      priority: null,\n      useHttps: null,\n      username: null\n    },\n    sabnzbd: {\n      category: null,\n      forced: null,\n      categoryAnime: null,\n      categoryBacklog: null,\n      categoryAnimeBacklog: null,\n      host: null,\n      username: null\n    }\n  },\n  configFile: null,\n  fanartBackground: null,\n  trimZero: null,\n  animeSplitHome: null,\n  gitUsername: null,\n  branch: null,\n  commitHash: null,\n  indexers: {\n    config: {\n      main: {\n        externalMappings: {},\n        statusMap: {},\n        traktIndexers: {},\n        validLanguages: [],\n        langabbvToId: {}\n      },\n      indexers: {\n        tvdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tmdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tvmaze: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        }\n      }\n    }\n  },\n  sourceUrl: null,\n  rootDirs: [],\n  fanartBackgroundOpacity: null,\n  appArgs: [],\n  comingEpsDisplayPaused: null,\n  sortArticle: null,\n  timePreset: null,\n  subtitles: {\n    enabled: null\n  },\n  fuzzyDating: null,\n  backlogOverview: {\n    status: null,\n    period: null\n  },\n  posterSortby: null,\n  news: {\n    lastRead: null,\n    latest: null,\n    unread: null\n  },\n  logs: {\n    loggingLevels: {},\n    numErrors: null,\n    numWarnings: null\n  },\n  failedDownloads: {\n    enabled: null,\n    deleteFailed: null\n  },\n  postProcessing: {\n    naming: {\n      pattern: null,\n      multiEp: null,\n      enableCustomNamingSports: null,\n      enableCustomNamingAirByDate: null,\n      patternSports: null,\n      patternAirByDate: null,\n      enableCustomNamingAnime: null,\n      patternAnime: null,\n      animeMultiEp: null,\n      animeNamingType: null,\n      stripYear: null\n    },\n    showDownloadDir: null,\n    processAutomatically: null,\n    processMethod: null,\n    deleteRarContent: null,\n    unpack: null,\n    noDelete: null,\n    reflinkAvailable: null,\n    postponeIfSyncFiles: null,\n    autoPostprocessorFrequency: 10,\n    airdateEpisodes: null,\n    moveAssociatedFiles: null,\n    allowedExtensions: [],\n    addShowsWithoutDir: null,\n    createMissingShowDirs: null,\n    renameEpisodes: null,\n    postponeIfNoSubs: null,\n    nfoRename: null,\n    syncFiles: [],\n    fileTimestampTimezone: 'local',\n    extraScripts: [],\n    extraScriptsUrl: null,\n    multiEpStrings: {}\n  },\n  sslVersion: null,\n  pythonVersion: null,\n  comingEpsSort: null,\n  githubUrl: null,\n  datePreset: null,\n  subtitlesMulti: null,\n  pid: null,\n  os: null,\n  anonRedirect: null,\n  logDir: null,\n  recentShows: [],\n  showDefaults: {\n    status: null,\n    statusAfter: null,\n    quality: null,\n    subtitles: null,\n    seasonFolders: null,\n    anime: null,\n    scene: null\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'main') {\n    state = Object.assign(state, config);\n  }\n});\n\nvar getters = {\n  layout: function layout(state) {\n    return function (layout) {\n      return state.layout[layout];\n    };\n  }\n};\nvar actions = {\n  getConfig: function getConfig(context, section) {\n    var commit = context.commit;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].get('/config/' + (section || '')).then(function (res) {\n      if (section) {\n        var config = res.data;\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n        return config;\n      }\n\n      var sections = res.data;\n      Object.keys(sections).forEach(function (section) {\n        var config = sections[section];\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n      });\n      return sections;\n    });\n  },\n  setConfig: function setConfig(context, _ref2) {\n    var section = _ref2.section,\n        config = _ref2.config;\n\n    if (section !== 'main') {\n      return;\n    } // If an empty config object was passed, use the current state config\n\n\n    config = Object.keys(config).length === 0 ? context.state : config;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/' + section, config);\n  },\n  updateConfig: function updateConfig(context, _ref3) {\n    var section = _ref3.section,\n        config = _ref3.config;\n    var commit = context.commit;\n    return commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n      section: section,\n      config: config\n    });\n  },\n  setLayout: function setLayout(context, _ref4) {\n    var page = _ref4.page,\n        layout = _ref4.layout;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/main', {\n      layout: _defineProperty({}, page, layout)\n    }).then(function () {\n      setTimeout(function () {\n        // For now we reload the page since the layouts use python still\n        location.reload();\n      }, 500);\n    });\n  }\n};\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/config.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../api */ \"./src/api.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  wikiUrl: null,\n  donationsUrl: null,\n  localUser: null,\n  posterSortdir: null,\n  locale: null,\n  themeName: null,\n  selectedRootIndex: null,\n  webRoot: null,\n  namingForceFolders: null,\n  cacheDir: null,\n  databaseVersion: {\n    major: null,\n    minor: null\n  },\n  programDir: null,\n  dataDir: null,\n  animeSplitHomeInTabs: null,\n  torrents: {\n    authType: null,\n    dir: null,\n    enabled: null,\n    highBandwidth: null,\n    host: null,\n    label: null,\n    labelAnime: null,\n    method: null,\n    path: null,\n    paused: null,\n    rpcurl: null,\n    seedLocation: null,\n    seedTime: null,\n    username: null,\n    verifySSL: null\n  },\n  layout: {\n    show: {\n      specials: null,\n      showListOrder: [],\n      allSeasons: null\n    },\n    home: null,\n    history: null,\n    schedule: null\n  },\n  dbPath: null,\n  nzb: {\n    enabled: null,\n    method: null,\n    nzbget: {\n      category: null,\n      categoryAnime: null,\n      categoryAnimeBacklog: null,\n      categoryBacklog: null,\n      host: null,\n      priority: null,\n      useHttps: null,\n      username: null\n    },\n    sabnzbd: {\n      category: null,\n      forced: null,\n      categoryAnime: null,\n      categoryBacklog: null,\n      categoryAnimeBacklog: null,\n      host: null,\n      username: null,\n      password: null,\n      apiKey: null\n    }\n  },\n  configFile: null,\n  fanartBackground: null,\n  trimZero: null,\n  animeSplitHome: null,\n  gitUsername: null,\n  branch: null,\n  commitHash: null,\n  indexers: {\n    config: {\n      main: {\n        externalMappings: {},\n        statusMap: {},\n        traktIndexers: {},\n        validLanguages: [],\n        langabbvToId: {}\n      },\n      indexers: {\n        tvdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tmdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tvmaze: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        }\n      }\n    }\n  },\n  sourceUrl: null,\n  rootDirs: [],\n  fanartBackgroundOpacity: null,\n  appArgs: [],\n  comingEpsDisplayPaused: null,\n  sortArticle: null,\n  timePreset: null,\n  subtitles: {\n    enabled: null\n  },\n  fuzzyDating: null,\n  backlogOverview: {\n    status: null,\n    period: null\n  },\n  posterSortby: null,\n  news: {\n    lastRead: null,\n    latest: null,\n    unread: null\n  },\n  logs: {\n    loggingLevels: {},\n    numErrors: null,\n    numWarnings: null\n  },\n  failedDownloads: {\n    enabled: null,\n    deleteFailed: null\n  },\n  postProcessing: {\n    naming: {\n      pattern: null,\n      multiEp: null,\n      enableCustomNamingSports: null,\n      enableCustomNamingAirByDate: null,\n      patternSports: null,\n      patternAirByDate: null,\n      enableCustomNamingAnime: null,\n      patternAnime: null,\n      animeMultiEp: null,\n      animeNamingType: null,\n      stripYear: null\n    },\n    showDownloadDir: null,\n    processAutomatically: null,\n    processMethod: null,\n    deleteRarContent: null,\n    unpack: null,\n    noDelete: null,\n    reflinkAvailable: null,\n    postponeIfSyncFiles: null,\n    autoPostprocessorFrequency: 10,\n    airdateEpisodes: null,\n    moveAssociatedFiles: null,\n    allowedExtensions: [],\n    addShowsWithoutDir: null,\n    createMissingShowDirs: null,\n    renameEpisodes: null,\n    postponeIfNoSubs: null,\n    nfoRename: null,\n    syncFiles: [],\n    fileTimestampTimezone: 'local',\n    extraScripts: [],\n    extraScriptsUrl: null,\n    multiEpStrings: {}\n  },\n  sslVersion: null,\n  pythonVersion: null,\n  comingEpsSort: null,\n  githubUrl: null,\n  datePreset: null,\n  subtitlesMulti: null,\n  pid: null,\n  os: null,\n  anonRedirect: null,\n  logDir: null,\n  recentShows: [],\n  showDefaults: {\n    status: null,\n    statusAfter: null,\n    quality: null,\n    subtitles: null,\n    seasonFolders: null,\n    anime: null,\n    scene: null\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'main') {\n    state = Object.assign(state, config);\n  }\n});\n\nvar getters = {\n  layout: function layout(state) {\n    return function (layout) {\n      return state.layout[layout];\n    };\n  }\n};\nvar actions = {\n  getConfig: function getConfig(context, section) {\n    var commit = context.commit;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].get('/config/' + (section || '')).then(function (res) {\n      if (section) {\n        var config = res.data;\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n        return config;\n      }\n\n      var sections = res.data;\n      Object.keys(sections).forEach(function (section) {\n        var config = sections[section];\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n      });\n      return sections;\n    });\n  },\n  setConfig: function setConfig(context, _ref2) {\n    var section = _ref2.section,\n        config = _ref2.config;\n\n    if (section !== 'main') {\n      return;\n    } // If an empty config object was passed, use the current state config\n\n\n    config = Object.keys(config).length === 0 ? context.state : config;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/' + section, config);\n  },\n  updateConfig: function updateConfig(context, _ref3) {\n    var section = _ref3.section,\n        config = _ref3.config;\n    var commit = context.commit;\n    return commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n      section: section,\n      config: config\n    });\n  },\n  setLayout: function setLayout(context, _ref4) {\n    var page = _ref4.page,\n        layout = _ref4.layout;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/main', {\n      layout: _defineProperty({}, page, layout)\n    }).then(function () {\n      setTimeout(function () {\n        // For now we reload the page since the layouts use python still\n        location.reload();\n      }, 500);\n    });\n  }\n};\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/config.js?");
 
 /***/ }),
 
@@ -3000,11 +3012,11 @@ eval("__webpack_require__.r(__webpack_exports__);\nvar state = {\n  show: {\n
 /*!************************************!*\
   !*** ./src/store/modules/index.js ***!
   \************************************/
-/*! exports provided: auth, config, defaults, metadata, notifications, notifiers, qualities, shows, socket, statuses */
+/*! exports provided: auth, clients, config, defaults, metadata, notifications, notifiers, qualities, shows, search, socket, statuses */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _auth__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./auth */ \"./src/store/modules/auth.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"auth\", function() { return _auth__WEBPACK_IMPORTED_MODULE_0__[\"default\"]; });\n\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./config */ \"./src/store/modules/config.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"config\", function() { return _config__WEBPACK_IMPORTED_MODULE_1__[\"default\"]; });\n\n/* harmony import */ var _defaults__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./defaults */ \"./src/store/modules/defaults.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"defaults\", function() { return _defaults__WEBPACK_IMPORTED_MODULE_2__[\"default\"]; });\n\n/* harmony import */ var _metadata__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./metadata */ \"./src/store/modules/metadata.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"metadata\", function() { return _metadata__WEBPACK_IMPORTED_MODULE_3__[\"default\"]; });\n\n/* harmony import */ var _notifications__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./notifications */ \"./src/store/modules/notifications.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifications\", function() { return _notifications__WEBPACK_IMPORTED_MODULE_4__[\"default\"]; });\n\n/* harmony import */ var _notifiers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./notifiers */ \"./src/store/modules/notifiers/index.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifiers\", function() { return _notifiers__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; });\n\n/* harmony import */ var _qualities__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./qualities */ \"./src/store/modules/qualities.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"qualities\", function() { return _qualities__WEBPACK_IMPORTED_MODULE_6__[\"default\"]; });\n\n/* harmony import */ var _shows__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./shows */ \"./src/store/modules/shows.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"shows\", function() { return _shows__WEBPACK_IMPORTED_MODULE_7__[\"default\"]; });\n\n/* harmony import */ var _socket__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./socket */ \"./src/store/modules/socket.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"socket\", function() { return _socket__WEBPACK_IMPORTED_MODULE_8__[\"default\"]; });\n\n/* harmony import */ var _statuses__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./statuses */ \"./src/store/modules/statuses.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"statuses\", function() { return _statuses__WEBPACK_IMPORTED_MODULE_9__[\"default\"]; });\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack:///./src/store/modules/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _auth__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./auth */ \"./src/store/modules/auth.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"auth\", function() { return _auth__WEBPACK_IMPORTED_MODULE_0__[\"default\"]; });\n\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./clients */ \"./src/store/modules/clients.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"clients\", function() { return _clients__WEBPACK_IMPORTED_MODULE_1__[\"default\"]; });\n\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./config */ \"./src/store/modules/config.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"config\", function() { return _config__WEBPACK_IMPORTED_MODULE_2__[\"default\"]; });\n\n/* harmony import */ var _defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./defaults */ \"./src/store/modules/defaults.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"defaults\", function() { return _defaults__WEBPACK_IMPORTED_MODULE_3__[\"default\"]; });\n\n/* harmony import */ var _metadata__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./metadata */ \"./src/store/modules/metadata.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"metadata\", function() { return _metadata__WEBPACK_IMPORTED_MODULE_4__[\"default\"]; });\n\n/* harmony import */ var _notifications__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./notifications */ \"./src/store/modules/notifications.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifications\", function() { return _notifications__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; });\n\n/* harmony import */ var _notifiers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./notifiers */ \"./src/store/modules/notifiers/index.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifiers\", function() { return _notifiers__WEBPACK_IMPORTED_MODULE_6__[\"default\"]; });\n\n/* harmony import */ var _qualities__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./qualities */ \"./src/store/modules/qualities.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"qualities\", function() { return _qualities__WEBPACK_IMPORTED_MODULE_7__[\"default\"]; });\n\n/* harmony import */ var _shows__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./shows */ \"./src/store/modules/shows.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"shows\", function() { return _shows__WEBPACK_IMPORTED_MODULE_8__[\"default\"]; });\n\n/* harmony import */ var _search__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./search */ \"./src/store/modules/search.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"search\", function() { return _search__WEBPACK_IMPORTED_MODULE_9__[\"default\"]; });\n\n/* harmony import */ var _socket__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./socket */ \"./src/store/modules/socket.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"socket\", function() { return _socket__WEBPACK_IMPORTED_MODULE_10__[\"default\"]; });\n\n/* harmony import */ var _statuses__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./statuses */ \"./src/store/modules/statuses.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"statuses\", function() { return _statuses__WEBPACK_IMPORTED_MODULE_11__[\"default\"]; });\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack:///./src/store/modules/index.js?");
 
 /***/ }),
 
@@ -3308,6 +3320,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mut
 
 /***/ }),
 
+/***/ "./src/store/modules/search.js":
+/*!*************************************!*\
+  !*** ./src/store/modules/search.js ***!
+  \*************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  filters: {\n    ignoreUnknownSubs: false,\n    ignored: ['german', 'french', 'core2hd', 'dutch', 'swedish', 'reenc', 'MrLss', 'dubbed'],\n    undesired: ['internal', 'xvid'],\n    ignoredSubsList: ['dk', 'fin', 'heb', 'kor', 'nor', 'nordic', 'pl', 'swe'],\n    required: [],\n    preferred: []\n  },\n  general: {\n    minDailySearchFrequency: 10,\n    minBacklogFrequency: 720,\n    dailySearchFrequency: 40,\n    checkPropersInterval: '4h',\n    usenetRetention: 500,\n    maxCacheAge: 30,\n    backlogDays: 7,\n    torrentCheckerFrequency: 60,\n    backlogFrequency: 720,\n    cacheTrimming: false,\n    deleteFailed: false,\n    downloadPropers: true,\n    useFailedDownloads: false,\n    minTorrentCheckerFrequency: 30,\n    removeFromClient: false,\n    randomizeProviders: false,\n    propersSearchDays: 2,\n    allowHighPriority: true,\n    trackersList: ['udp://tracker.coppersurfer.tk:6969/announce', 'udp://tracker.leechers-paradise.org:6969/announce', 'udp://tracker.zer0day.to:1337/announce', 'udp://tracker.opentrackr.org:1337/announce', 'http://tracker.opentrackr.org:1337/announce', 'udp://p4p.arenabg.com:1337/announce', 'http://p4p.arenabg.com:1337/announce', 'udp://explodie.org:6969/announce', 'udp://9.rarbg.com:2710/announce', 'http://explodie.org:6969/announce', 'http://tracker.dler.org:6969/announce', 'udp://public.popcorn-tracker.org:6969/announce', 'udp://tracker.internetwarriors.net:1337/announce', 'udp://ipv4.tracker.harry.lu:80/announce', 'http://ipv4.tracker.harry.lu:80/announce', 'udp://mgtracker.org:2710/announce', 'http://mgtracker.org:6969/announce', 'udp://tracker.mg64.net:6969/announce', 'http://tracker.mg64.net:6881/announce', 'http://torrentsmd.com:8080/announce']\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_0__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'search') {\n    state = Object.assign(state, config);\n  }\n});\n\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/search.js?");
+
+/***/ }),
+
 /***/ "./src/store/modules/shows.js":
 /*!************************************!*\
   !*** ./src/store/modules/shows.js ***!
diff --git a/themes/dark/templates/config_search.mako b/themes/dark/templates/config_search.mako
index 4f362728ef..080829afba 100644
--- a/themes/dark/templates/config_search.mako
+++ b/themes/dark/templates/config_search.mako
@@ -17,7 +17,26 @@ window.app = new Vue({
     el: '#vue-wrap',
     data() {
         return {
-            clients: {
+            configLoaded: false,
+            checkPropersIntervalLabels: [
+                { text: '24 hours', value: 'daily' },
+                { text: '4 hours', value: '4h' },
+                { text: '90 mins', value: '90m' },
+                { text: '45 mins', value: '45m' },
+                { text: '24 hours', value: '15m' }
+            ],
+            nzbGetPriorityOptions: [
+                { text: 'Very low', value: -100 },
+                { text: 'Low', value: -50 },
+                { text: 'Normal', value: 0 },
+                { text: 'High', value: 50 },
+                { text: 'Very high', value: 100 },
+                { text: 'Force', value: 900 },
+
+            ],
+
+            // Static clients config
+            clientsConfig: {
                 torrent: {
                     blackhole: {
                         title: 'Black hole'
@@ -103,60 +122,126 @@ window.app = new Vue({
                     }
                 },
             },
-            torrent: {
-                enabled: ${js_bool(app.USE_TORRENTS)},
-                dir: ${json.dumps(app.TORRENT_DIR)},
-                method: ${json.dumps(app.TORRENT_METHOD)},
-                host: ${json.dumps(app.TORRENT_HOST)},
-                rpcUrl: ${json.dumps(app.TORRENT_RPCURL)},
-                username: ${json.dumps(app.TORRENT_USERNAME)},
-                password: ${json.dumps(app.TORRENT_PASSWORD)},
-                label: ${json.dumps(app.TORRENT_LABEL)},
-                labelAnime: ${json.dumps(app.TORRENT_LABEL_ANIME)},
-                path: ${json.dumps(app.TORRENT_PATH)},
-                seedLocation: ${json.dumps(app.TORRENT_SEED_LOCATION)},
-                seedTime: ${json.dumps(app.TORRENT_SEED_TIME)},
-                testStatus: 'Click below to test',
-                authType: ${json.dumps(app.TORRENT_AUTH_TYPE)},
-                verifyCert: ${js_bool(app.TORRENT_VERIFY_CERT)},
-                paused: ${js_bool(app.TORRENT_PAUSED)},
-                highBandwidth: ${js_bool(app.TORRENT_HIGH_BANDWIDTH)},
-            },
-            nzb: {
-                enabled: ${js_bool(app.USE_NZBS)},
-                dir: ${json.dumps(app.NZB_DIR)},
-                method: ${json.dumps(app.NZB_METHOD)},
-                nzbget: {
-                    useHttps: ${js_bool(app.NZBGET_USE_HTTPS)},
-                    host: ${json.dumps(app.NZBGET_HOST)},
-                    username: ${json.dumps(app.NZBGET_USERNAME)},
-                    password: ${json.dumps(app.NZBGET_PASSWORD)},
+            // Mapped from state module: clients.js
+            clients: {
+                torrents: {
+                    authType: null,
+                    dir: null,
+                    enabled: null,
+                    highBandwidth: null,
+                    host: null,
+                    label: null,
+                    labelAnime: null,
+                    method: null,
+                    path: null,
+                    paused: null,
+                    rpcurl: null,
+                    seedLocation: null,
+                    seedTime: null,
+                    username: null,
+                    verifySSL: null,
                     testStatus: 'Click below to test',
-                    category: ${json.dumps(app.NZBGET_CATEGORY)},
-                    categoryBacklog: ${json.dumps(app.NZBGET_CATEGORY_BACKLOG)},
-                    categoryAnime: ${json.dumps(app.NZBGET_CATEGORY_ANIME)},
-                    categoryAnimeBacklog: ${json.dumps(app.NZBGET_CATEGORY_ANIME_BACKLOG)},
-                    priority: ${app.NZBGET_PRIORITY},
-                    priorityOptions: {
-                        'Very low': -100,
-                        'Low': -50,
-                        'Normal': 0,
-                        'High': 50,
-                        'Very high': 100,
-                        'Force': 900
+                },
+                nzb: {
+                    enabled: null,
+                    method: null,
+                    nzbget: {
+                        category: null,
+                        categoryAnime: null,
+                        categoryAnimeBacklog: null,
+                        categoryBacklog: null,
+                        host: null,
+                        priority: null,
+                        useHttps: null,
+                        username: null,
+                        testStatus: 'Click below to test',
+                    },
+                    sabnzbd: {
+                        category: null,
+                        forced: null,
+                        categoryAnime: null,
+                        categoryBacklog: null,
+                        categoryAnimeBacklog: null,
+                        host: null,
+                        username: null,
+                        password: null,
+                        apiKey: null,
+                        testStatus: 'Click below to test',
                     }
+                }
+            },
+            // Mapped from state module: search.js
+            search: {
+		        filters: {
+                    ignoreUnknownSubs: false,
+                    ignored: [
+                        'german',
+                        'french',
+                        'core2hd',
+                        'dutch',
+                        'swedish',
+                        'reenc',
+                        'MrLss',
+                        'dubbed'
+                    ],
+                    undesired: [
+                        'internal',
+                        'xvid'
+                    ],
+                    ignoredSubsList: [
+                        'dk',
+                        'fin',
+                        'heb',
+                        'kor',
+                        'nor',
+                        'nordic',
+                        'pl',
+                        'swe'
+                    ],
+                    required: [],
+                    preferred: []
                 },
-                sabnzbd: {
-                    host: ${json.dumps(app.SAB_HOST)},
-                    username: ${json.dumps(app.SAB_USERNAME)},
-                    password: ${json.dumps(app.SAB_PASSWORD)},
-                    apiKey: ${json.dumps(app.SAB_APIKEY)},
-                    testStatus: 'Click below to test',
-                    category: ${json.dumps(app.SAB_CATEGORY)},
-                    categoryBacklog: ${json.dumps(app.SAB_CATEGORY_BACKLOG)},
-                    categoryAnime: ${json.dumps(app.SAB_CATEGORY_ANIME)},
-                    categoryAnimeBacklog: ${json.dumps(app.SAB_CATEGORY_ANIME_BACKLOG)},
-                    forced: ${js_bool(app.SAB_FORCED)}
+                general: {
+                    minDailySearchFrequency: 10,
+                    minBacklogFrequency: 720,
+                    dailySearchFrequency: 40,
+                    checkPropersInterval: '4h',
+                    usenetRetention: 500,
+                    maxCacheAge: 30,
+                    backlogDays: 7,
+                    torrentCheckerFrequency: 60,
+                    backlogFrequency: 720,
+                    cacheTrimming: false,
+                    deleteFailed: false,
+                    downloadPropers: true,
+                    useFailedDownloads: false,
+                    minTorrentCheckerFrequency: 30,
+                    removeFromClient: false,
+                    randomizeProviders: false,
+                    propersSearchDays: 2,
+                    allowHighPriority: true,
+                    trackersList: [
+                        'udp://tracker.coppersurfer.tk:6969/announce',
+                        'udp://tracker.leechers-paradise.org:6969/announce',
+                        'udp://tracker.zer0day.to:1337/announce',
+                        'udp://tracker.opentrackr.org:1337/announce',
+                        'http://tracker.opentrackr.org:1337/announce',
+                        'udp://p4p.arenabg.com:1337/announce',
+                        'http://p4p.arenabg.com:1337/announce',
+                        'udp://explodie.org:6969/announce',
+                        'udp://9.rarbg.com:2710/announce',
+                        'http://explodie.org:6969/announce',
+                        'http://tracker.dler.org:6969/announce',
+                        'udp://public.popcorn-tracker.org:6969/announce',
+                        'udp://tracker.internetwarriors.net:1337/announce',
+                        'udp://ipv4.tracker.harry.lu:80/announce',
+                        'http://ipv4.tracker.harry.lu:80/announce',
+                        'udp://mgtracker.org:2710/announce',
+                        'http://mgtracker.org:6969/announce',
+                        'udp://tracker.mg64.net:6969/announce',
+                        'http://tracker.mg64.net:6881/announce',
+                        'http://torrentsmd.com:8080/announce'
+                    ]
                 }
             },
             httpAuthTypes: {
@@ -164,50 +249,56 @@ window.app = new Vue({
                 basic: 'Basic',
                 digest: 'Digest'
             },
-
-            // Episode Search: General Config
-            randomizeProviders: ${js_bool(app.RANDOMIZE_PROVIDERS)},
-            downloadPropers: ${js_bool(app.DOWNLOAD_PROPERS)},
-            checkPropersInterval: ${json.dumps(app.CHECK_PROPERS_INTERVAL)},
-            propersIntervalLabels: ${json.dumps(app.PROPERS_INTERVAL_LABELS)},
-            propersSearchDays: ${app.PROPERS_SEARCH_DAYS},
-            backlogDays: ${app.BACKLOG_DAYS},
-            backlogFrequency: ${app.BACKLOG_FREQUENCY},
-            minBacklogFrequency: ${app.MIN_BACKLOG_FREQUENCY},
-            dailySearchFrequency: ${app.DAILYSEARCH_FREQUENCY},
-            minDailySearchFrequency: ${app.MIN_DAILYSEARCH_FREQUENCY},
-            removeFromClient: ${js_bool(app.REMOVE_FROM_CLIENT and app.TORRENT_METHOD in ('transmission', 'deluge', 'deluged'))},
-            torrentCheckerFrequency: ${app.TORRENT_CHECKER_FREQUENCY},
-            minTorrentCheckerFrequency: ${app.MIN_TORRENT_CHECKER_FREQUENCY},
-            usenetRetention: ${app.USENET_RETENTION},
-            trackersList: ${json.dumps(app.TRACKERS_LIST)}.join(', '),
-            allowHighPriority: ${js_bool(app.ALLOW_HIGH_PRIORITY)},
-            useFailedDownloads: ${js_bool(app.USE_FAILED_DOWNLOADS)},
-            deleteFailed: ${js_bool(app.DELETE_FAILED)},
-            cacheTrimming: ${js_bool(app.CACHE_TRIMMING)},
-            maxCacheAge: ${app.MAX_CACHE_AGE},
-
-            // Episode Search: Search Filters
-            ignoreWords: ${json.dumps(app.IGNORE_WORDS)}.join(', '),
-            undesiredWords: ${json.dumps(app.UNDESIRED_WORDS)}.join(', '),
-            preferredWords: ${json.dumps(app.PREFERRED_WORDS)}.join(', '),
-            requireWords: ${json.dumps(app.REQUIRE_WORDS)}.join(', '),
-            ignoredSubsList: ${json.dumps(app.IGNORED_SUBS_LIST)}.join(', '),
-            ignoreUndSubs: ${js_bool(app.IGNORE_UND_SUBS)},
-
-            // Global
-            dataDir: ${json.dumps(app.DATA_DIR)},
         };
     },
+    computed: {
+        stateSearch() {
+            return this.$store.state.search;
+        },
+        stateClients() {
+            return this.$store.state.clients;            
+        },
+        torrentUsernameIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (!['rtorrent', 'deluge'].includes(method) || method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        },
+        torrentPasswordIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (method !== 'rtorrent' || method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        },
+        authTypeIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        }
+    },
     beforeMount() {
         $('#config-components').tabs();
     },
     methods: {
         async testTorrentClient() {
-            const { torrent } = this;
-            const { method, host, username, password } = torrent;
+            const { clients } = this;
+            const { torrents } = clients;
+            const { method, host, username, password } = torrents;
 
-            this.torrent.testStatus = MEDUSA.config.loading;
+            this.clients.torrents.testStatus = MEDUSA.config.loading;
 
             const params = {
                 torrent_method: method,
@@ -217,14 +308,15 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testTorrent', { params });
 
-            this.torrent.testStatus = resp.data;
+            this.clients.torrents.testStatus = resp.data;
         },
         async testNzbget() {
-            const { nzb } = this;
+            const { clients } = this;
+            const { nzb } = clients;
             const { nzbget } = nzb;
             const { host, username, password, useHttps } = nzbget;
 
-            this.nzb.nzbget.testStatus = MEDUSA.config.loading;
+            this.clients.nzb.nzbget.testStatus = MEDUSA.config.loading;
 
             const params = {
                 host,
@@ -234,14 +326,15 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testNZBget', { params });
 
-            this.nzb.nzbget.testStatus = resp.data;
+            this.clients.nzb.nzbget.testStatus = resp.data;
         },
         async testSabnzbd() {
-            const { nzb } = this;
+            const { clients } = this;
+            const { nzb } = clients;
             const { sabnzbd } = nzb;
             const { host, username, password, apiKey } = sabnzbd;
 
-            this.nzb.sabnzbd.testStatus = MEDUSA.config.loading;
+            this.clients.nzb.sabnzbd.testStatus = MEDUSA.config.loading;
 
             const params = {
                 host,
@@ -251,42 +344,85 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testSABnzbd', { params });
 
-            this.nzb.sabnzbd.testStatus = resp.data;
+            this.clients.nzb.sabnzbd.testStatus = resp.data;
+        },
+        save() {
+            const { $store, clients, configLoaded, search } = this;
+            // We want to wait until the page has been fully loaded, before starting to save stuff.
+            if (!configLoaded) {
+                return;
+            }
+            // Disable the save button until we're done.
+            this.saving = true;
+
+            // Clone the config into a new object
+            const config = Object.assign({}, {search}, {clients});
+
+            const section = 'main';
+            $store.dispatch('setConfig', { section, config }).then(() => {
+                this.$snotify.success(
+                    'Saved Search config',
+                    'Saved',
+                    { timeout: 5000 }
+                );
+            }).catch(() => {
+                this.$snotify.error(
+                    'Error while trying to save search config',
+                    'Error'
+                );
+            });
         }
     },
     watch: {
-        'torrent.host'(host) {
-            const { torrent } = this;
-            const { method } = torrent;
+        'clients.torrents.host'(host) {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { method } = torrents;
 
             if (method === 'rtorrent') {
+                if (!host) {
+                    return;
+                }
                 const isMatch = host.startsWith('scgi://');
 
                 if (isMatch) {
-                    this.torrent.username = '';
-                    this.torrent.password = '';
-                    this.torrent.authType = 'none';
+                    this.clients.torrents.username = '';
+                    this.clients.torrents.password = '';
+                    this.clients.torrents.authType = 'none';
                 }
             }
 
             if (method === 'deluge') {
-                this.torrent.username = '';
+                this.clients.torrents.username = '';
             }
         },
-        'torrent.method'(method) {
-            if (!this.clients.torrent[method].removeFromClientOption) {
-                this.removeFromClient = false;
+        'clients.torrents.method'(method) {
+            if (!this.clientsConfig.torrent[method].removeFromClientOption) {
+                this.search.general.removeFromClient = false;
             }
         }
+    },
+    mounted() {
+        // The real vue stuff
+        // This is used to wait for the config to be loaded by the store.
+        this.$once('loaded', () => {
+            const { clients, search, stateClients, stateSearch } = this;
+
+            // Map the state values to local data.
+            this.search = Object.assign({}, search, stateSearch);
+            this.clients = Object.assign({}, clients, stateClients);
+            this.configLoaded = true;
+        });
     }
 });
 </script>
 </%block>
 <%block name="content">
+<vue-snotify></vue-snotify>
 <h1 class="header">{{ $route.meta.header }}</h1>
 <div id="config">
     <div id="config-content">
-        <form id="configForm" action="config/search/saveSearch" method="post">
+        <form id="configForm" method="post" @submit.prevent="save()">
             <div id="config-components">
                 <ul>
                     <li><app-link href="#episode-search">Episode Search</app-link></li>
@@ -295,676 +431,323 @@ window.app = new Vue({
                 </ul>
                 <div id="episode-search">
                     <!-- general settings //-->
-                    <div class="component-group-desc-legacy">
-                        <h3>General Search Settings</h3>
-                        <p>How to manage searching with <app-link href="config/providers">providers</app-link>.</p>
-                    </div>
-                    <div class="component-group">
-                        <fieldset class="component-group-list">
-                            <div class="field-pair">
-                                <label for="randomize_providers">
-                                    <span class="component-title">Randomize Providers</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="randomize_providers" id="randomize_providers" v-model="randomizeProviders"/>
-                                        <p>randomize the provider search order instead of going in order of placement</p>
-                                    </span>
-                                </label>
-                            </div><!-- randomize providers -->
-                            <div class="field-pair">
-                                <label for="download_propers">
-                                    <span class="component-title">Download propers</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="download_propers" id="download_propers" v-model="downloadPropers"/>
-                                        <p>replace original download with "Proper" or "Repack" if nuked</p>
-                                    </span>
-                                </label>
-                            </div><!-- download propers -->
-                            <div v-show="downloadPropers">
-                                <div class="field-pair">
-                                    <label for="check_propers_interval">
-                                        <span class="component-title">Check propers every:</span>
-                                        <span class="component-desc">
-                                            <select id="check_propers_interval" name="check_propers_interval" v-model="checkPropersInterval" class="form-control input-sm">
-                                                <option v-for="(label, interval) in propersIntervalLabels" :value="interval">{{label}}</option>
-                                            </select>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Proper search days</span>
-                                        <span class="component-desc">
-                                            <input type="number" min="2" max="7" step="1" name="propers_search_days" v-model.number="propersSearchDays" class="form-control input-sm input75"/>
-                                            <p>how many days to keep searching for propers since episode airdate (default: 2 days)</p>
-                                        </span>
-                                    </label>
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>General Search Settings</h3>
+                            <p>How to manage searching with <app-link href="config/providers">providers</app-link>.</p>
+                        </div>
+                    
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-toggle-slider v-model="search.general.randomizeProviders" label="Randomize Providers" id="randomize_providers" :explanations="['randomize the provider search order instead of going in order of placement']" ></config-toggle-slider>
+                                <config-toggle-slider v-model="search.general.downloadPropers" label="Download propers" id="download_propers" :explanations="['replace original download with \'Proper\' or \'Repack\' if nuked']" ></config-toggle-slider>
+                                
+                                <div v-show="search.general.downloadPropers">
+                                    <config-template label="Check propers every" label-for="check_propers_interval">
+                                        <select id="check_propers_interval" name="check_propers_interval" v-model="search.general.checkPropersInterval" class="form-control input-sm">
+                                            <option v-for="option in checkPropersIntervalLabels" :value="option.value">
+                                                {{option.text}}
+                                            </option>
+                                        </select>
+                                    </config-template>
+
+                                    <config-textbox-number :min="2" :max="7" :step="1" v-model.number="search.general.propersSearchDays" label="Proper search days" id="propers_search_days" :explanations="['how many days to keep searching for propers since episode airdate (default: 2 days)']"></config-textbox-number>
+                                    
                                 </div><!-- check propers -->
-                            </div>
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Forced backlog search day(s)</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="backlog_days" v-model.number="backlogDays" class="form-control input-sm input75"/>
-                                        <p>number of day(s) that the "Forced Backlog Search" will cover (e.g. 7 Days)</p>
-                                    </span>
-                                </label>
-                            </div><!-- backlog days -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Backlog search frequency</span>
-                                    <span class="component-desc">
-                                        <input type="number" :min="minBacklogFrequency" step="1" name="backlog_frequency" v-model.number="backlogFrequency" class="form-control input-sm input75"/>
-                                        <p>time in minutes between searches (min. {{minBacklogFrequency}})</p>
-                                    </span>
-                                </label>
-                            </div><!-- backlog frequency -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Daily search frequency</span>
-                                    <span class="component-desc">
-                                        <input type="number" :min="minDailySearchFrequency" step="1" name="dailysearch_frequency" v-model.number="dailySearchFrequency" class="form-control input-sm input75"/>
-                                        <p>time in minutes between searches (min. {{minDailySearchFrequency}})</p>
-                                    </span>
-                                </label>
-                            </div><!-- daily search frequency -->
-                            <div class="field-pair" v-show="clients.torrent[torrent.method].removeFromClientOption">
-                                <label for="remove_from_client">
-                                    <span class="component-title">Remove torrents from client</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="remove_from_client" id="remove_from_client" v-model="removeFromClient"/>
-                                        <p>Remove torrent from client (also torrent data) when provider ratio is reached</p>
-                                        <p><b>Note:</b> For now only Transmission and Deluge are supported</p>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="removeFromClient">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Frequency to check torrents ratio</span>
-                                        <span class="component-desc">
-                                            <input type="number" :min="minTorrentCheckerFrequency" step="1" name="torrent_checker_frequency" v-model.number="torrentCheckerFrequency" class="form-control input-sm input75"/>
-                                            <p>Frequency in minutes to check torrent's ratio (default: 60)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Usenet retention</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="usenet_retention" v-model.number="usenetRetention" class="form-control input-sm input75"/>
-                                        <p>age limit in days for usenet articles to be used (e.g. 500)</p>
-                                    </span>
-                                </label>
-                            </div><!-- usenet retention -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Trackers list</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="trackers_list" v-model="trackersList" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            Trackers that will be added to magnets without trackers<br>
-                                            separate trackers with a comma, e.g. "tracker1, tracker2, tracker3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- trackers -->
-                            <div class="field-pair">
-                                <label for="allow_high_priority">
-                                    <span class="component-title">Allow high priority</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="allow_high_priority" id="allow_high_priority" v-model="allowHighPriority"/>
-                                        <p>set downloads of recently aired episodes to high priority</p>
-                                    </span>
-                                </label>
-                            </div><!-- high priority -->
-                            <div class="field-pair">
-                                <label for="use_failed_downloads">
-                                    <span class="component-title">Use Failed Downloads</span>
-                                    <span class="component-desc">
-                                        <input id="use_failed_downloads" type="checkbox" name="use_failed_downloads" v-model="useFailedDownloads"/>
-                                        Use Failed Download Handling?<br>
-                                        Will only work with snatched/downloaded episodes after enabling this
-                                    </span>
-                                </label>
-                            </div><!-- use failed -->
-                            <div class="field-pair" v-show="useFailedDownloads">
-                                <label for="delete_failed">
-                                    <span class="component-title">Delete Failed</span>
-                                    <span class="component-desc">
-                                        <input id="delete_failed" type="checkbox" name="delete_failed" v-model="deleteFailed"/>
-                                        Delete files left over from a failed download?<br>
-                                        <b>NOTE:</b> This only works if Use Failed Downloads is enabled.
-                                    </span>
-                                </label>
-                            </div><!-- delete failed -->
-                            <div class="field-pair">
-                                <label for="cache_trimming">
-                                    <span class="component-title">Cache Trimming</span>
-                                    <span class="component-desc">
-                                        <input id="cache_trimming" type="checkbox" name="cache_trimming" v-model="cacheTrimming"/>
-                                        Enable trimming of provider cache<br>
-                                    </span>
-                                </label>
-                            </div><!-- cache trimming -->
-                            <div class="field-pair" v-show="cacheTrimming">
-                                <label for="max_cache_age">
-                                    <span class="component-title">Cache Retention</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="max_cache_age" id="max_cache_age" v-model.number="maxCacheAge" class="form-control input-sm input75"/>
-                                        days<br>
-                                        <br>
-                                        Number of days to retain results in cache.  Results older than this will be removed if cache trimming is enabled.
-                                    </span>
-                                </label>
-                            </div><!-- max cache age -->
-                            <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
-                        </fieldset>
-                    </div><!-- /general settings //-->
+                                
+                                <config-textbox-number :min="1" :step="1" v-model.number="search.general.backlogDays" label="Forced backlog search day(s)" id="backlog_days" :explanations="['how many days to keep searching for propers since episode airdate (default: 2 days)']"></config-textbox-number>
+                                    
+                                <config-textbox-number :min="search.general.minDailySearchFrequency" :step="1" v-model.number="search.general.minBacklogFrequency" label="Backlog search frequency" id="backlog_frequency">
+                                    <p>time in minutes between searches (min. {{search.general.minBacklogFrequency}})</p>
+                                </config-textbox-number>
+                                
+                                <config-toggle-slider v-if="clientsConfig.torrent[clients.torrents.method]" v-show="clientsConfig.torrent[clients.torrents.method].removeFromClientOption" v-model="search.general.removeFromClient" label="Remove torrents from client" id="remove_from_client">
+                                    <p>Remove torrent from client (also torrent data) when provider ratio is reached</p>
+                                    <p><b>Note:</b> For now only Transmission and Deluge are supported</p>
+                                </config-toggle-slider>
+                                    
+                                <config-textbox-number v-show="search.general.removeFromClient" :min="search.general.minTorrentCheckerFrequency" :step="1" v-model.number="search.general.torrentCheckerFrequency" label="Frequency to check torrents ratio" id="torrent_checker_frequency" :explanations="['Frequency in minutes to check torrent\'s ratio (default: 60)']"></config-textbox-number>
+
+
+                                <config-textbox-number :min="1" :step="1" v-model.number="search.general.usenetRetention" label="Usenet retention" id="usenet_retention" :explanations="['age limit in days for usenet articles to be used (e.g. 500)']"></config-textbox-number>
+
+                                <config-template label-for="trackers_list" label="Trackers list">
+                                    <select-list name="trackers_list" id="trackers_list" :list-items="search.general.trackersList" @change="search.general.trackersList = $event.map(x => x.value)"></select-list>
+                                    Trackers that will be added to magnets without trackers<br>
+                                    separate trackers with a comma, e.g. "tracker1, tracker2, tracker3"
+                                </config-template>
+
+                                <config-toggle-slider v-model="search.general.allowHighPriority" label="Allow high priority" id="allow_high_priority" :explanations="['set downloads of recently aired episodes to high priority']" ></config-toggle-slider>
+                                
+                                
+                                <config-toggle-slider v-model="search.general.useFailedDownloads" label="Use Failed Downloads" id="use_failed_downloads" :explanations="['Use Failed Download Handling?',
+                                    'Will only work with snatched/downloaded episodes after enabling this']" >
+                                </config-toggle-slider>
+                                
+                                
+                                <config-toggle-slider v-show="search.general.useFailedDownloads" v-model="search.general.deleteFailed" label="Delete Failed" id="delete_failed">
+                                    Delete files left over from a failed download?<br>
+                                    <b>NOTE:</b> This only works if Use Failed Downloads is enabled.
+                                </config-toggle-slider>
+
+
+                                <config-toggle-slider v-model="search.general.cacheTrimming" label="Cache Trimming" id="cache_trimming" :explanations="['Enable trimming of provider cache']" ></config-toggle-slider>
+                                
+                                <config-textbox-number v-show="search.general.cacheTrimming" :min="1" :step="1" v-model.number="search.general.maxCacheAge" label="Cache Retention" id="max_cache_age" :explanations="['Number of days to retain results in cache.  Results older than this will be removed if cache trimming is enabled.']"></config-textbox-number>
+
+                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
+                            </fieldset>
+                        </div><!-- /general settings //-->
+                    </div><!-- /row -->
+
                     <!-- search filters //-->
-                    <div class="component-group-desc-legacy">
-                        <h3>Search Filters</h3>
-                        <p>Options to filter search results</p>
-                    </div>
-                    <div class="component-group">
-                        <fieldset class="component-group-list">
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Ignore words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="ignore_words" v-model="ignoreWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with any words from this list will be ignored<br>
-                                            separate words with a comma, e.g. "word1,word2,word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- ignored words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Undesired words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="undesired_words" v-model="undesiredWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with words from this list will only be selected as a last resort<br>
-                                            separate words with a comma, e.g. "word1, word2, word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- undesired words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Preferred words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="preferred_words" v-model="preferredWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with one or more word from this list will be chosen over others<br>
-                                            separate words with a comma, e.g. "word1, word2, word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- preferred words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Require words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="require_words" v-model="requireWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results must include at least one word from this list<br>
-                                            separate words with a comma, e.g. "word1,word2,word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- required words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Ignore language names in subbed results</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="ignored_subs_list" v-model="ignoredSubsList" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            Ignore subbed releases based on language names <br>
-                                            Example: "dk" will ignore words: dksub, dksubs, dksubbed, dksubed <br>
-                                            separate languages with a comma, e.g. "lang1, lang2, lang3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- subbed results -->
-                            <div class="field-pair">
-                                <label for="ignore_und_subs">
-                                    <span class="component-title">Ignore unknown subbed releases</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="ignore_und_subs" id="ignore_und_subs" v-model="ignoreUndSubs"/>
-                                        Ignore subbed releases without language names <br>
-                                        Filter words: subbed, subpack, subbed, subs, etc.)
-                                    </span>
-                                </label>
-                            </div><!-- ignore unknown subs -->
-                            <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
-                        </fieldset>
-                    </div><!-- /search filters //-->
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>Search Filters</h3>
+                            <p>Options to filter search results</p>
+                        </div>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-template label-for="ignore_words" label="Ignore words">
+                                    <select-list name="ignore_words" id="ignore_words" :list-items="search.filters.ignored" @change="search.filters.ignored = $event.map(x => x.value)"></select-list>
+                                    results with any words from this list will be ignored
+                                </config-template>
+
+                                <config-template label-for="undesired_words" label="Undesired words">
+                                    <select-list name="undesired_words" id="undesired_words" :list-items="search.filters.undesired" @change="search.filters.undesired = $event.map(x => x.value)"></select-list>
+                                    results with words from this list will only be selected as a last resort
+                                </config-template>
+
+                                <config-template label-for="preferred_words" label="Preferred words">
+                                    <select-list name="preferred_words" id="preferred_words" :list-items="search.filters.preferred" @change="search.filters.preferred = $event.map(x => x.value)"></select-list>
+                                    results with one or more word from this list will be chosen over others
+                                </config-template>
+
+                                <config-template label-for="require_words" label="Require words">
+                                    <select-list name="require_words" id="require_words" :list-items="search.filters.required" @change="search.filters.required = $event.map(x => x.value)"></select-list>
+                                    results must include at least one word from this list
+                                </config-template>
+
+                                <config-template label-for="ignored_subs_list" label="Ignore language names in subbed results">
+                                    <select-list name="ignored_subs_list" id="ignored_subs_list" :list-items="search.filters.ignoredSubsList" @change="search.filters.ignoredSubsList = $event.map(x => x.value)"></select-list>
+                                    Ignore subbed releases based on language names <br>
+                                    Example: "dk" will ignore words: dksub, dksubs, dksubbed, dksubed <br>
+                                </config-template>
+
+                                <config-toggle-slider v-model="search.filters.ignoreUnknownSubs" label="Ignore unknown subbed releases" id="ignore_und_subs" :explanations="['Ignore subbed releases without language names', 'Filter words: subbed, subpack, subbed, subs, etc.)']"></config-toggle-slider>
+
+                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
+                            </fieldset>
+                        </div><!-- /col //-->
+                    </div><!-- /row //-->   
                 </div><!-- /#episode-search //-->
-                <div id="nzb-search" class="component-group">
-                    <div class="component-group-desc-legacy">
-                        <h3>NZB Search</h3>
-                        <p>How to handle NZB search results.</p>
-                        <div id="nzb_method_icon" :class="'add-client-icon-' + nzb.method"></div>
-                    </div>
-                    <fieldset class="component-group-list">
-                        <div class="field-pair">
-                            <label for="use_nzbs">
-                                <span class="component-title">Search NZBs</span>
-                                <span class="component-desc">
-                                    <input type="checkbox" name="use_nzbs" id="use_nzbs" v-model="nzb.enabled"/>
-                                    <p>enable NZB search providers</p>
-                                </span>
-                            </label>
+                
+
+                <div id="nzb-search">
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>NZB Search</h3>
+                            <p>How to handle NZB search results.</p>
+                            <div id="nzb_method_icon" :class="'add-client-icon-' + clients.nzb.method"></div>
                         </div>
-                        <div v-show="nzb.enabled">
-                            <div class="field-pair">
-                                <label for="nzb_method">
-                                    <span class="component-title">Send .nzb files to:</span>
-                                    <span class="component-desc">
-                                        <select v-model="nzb.method" name="nzb_method" id="nzb_method" class="form-control input-sm">
-                                            <option v-for="(client, name) in clients.nzb" :value="name">{{client.title}}</option>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-toggle-slider v-model="clients.nzb.enabled" label="Search NZBs" id="use_nzbs" :explanations="['enable NZB search providers']"></config-toggle-slider>
+
+                                <div v-show="clients.nzb.enabled">
+                                    <config-template label-for="nzb_method" label="Send .nzb files to">
+                                        <select v-model="clients.nzb.method" name="nzb_method" id="nzb_method" class="form-control input-sm">
+                                            <option v-for="(client, name) in clientsConfig.nzb" :value="name">{{client.title}}</option>
                                         </select>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="nzb.method === 'blackhole'" id="blackhole_settings">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Black hole folder location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="nzb_dir" title="Select .nzb black hole location" :initial-dir="nzb.dir" @update="nzb.dir = $event"></file-browser>
-                                            <div class="clear-left">
-                                                <p><b>.nzb</b> files are stored at this location for external software to find and use</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div v-show="nzb.method === 'sabnzbd'" id="sabnzbd_settings">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd server URL</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.host" type="text" id="sab_host" name="sab_host" class="form-control input-sm input350"/>
+                                    </config-template>
+                                    
+                                    <config-template v-show="clients.nzb.method === 'blackhole'" id="blackhole_settings" label-for="nzb_dir" label="Black hole folder location">
+                                        <file-browser name="nzb_dir" title="Select .nzb black hole location" :initial-dir="clients.nzb.dir" @update="clients.nzb.dir = $event"></file-browser>
+                                        <div class="clear-left">
+                                            <p><b>.nzb</b> files are stored at this location for external software to find and use</p>
+                                        </div>
+                                    </config-template>
+                                    
+                                    
+                                    <div v-if="clients.nzb.method" v-show="clients.nzb.method === 'sabnzbd'" id="sabnzbd_settings">
+                                        
+                                        <config-textbox v-model="clients.nzb.sabnzbd.host" label="SABnzbd server URL" id="sab_host" :explanations="['username for your KODI server (blank for none)']" @change="save()">
                                             <div class="clear-left">
-                                                <p v-html="clients.nzb[nzb.method].description"></p>
+                                                <p v-html="clientsConfig.nzb[clients.nzb.method].description"></p>
                                             </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd username</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.username" type="text" name="sab_username" id="sab_username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd password</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.password" type="password" name="sab_password" id="sab_password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd API key</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.apiKey" type="text" name="sab_apikey" id="sab_apikey" class="form-control input-sm input350"/>
-                                            <div class="clear-left"><p>locate at... SABnzbd Config -> General -> API Key</p></div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category" id="sab_category" v-model="nzb.sabnzbd.category" class="form-control input-sm input200"/>
-                                            <p>add downloads to this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_backlog" id="sab_category_backlog" v-model="nzb.sabnzbd.categoryBacklog" class="form-control input-sm input200"/>
-                                            <p>add downloads of old episodes to this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_anime" id="sab_category_anime" v-model="nzb.sabnzbd.categoryAnime" class="form-control input-sm input200"/>
-                                            <p>add anime downloads to this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category for anime (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_anime_backlog" id="sab_category_anime_backlog" v-model="nzb.sabnzbd.categoryAnimeBacklog" class="form-control input-sm input200"/>
-                                            <p>add anime downloads of old episodes to this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair" v-show="allowHighPriority">
-                                    <label for="sab_forced">
-                                        <span class="component-title">Use forced priority</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="sab_forced" id="sab_forced" v-model="nzb.sabnzbd.forced"/>
-                                            <p>enable to change priority from HIGH to FORCED</p></span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="nzb.sabnzbd.testStatus" v-html="nzb.sabnzbd.testStatus"></div>
-                                <input @click="testSabnzbd" type="button" value="Test SABnzbd" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                            <div v-show="nzb.method === 'nzbget'" id="nzbget_settings">
-                                <div class="field-pair">
-                                    <label for="nzbget_use_https">
-                                        <span class="component-title">Connect using HTTPS</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="nzbget_use_https" id="nzbget_use_https" v-model="nzb.nzbget.useHttps"/>
+                                        </config-textbox>
+                                        
+                                        <config-textbox v-model="clients.nzb.sabnzbd.username" label="SABnzbd username" id="sab_username" :explanations="['(blank for none)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.password" type="password" label="SABnzbd password" id="sab_password" :explanations="['(blank for none)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.apiKey" label="SABnzbd API key" id="sab_apikey" :explanations="['locate at... SABnzbd Config -> General -> API Key']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.category" label="Use SABnzbd category" id="sab_category" :explanations="['add downloads to this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryBacklog" label="Use SABnzbd category (backlog episodes)" id="sab_category_backlog" :explanations="['add downloads of old episodes to this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryAnime" label="Use SABnzbd category for anime" id="sab_category_anime" :explanations="['add anime downloads to this category (e.g. anime)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryAnimeBacklog" label="Use SABnzbd category for anime (backlog episodes)" id="sab_category_anime_backlog" :explanations="['add anime downloads of old episodes to this category (e.g. anime)']"></config-textbox>
+                                        <config-toggle-slider v-model="clients.nzb.sabnzbd.forced" label="Use forced priority" id="sab_forced" :explanations="['enable to change priority from HIGH to FORCED']" ></config-toggle-slider>
+                                
+                                        <div class="testNotification" v-show="clients.nzb.sabnzbd.testStatus" v-html="clients.nzb.sabnzbd.testStatus"></div>
+                                        <input @click="testSabnzbd" type="button" value="Test SABnzbd" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+                                    
+                                    <div v-if="clients.nzb.method" v-show="clients.nzb.method === 'nzbget'" id="nzbget_settings">
+                                        
+                                        <config-toggle-slider v-model="clients.nzb.nzbget.useHttps" label="Connect using HTTP" id="nzbget_use_https">
                                             <p><b>note:</b> enable Secure control in NZBGet and set the correct Secure Port here</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget host:port</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_host" id="nzbget_host" v-model="nzb.nzbget.host" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p v-html="clients.nzb[nzb.method].description"></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget username</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_username" id="nzbget_username" v-model="nzb.nzbget.username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>locate in nzbget.conf (default:nzbget)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget password</span>
-                                        <span class="component-desc">
-                                            <input type="password" name="nzbget_password" id="nzbget_password" v-model="nzb.nzbget.password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>locate in nzbget.conf (default:tegbzn6789)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category" id="nzbget_category" v-model="nzb.nzbget.category" class="form-control input-sm input200"/>
-                                            <p>send downloads marked this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_backlog" id="nzbget_category_backlog" v-model="nzb.nzbget.categoryBacklog" class="form-control input-sm input200"/>
-                                            <p>send downloads of old episodes marked this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_anime" id="nzbget_category_anime" v-model="nzb.nzbget.categoryAnime" class="form-control input-sm input200"/>
-                                            <p>send anime downloads marked this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category for anime (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_anime_backlog" id="nzbget_category_anime_backlog" v-model="nzb.nzbget.categoryAnimeBacklog" class="form-control input-sm input200"/>
-                                            <p>send anime downloads of old episodes marked this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget priority</span>
-                                        <span class="component-desc">
-                                            <select name="nzbget_priority" id="nzbget_priority" v-model="nzb.nzbget.priority" class="form-control input-sm">
-                                                <option v-for="(value, title) in nzb.nzbget.priorityOptions" :value="value">{{title}}</option>
+                                        </config-toggle-slider>
+
+                                        <config-textbox v-model="clients.nzb.nzbget.host" label="NZBget host:port" id="nzbget_host">
+                                            <p v-if="clientsConfig.nzb[clients.nzb.method]" v-html="clientsConfig.nzb[clients.nzb.method].description"></p>
+                                        </config-textbox>
+
+                                        <config-textbox v-model="clients.nzb.nzbget.username" label="NZBget username" id="nzbget_username" :explanations="['locate in nzbget.conf (default:nzbget)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.password" type="password" label="NZBget password" id="nzbget_password" :explanations="['locate in nzbget.conf (default:tegbzn6789)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.category" label="Use NZBget category" id="nzbget_category" :explanations="['send downloads marked this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryBacklog" label="Use NZBget category (backlog episodes)" id="nzbget_category_backlog" :explanations="['send downloads of old episodes marked this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryAnime" label="Use NZBget category for anime" id="nzbget_category_anime" :explanations="['send anime downloads marked this category (e.g. anime)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryAnimeBacklog" label="Use NZBget category for anime (backlog episodes)" id="nzbget_category_anime_backlog" :explanations="['send anime downloads of old episodes marked this category (e.g. anime)']"></config-textbox>
+                                        
+                                        <config-template label-for="nzbget_priority" label="NZBget priority">
+                                            <select name="nzbget_priority" id="nzbget_priority" v-model="clients.nzb.nzbget.priority" class="form-control input-sm">
+                                                <option v-for="option in nzbGetPriorityOptions" :value="option.value">{{option.text}}</option>
                                             </select>
                                             <span>priority for daily snatches (no backlog)</span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="nzb.nzbget.testStatus" v-html="nzb.nzbget.testStatus"></div>
-                                <input @click="testNzbget" type="button" value="Test NZBget" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div><!-- /nzb.enabled //-->
+                                        </config-template>
+                                        
+                                        <div class="testNotification" v-show="clients.nzb.nzbget.testStatus" v-html="clients.nzb.nzbget.testStatus"></div>
+                                        <input @click="testNzbget" type="button" value="Test NZBget" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div><!-- /nzb.enabled //-->
+                                </div>
+                            </fieldset>
                         </div>
-                    </fieldset>
+                    </div> <!-- /row -->
                 </div><!-- /#nzb-search //-->
-                <div id="torrent-search" class="component-group">
-                    <div class="component-group-desc-legacy">
-                        <h3>Torrent Search</h3>
-                        <p>How to handle Torrent search results.</p>
-                        <div id="torrent_method_icon" :class="'add-client-icon-' + torrent.method"></div>
-                    </div>
-                    <fieldset class="component-group-list">
-                        <div class="field-pair">
-                            <label for="use_torrents">
-                                <span class="component-title">Search torrents</span>
-                                <span class="component-desc">
-                                    <input type="checkbox" name="use_torrents" id="use_torrents" v-model="torrent.enabled"/>
-                                    <p>enable torrent search providers</p>
-                                </span>
-                            </label>
+                
+                <div id="torrent-search">
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>Torrent Search</h3>
+                            <p>How to handle Torrent search results.</p>
+                            <div id="torrent_method_icon" :class="'add-client-icon-' + clients.torrents.method"></div>
                         </div>
-                        <div v-show="torrent.enabled">
-                            <div class="field-pair">
-                                <label for="torrent_method">
-                                    <span class="component-title">Send .torrent files to:</span>
-                                    <span class="component-desc">
-                                        <select v-model="torrent.method" name="torrent_method" id="torrent_method" class="form-control input-sm">
-                                            <option v-for="(client, name) in clients.torrent" :value="name">{{client.title}}</option>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                
+                                <config-toggle-slider v-model="clients.torrents.enabled" label="Search torrents" id="use_torrents" :explanations="['enable torrent search providers']"></config-toggle-slider>
+                                <div v-show="clients.torrents.enabled">
+                                    
+                                    <config-template label-for="torrent_method" label="Send .torrent files to">
+                                        <select v-model="clients.torrents.method" name="torrent_method" id="torrent_method" class="form-control input-sm">
+                                            <option v-for="(client, name) in clientsConfig.torrent" :value="name">{{client.title}}</option>
                                         </select>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="torrent.method === 'blackhole'">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Black hole folder location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_dir" title="Select .torrent black hole location" :initial-dir="torrent.dir" @update="torrent.dir = $event"></file-browser>
-                                            <div class="clear-left">
-                                                <p><b>.torrent</b> files are stored at this location for external software to find and use</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                            <div v-show="torrent.method !== 'blackhole'">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title" id="host_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} host:port</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_host" id="torrent_host" v-model="torrent.host" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p v-html="clients.torrent[torrent.method].description"></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'transmission'" class="field-pair" id="torrent_rpcurl_option">
-                                    <label>
-                                        <span class="component-title" id="rpcurl_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} RPC URL</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_rpcurl" id="torrent_rpcurl" v-model="torrent.rpcUrl" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p id="rpcurl_desc_">The path without leading and trailing slashes (e.g. transmission)</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://')" class="field-pair" id="torrent_auth_type_option">
-                                    <label>
-                                        <span class="component-title">Http Authentication</span>
-                                        <span class="component-desc">
-                                            <select v-model="torrent.authType" name="torrent_auth_type" id="torrent_auth_type" class="form-control input-sm">
+                                    </config-template>
+                                    
+                                    <div v-if="clients.torrents.method" v-show="clients.torrents.method === 'blackhole'">
+                                        <config-template label-for="torrent_dir" label="Black hole folder location">
+                                            <file-browser name="torrent_dir" title="Select .torrent black hole location" :initial-dir="clients.torrents.dir" @update="clients.torrents.dir = $event"></file-browser>
+                                            <p><b>.torrent</b> files are stored at this location for external software to find and use</p>
+                                        </config-template>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+
+                                    <div v-if="clients.torrents.method" v-show="clients.torrents.method !== 'blackhole'">
+                                        
+                                        <config-textbox v-model="clients.torrents.host" :label="clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title + ' host:port'" id="torrent_host">
+                                            <p v-html="clientsConfig.torrent[clients.torrents.method].description"></p>
+                                        </config-textbox>
+                                        
+                                        <config-textbox v-show="clients.torrents.method === 'transmission'" v-model="clients.torrents.rpcUrl" :label="clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title + ' RPC URL'" id="rpcurl_title">
+                                            <p id="rpcurl_desc_">The path without leading and trailing slashes (e.g. transmission)</p>
+                                        </config-textbox>
+
+                                        <config-template v-show="!authTypeIsDisabled" label-for="torrent_auth_type" label="Http Authentication">
+                                            <select v-model="clients.torrents.authType" name="torrent_auth_type" id="torrent_auth_type" class="form-control input-sm">
                                                 <option v-for="(title, name) in httpAuthTypes" :value="name">{{title}}</option>
                                             </select>
-                                            <p></p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].verifyCertOption" class="field-pair">
-                                    <label for="torrent_verify_cert">
-                                        <span class="component-title">Verify certificate</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_verify_cert" id="torrent_verify_cert" v-model="torrent.verifyCert"/>
+                                        </config-template>
+
+                                        <config-toggle-slider v-show="clientsConfig.torrent[clients.torrents.method].verifyCertOption" v-model="clients.torrents.verifyCert" label="Verify certificate" id="torrent_verify_cert">
                                             <p>Verify SSL certificates for HTTPS requests</p>
-                                            <p v-show="torrent.method === 'deluge'">disable if you get "Deluge: Authentication Error" in your log</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="!['rtorrent', 'deluge'].includes(torrent.method) || (torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://'))" class="field-pair" id="torrent_username_option">
-                                    <label>
-                                        <span class="component-title" id="username_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} username</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_username" id="torrent_username" v-model="torrent.username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method !== 'rtorrent' || (torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://'))" class="field-pair" id="torrent_password_option">
-                                    <label>
-                                        <span class="component-title" id="password_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} password</span>
-                                        <span class="component-desc">
-                                            <input type="password" name="torrent_password" id="torrent_password" v-model="torrent.password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].labelOption" class="field-pair" id="torrent_label_option">
-                                    <label>
-                                        <span class="component-title">Add label to torrent</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_label" id="torrent_label" v-model="torrent.label" class="form-control input-sm input200"/>
-                                            <span v-show="['deluge', 'deluged'].includes(torrent.method)"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: label plugin must be enabled in Deluge clients</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: for qBitTorrent 3.3.1 and up</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'utorrent'">
-                                                <div class="clear-left"><p>Global label for torrents.<br>
-                                                <b>%N:</b> use Series-Name as label (can be used with other text)</p></div>
-                                            </span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].labelAnimeOption" class="field-pair">
-                                    <label>
-                                        <span class="component-title">Add label to torrent for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_label_anime" id="torrent_label_anime" v-model="torrent.labelAnime" class="form-control input-sm input200"/>
-                                            <span v-show="['deluge', 'deluged'].includes(torrent.method)"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: label plugin must be enabled in Deluge clients</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: for qBitTorrent 3.3.1 and up</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'utorrent'">
-                                                <div class="clear-left"><p>Global label for torrents.<br>
-                                                <b>%N:</b> use Series-Name as label (can be used with other text)</p></div>
-                                            </span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].pathOption" class="field-pair" id="torrent_path_option">
-                                    <label>
-                                        <span class="component-title" id="directory_title">Downloaded files location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_path" title="Select downloaded files location" :initial-dir="torrent.path" @update="torrent.path = $event"></file-browser>
-                                            <div class="clear-left"><p>where <span id="torrent_client">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}}</span> will save downloaded files (blank for client default)
-                                                <span v-show="torrent.method === 'downloadstation'"> <b>note:</b> the destination has to be a shared folder for Synology DS</span></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].seedLocationOption" class="field-pair">
-                                    <label>
-                                        <span class="component-title" id="directory_title">Post-Processed seeding torrents location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_seed_location" title="Select torrent seed location" :initial-dir="torrent.seedLocation" @update="torrent.seedLocation = $event"></file-browser>
-                                            <div class="clear-left">
+                                            <p v-show="clients.torrents.method === 'deluge'">disable if you get "Deluge: Authentication Error" in your log</p>
+                                        </config-toggle-slider>
+
+                                        <config-textbox v-show="!torrentUsernameIsDisabled" 
+                                            v-model="clients.torrents.username" :label="(clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title) + ' username'" id="torrent_username" :explanations="['(blank for none)']">
+                                        </config-textbox>
+                                        
+                                        <config-textbox type="password" v-show="!torrentPasswordIsDisabled" 
+                                            v-model="clients.torrents.password" :label="(clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title) + ' password'" id="torrent_password" :explanations="['(blank for none)']">
+                                        </config-textbox>
+                                        
+                                        <div v-show="clientsConfig.torrent[clients.torrents.method].labelOption" id="torrent_label_option">
+                                            <config-textbox v-model="clients.torrents.label" label="Add label to torrent" id="torrent_label">
+                                                <span v-show="['deluge', 'deluged'].includes(clients.torrents.method)">
+                                                    <p>(blank spaces are not allowed)</p>
+                                                    <p>note: label plugin must be enabled in Deluge clients</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
+                                                    <p>note: for qBitTorrent 3.3.1 and up</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'utorrent'">
+                                                    <p>Global label for torrents.<br>
+                                                    <b>%N:</b> use Series-Name as label (can be used with other text)</p>
+                                                </span>
+                                            </config-textbox>
+                                        </div>
+
+                                        <div v-show="clientsConfig.torrent[clients.torrents.method].labelAnimeOption">
+                                            <config-textbox v-model="clients.torrents.labelAnime" label="Add label to torrent for anime" id="torrent_label_anime">
+                                                <span v-show="['deluge', 'deluged'].includes(clients.torrents.method)">
+                                                    <p>(blank spaces are not allowed)</p>
+                                                    <p>note: label plugin must be enabled in Deluge clients</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
+                                                    <p>note: for qBitTorrent 3.3.1 and up</p>
+                                                <span v-show="clients.torrents.method === 'utorrent'">
+                                                    <p>Global label for torrents.<br>
+                                                    <b>%N:</b> use Series-Name as label (can be used with other text)</p>
+                                                </span>
+                                            </config-textbox>
+                                        </div>
+
+                                        <config-template v-show="clientsConfig.torrent[clients.torrents.method].pathOption" label-for="torrent_client" label="Downloaded files location">
+                                                <file-browser name="torrent_path" title="Select downloaded files location" :initial-dir="clients.torrents.path" @update="clients.torrents.path = $event"></file-browser>
+                                                <p>where <span id="torrent_client" v-if="clientsConfig.torrent[clients.torrents.method]">{{clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title}}</span> will save downloaded files (blank for client default)
+                                                    <span v-show="clients.torrents.method === 'downloadstation'"> <b>note:</b> the destination has to be a shared folder for Synology DS</span>
+                                                </p>
+                                        </config-template>
+                                        
+                                        <config-template v-show="clientsConfig.torrent[clients.torrents.method].seedLocationOption" label-for="torrent_seed_location" label="Post-Processed seeding torrents location">
+                                                <file-browser name="torrent_seed_location" title="Select torrent seed location" :initial-dir="clients.torrents.seedLocation" @update="clients.torrents.seedLocation = $event"></file-browser>
                                                 <p>
-                                                    where <span id="torrent_client_seed_path">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}}</span> will move Torrents after Post-Processing<br/>
+                                                    where <span id="torrent_client_seed_path">{{clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title}}</span> will move Torrents after Post-Processing<br/>
                                                     <b>Note:</b> If your Post-Processor method is set to hard/soft link this will move your torrent
                                                     to another location after Post-Processor to prevent reprocessing the same file over and over.
                                                     This feature does a "Set Torrent location" or "Move Torrent" like in client
                                                 </p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].seedTimeOption" class="field-pair" id="torrent_seed_time_option">
-                                    <label>
-                                        <span class="component-title" id="torrent_seed_time_label">{{torrent.method === 'transmission' ? 'Stop seeding when inactive for' : 'Minimum seeding time is'}}</span>
-                                        <span class="component-desc">
-                                            <input type="number" step="1" name="torrent_seed_time" id="torrent_seed_time" v-model="torrent.seedTime" class="form-control input-sm input100" />
-                                            <p>hours. (default: '0' passes blank to client and '-1' passes nothing)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].pausedOption" class="field-pair" id="torrent_paused_option">
-                                    <label>
-                                        <span class="component-title">Start torrent paused</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_paused" id="torrent_paused" v-model="torrent.paused"/>
+                                        </config-template>
+
+                                        <config-textbox-number v-show="clientsConfig.torrent[clients.torrents.method].seedTimeOption" :min="-1" :step="1" v-model.number="clients.torrents.seedTime" :label="clients.torrents.method === 'transmission' ? 'Stop seeding when inactive for' : 'Minimum seeding time is'" id="torrent_seed_time" :explanations="['hours. (default: \'0\' passes blank to client and \'-1\' passes nothing)']"></config-textbox-number>
+
+                                        <config-toggle-slider v-show="clientsConfig.torrent[clients.torrents.method].pausedOption" v-model="clients.torrents.paused" label="Start torrent paused" id="torrent_paused">
                                             <p>add .torrent to client but do <b style="font-weight:900;">not</b> start downloading</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'transmission'" class="field-pair">
-                                    <label>
-                                        <span class="component-title">Allow high bandwidth</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_high_bandwidth" id="torrent_high_bandwidth" v-model="torrent.highBandwidth"/>
-                                            <p>use high bandwidth allocation if priority is high</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="torrent.testStatus" v-html="torrent.testStatus"></div>
-                                <input @click="testTorrentClient" type="button" value="Test Connection" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                        </div><!-- /torrent.enabled //-->
-                    </fieldset>
+                                        </config-toggle-slider>
+
+                                        <config-toggle-slider v-show="clients.torrents.method === 'transmission'" v-model="clients.torrents.highBandwidth" label="Allow high bandwidth" id="torrent_high_bandwidth" :explanations="['use high bandwidth allocation if priority is high']"></config-toggle-slider>
+
+                                        <div class="testNotification" v-show="clients.torrents.testStatus" v-html="clients.torrents.testStatus"></div>
+                                        <input @click="testTorrentClient" type="button" value="Test Connection" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+                                </div><!-- /torrent.enabled //-->
+                            </fieldset>
+                        </div>
+                    </div>
                 </div><!-- /#torrent-search //-->
                 <br>
-                <h6 class="pull-right"><b>All non-absolute folder locations are relative to <span class="path">{{dataDir}}</span></b> </h6>
+                <h6 class="pull-right"><b>All non-absolute folder locations are relative to <span class="path">{{config.dataDir}}</span></b> </h6>
                 <input type="submit" class="btn-medusa pull-left config_submitter button" value="Save Changes" />
             </div><!-- /config-components //-->
         </form>
diff --git a/themes/light/assets/js/medusa-runtime.js b/themes/light/assets/js/medusa-runtime.js
index d03b22ddd3..08cf58cf25 100644
--- a/themes/light/assets/js/medusa-runtime.js
+++ b/themes/light/assets/js/medusa-runtime.js
@@ -140,7 +140,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n/
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox-number',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: Number,\n      default: 10\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm input75'\n    },\n    min: {\n      type: Number,\n      default: 10\n    },\n    step: {\n      type: Number,\n      default: 1\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', Number(localValue));\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox-number',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: Number,\n      default: 10\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm input75'\n    },\n    min: {\n      type: Number,\n      default: 10\n    },\n    max: {\n      type: Number,\n      default: null\n    },\n    step: {\n      type: Number,\n      default: 1\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', Number(localValue));\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -152,7 +152,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n/
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    type: {\n      type: String,\n      default: 'text'\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm max-input350'\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', localValue);\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'config-textbox',\n  props: {\n    label: {\n      type: String,\n      required: true\n    },\n    id: {\n      type: String,\n      required: true\n    },\n    explanations: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    value: {\n      type: String,\n      default: ''\n    },\n    type: {\n      type: String,\n      default: 'text'\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n\n    /**\n     * Overwrite the default configured class on the <input/> element.\n     */\n    inputClass: {\n      type: String,\n      default: 'form-control input-sm max-input350'\n    },\n    placeholder: {\n      type: String,\n      default: ''\n    }\n  },\n  data: function data() {\n    return {\n      localValue: null\n    };\n  },\n  mounted: function mounted() {\n    var value = this.value;\n    this.localValue = value;\n  },\n  watch: {\n    value: function value() {\n      var value = this.value;\n      this.localValue = value;\n    }\n  },\n  methods: {\n    updateValue: function updateValue() {\n      var localValue = this.localValue;\n      this.$emit('input', localValue);\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -248,7 +248,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(f
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'select-list',\n  props: {\n    listItems: {\n      type: Array,\n      default: function _default() {\n        return [];\n      },\n      required: true\n    },\n    unique: {\n      type: Boolean,\n      default: true,\n      required: false\n    },\n    csvEnabled: {\n      type: Boolean,\n      default: false,\n      required: false\n    }\n  },\n  data: function data() {\n    return {\n      editItems: [],\n      newItem: '',\n      indexCounter: 0,\n      csv: '',\n      csvMode: this.csvEnabled\n    };\n  },\n  created: function created() {\n    var _this = this;\n\n    /*\n    These are needed in order to test the component,\n    but they break the component in the application:\n     this.editItems = this.sanitize(this.listItems);\n    this.csv = this.editItems.map(item => item.value).join(', ');\n    */\n\n    /**\n     * ListItems property might receive values originating from the API,\n     * that are sometimes not available when rendering.\n     * @TODO: This is not ideal! Maybe we can remove this in the future.\n     */\n    var unwatchProp = this.$watch('listItems', function () {\n      unwatchProp();\n      _this.editItems = _this.sanitize(_this.listItems);\n      _this.csv = _this.editItems.map(function (item) {\n        return item.value;\n      }).join(', ');\n    });\n  },\n  methods: {\n    addItem: function addItem(item) {\n      if (this.unique && this.editItems.find(function (i) {\n        return i.value === item;\n      })) {\n        return;\n      }\n\n      this.editItems.push({\n        id: this.indexCounter,\n        value: item\n      });\n      this.indexCounter += 1;\n    },\n    addNewItem: function addNewItem() {\n      var newItem = this.newItem,\n          editItems = this.editItems;\n\n      if (this.newItem === '') {\n        return;\n      }\n\n      this.addItem(newItem);\n      this.newItem = '';\n      this.$emit('change', editItems);\n    },\n    deleteItem: function deleteItem(item) {\n      this.editItems = this.editItems.filter(function (e) {\n        return e !== item;\n      });\n      this.$refs.newItemInput.focus();\n      this.$emit('change', this.editItems);\n    },\n    removeEmpty: function removeEmpty(item) {\n      return item.value === '' ? this.deleteItem(item) : false;\n    },\n\n    /**\n     * Initially an array of strings is passed, which we'd like to translate to an array of object.\n     * Where the index has been added.\n     * @param {string[]} values - Array of strings.\n     * @returns {Object[]} - An array of objects with the index and value.\n     */\n    sanitize: function sanitize(values) {\n      var _this2 = this;\n\n      if (!values) {\n        return [];\n      }\n\n      return values.map(function (value) {\n        if (typeof value === 'string') {\n          _this2.indexCounter += 1;\n          return {\n            id: _this2.indexCounter - 1,\n            value: value\n          };\n        }\n\n        return value;\n      });\n    },\n\n    /**\n     * Depending on which option is selected, sync the data to the other.\n     * Sync from editItems to a csv (comma separated) field.\n     * Or from csv to editItems.\n     */\n    syncValues: function syncValues() {\n      var _this3 = this;\n\n      if (this.csvMode) {\n        this.editItems = [];\n        this.csv.split(',').forEach(function (value) {\n          // Omit empty strings\n          if (value.trim()) {\n            _this3.addItem(value.trim());\n          }\n        });\n      } else {\n        this.csv = this.editItems.map(function (item) {\n          return item.value;\n        }).join(', ');\n      }\n    },\n\n    /**\n     * When switching between a list of inputs and a csv input\n     * whe're making sure that 1. the data is updated in editItems (which is the source of truth)\n     * and this.csv, which keeps track of the csv.\n     */\n    switchFields: function switchFields() {\n      this.syncValues();\n      this.csvMode = !this.csvMode;\n    }\n  },\n  watch: {\n    csv: function csv() {\n      this.syncValues();\n    },\n    listItems: function listItems() {\n      this.editItems = this.sanitize(this.listItems);\n      this.newItem = '';\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: 'select-list',\n  props: {\n    listItems: {\n      type: Array,\n      default: function _default() {\n        return [];\n      },\n      required: true\n    },\n    unique: {\n      type: Boolean,\n      default: true,\n      required: false\n    },\n    csvEnabled: {\n      type: Boolean,\n      default: false,\n      required: false\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data: function data() {\n    return {\n      editItems: [],\n      newItem: '',\n      indexCounter: 0,\n      csv: '',\n      csvMode: this.csvEnabled\n    };\n  },\n  created: function created() {\n    var _this = this;\n\n    /*\n    These are needed in order to test the component,\n    but they break the component in the application:\n     this.editItems = this.sanitize(this.listItems);\n    this.csv = this.editItems.map(item => item.value).join(', ');\n    */\n\n    /**\n     * ListItems property might receive values originating from the API,\n     * that are sometimes not available when rendering.\n     * @TODO: This is not ideal! Maybe we can remove this in the future.\n     */\n    var unwatchProp = this.$watch('listItems', function () {\n      unwatchProp();\n      _this.editItems = _this.sanitize(_this.listItems);\n      _this.csv = _this.editItems.map(function (item) {\n        return item.value;\n      }).join(', ');\n    });\n  },\n  methods: {\n    addItem: function addItem(item) {\n      if (this.unique && this.editItems.find(function (i) {\n        return i.value === item;\n      })) {\n        return;\n      }\n\n      this.editItems.push({\n        id: this.indexCounter,\n        value: item\n      });\n      this.indexCounter += 1;\n    },\n    addNewItem: function addNewItem() {\n      var newItem = this.newItem,\n          editItems = this.editItems;\n\n      if (this.newItem === '') {\n        return;\n      }\n\n      this.addItem(newItem);\n      this.newItem = '';\n      this.$emit('change', editItems);\n    },\n    deleteItem: function deleteItem(item) {\n      this.editItems = this.editItems.filter(function (e) {\n        return e !== item;\n      });\n      this.$refs.newItemInput.focus();\n      this.$emit('change', this.editItems);\n    },\n    removeEmpty: function removeEmpty(item) {\n      return item.value === '' ? this.deleteItem(item) : false;\n    },\n\n    /**\n     * Initially an array of strings is passed, which we'd like to translate to an array of object.\n     * Where the index has been added.\n     * @param {string[]} values - Array of strings.\n     * @returns {Object[]} - An array of objects with the index and value.\n     */\n    sanitize: function sanitize(values) {\n      var _this2 = this;\n\n      if (!values) {\n        return [];\n      }\n\n      return values.map(function (value) {\n        if (typeof value === 'string') {\n          _this2.indexCounter += 1;\n          return {\n            id: _this2.indexCounter - 1,\n            value: value\n          };\n        }\n\n        return value;\n      });\n    },\n\n    /**\n     * Depending on which option is selected, sync the data to the other.\n     * Sync from editItems to a csv (comma separated) field.\n     * Or from csv to editItems.\n     */\n    syncValues: function syncValues() {\n      var _this3 = this;\n\n      if (this.csvMode) {\n        this.editItems = [];\n        this.csv.split(',').forEach(function (value) {\n          // Omit empty strings\n          if (value.trim()) {\n            _this3.addItem(value.trim());\n          }\n        });\n      } else {\n        this.csv = this.editItems.map(function (item) {\n          return item.value;\n        }).join(', ');\n      }\n    },\n\n    /**\n     * When switching between a list of inputs and a csv input\n     * whe're making sure that 1. the data is updated in editItems (which is the source of truth)\n     * and this.csv, which keeps track of the csv.\n     */\n    switchFields: function switchFields() {\n      this.syncValues();\n      this.csvMode = !this.csvMode;\n    }\n  },\n  watch: {\n    csv: function csv() {\n      this.syncValues();\n    },\n    listItems: function listItems() {\n      this.editItems = this.sanitize(this.listItems);\n      this.newItem = '';\n    }\n  }\n});\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -876,7 +876,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox-number-content\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            _c(\n              \"input\",\n              _vm._b(\n                {\n                  directives: [\n                    {\n                      name: \"model\",\n                      rawName: \"v-model\",\n                      value: _vm.localValue,\n                      expression: \"localValue\"\n                    }\n                  ],\n                  attrs: { type: \"number\" },\n                  domProps: { value: _vm.localValue },\n                  on: {\n                    input: [\n                      function($event) {\n                        if ($event.target.composing) {\n                          return\n                        }\n                        _vm.localValue = $event.target.value\n                      },\n                      function($event) {\n                        _vm.updateValue()\n                      }\n                    ]\n                  }\n                },\n                \"input\",\n                {\n                  min: _vm.min,\n                  step: _vm.step,\n                  id: _vm.id,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder\n                },\n                false\n              )\n            ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox-number-content\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            _c(\n              \"input\",\n              _vm._b(\n                {\n                  directives: [\n                    {\n                      name: \"model\",\n                      rawName: \"v-model\",\n                      value: _vm.localValue,\n                      expression: \"localValue\"\n                    }\n                  ],\n                  attrs: { type: \"number\" },\n                  domProps: { value: _vm.localValue },\n                  on: {\n                    input: [\n                      function($event) {\n                        if ($event.target.composing) {\n                          return\n                        }\n                        _vm.localValue = $event.target.value\n                      },\n                      function($event) {\n                        _vm.updateValue()\n                      }\n                    ]\n                  }\n                },\n                \"input\",\n                {\n                  min: _vm.min,\n                  max: _vm.max,\n                  step: _vm.step,\n                  id: _vm.id,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder,\n                  disabled: _vm.disabled\n                },\n                false\n              )\n            ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox-number.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -888,7 +888,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            {\n              id: _vm.id,\n              type: _vm.type,\n              name: _vm.id,\n              class: _vm.inputClass,\n              placeholder: _vm.placeholder\n            }.type === \"checkbox\"\n              ? _c(\n                  \"input\",\n                  _vm._b(\n                    {\n                      directives: [\n                        {\n                          name: \"model\",\n                          rawName: \"v-model\",\n                          value: _vm.localValue,\n                          expression: \"localValue\"\n                        }\n                      ],\n                      attrs: { type: \"checkbox\" },\n                      domProps: {\n                        checked: Array.isArray(_vm.localValue)\n                          ? _vm._i(_vm.localValue, null) > -1\n                          : _vm.localValue\n                      },\n                      on: {\n                        input: function($event) {\n                          _vm.updateValue()\n                        },\n                        change: function($event) {\n                          var $$a = _vm.localValue,\n                            $$el = $event.target,\n                            $$c = $$el.checked ? true : false\n                          if (Array.isArray($$a)) {\n                            var $$v = null,\n                              $$i = _vm._i($$a, $$v)\n                            if ($$el.checked) {\n                              $$i < 0 && (_vm.localValue = $$a.concat([$$v]))\n                            } else {\n                              $$i > -1 &&\n                                (_vm.localValue = $$a\n                                  .slice(0, $$i)\n                                  .concat($$a.slice($$i + 1)))\n                            }\n                          } else {\n                            _vm.localValue = $$c\n                          }\n                        }\n                      }\n                    },\n                    \"input\",\n                    {\n                      id: _vm.id,\n                      type: _vm.type,\n                      name: _vm.id,\n                      class: _vm.inputClass,\n                      placeholder: _vm.placeholder\n                    },\n                    false\n                  )\n                )\n              : {\n                  id: _vm.id,\n                  type: _vm.type,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder\n                }.type === \"radio\"\n                ? _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: { type: \"radio\" },\n                        domProps: { checked: _vm._q(_vm.localValue, null) },\n                        on: {\n                          input: function($event) {\n                            _vm.updateValue()\n                          },\n                          change: function($event) {\n                            _vm.localValue = null\n                          }\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder\n                      },\n                      false\n                    )\n                  )\n                : _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: {\n                          type: {\n                            id: _vm.id,\n                            type: _vm.type,\n                            name: _vm.id,\n                            class: _vm.inputClass,\n                            placeholder: _vm.placeholder\n                          }.type\n                        },\n                        domProps: { value: _vm.localValue },\n                        on: {\n                          input: [\n                            function($event) {\n                              if ($event.target.composing) {\n                                return\n                              }\n                              _vm.localValue = $event.target.value\n                            },\n                            function($event) {\n                              _vm.updateValue()\n                            }\n                          ]\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder\n                      },\n                      false\n                    )\n                  ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"config-textbox\" } }, [\n    _c(\"div\", { staticClass: \"form-group\" }, [\n      _c(\"div\", { staticClass: \"row\" }, [\n        _c(\n          \"label\",\n          { staticClass: \"col-sm-2 control-label\", attrs: { for: _vm.id } },\n          [_c(\"span\", [_vm._v(_vm._s(_vm.label))])]\n        ),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"col-sm-10 content\" },\n          [\n            {\n              id: _vm.id,\n              type: _vm.type,\n              name: _vm.id,\n              class: _vm.inputClass,\n              placeholder: _vm.placeholder,\n              disabled: _vm.disabled\n            }.type === \"checkbox\"\n              ? _c(\n                  \"input\",\n                  _vm._b(\n                    {\n                      directives: [\n                        {\n                          name: \"model\",\n                          rawName: \"v-model\",\n                          value: _vm.localValue,\n                          expression: \"localValue\"\n                        }\n                      ],\n                      attrs: { type: \"checkbox\" },\n                      domProps: {\n                        checked: Array.isArray(_vm.localValue)\n                          ? _vm._i(_vm.localValue, null) > -1\n                          : _vm.localValue\n                      },\n                      on: {\n                        input: function($event) {\n                          _vm.updateValue()\n                        },\n                        change: function($event) {\n                          var $$a = _vm.localValue,\n                            $$el = $event.target,\n                            $$c = $$el.checked ? true : false\n                          if (Array.isArray($$a)) {\n                            var $$v = null,\n                              $$i = _vm._i($$a, $$v)\n                            if ($$el.checked) {\n                              $$i < 0 && (_vm.localValue = $$a.concat([$$v]))\n                            } else {\n                              $$i > -1 &&\n                                (_vm.localValue = $$a\n                                  .slice(0, $$i)\n                                  .concat($$a.slice($$i + 1)))\n                            }\n                          } else {\n                            _vm.localValue = $$c\n                          }\n                        }\n                      }\n                    },\n                    \"input\",\n                    {\n                      id: _vm.id,\n                      type: _vm.type,\n                      name: _vm.id,\n                      class: _vm.inputClass,\n                      placeholder: _vm.placeholder,\n                      disabled: _vm.disabled\n                    },\n                    false\n                  )\n                )\n              : {\n                  id: _vm.id,\n                  type: _vm.type,\n                  name: _vm.id,\n                  class: _vm.inputClass,\n                  placeholder: _vm.placeholder,\n                  disabled: _vm.disabled\n                }.type === \"radio\"\n                ? _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: { type: \"radio\" },\n                        domProps: { checked: _vm._q(_vm.localValue, null) },\n                        on: {\n                          input: function($event) {\n                            _vm.updateValue()\n                          },\n                          change: function($event) {\n                            _vm.localValue = null\n                          }\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder,\n                        disabled: _vm.disabled\n                      },\n                      false\n                    )\n                  )\n                : _c(\n                    \"input\",\n                    _vm._b(\n                      {\n                        directives: [\n                          {\n                            name: \"model\",\n                            rawName: \"v-model\",\n                            value: _vm.localValue,\n                            expression: \"localValue\"\n                          }\n                        ],\n                        attrs: {\n                          type: {\n                            id: _vm.id,\n                            type: _vm.type,\n                            name: _vm.id,\n                            class: _vm.inputClass,\n                            placeholder: _vm.placeholder,\n                            disabled: _vm.disabled\n                          }.type\n                        },\n                        domProps: { value: _vm.localValue },\n                        on: {\n                          input: [\n                            function($event) {\n                              if ($event.target.composing) {\n                                return\n                              }\n                              _vm.localValue = $event.target.value\n                            },\n                            function($event) {\n                              _vm.updateValue()\n                            }\n                          ]\n                        }\n                      },\n                      \"input\",\n                      {\n                        id: _vm.id,\n                        type: _vm.type,\n                        name: _vm.id,\n                        class: _vm.inputClass,\n                        placeholder: _vm.placeholder,\n                        disabled: _vm.disabled\n                      },\n                      false\n                    )\n                  ),\n            _vm._v(\" \"),\n            _vm._l(_vm.explanations, function(explanation, index) {\n              return _c(\"p\", { key: index }, [_vm._v(_vm._s(explanation))])\n            }),\n            _vm._v(\" \"),\n            _vm._t(\"default\")\n          ],\n          2\n        )\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/config-textbox.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -984,7 +984,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"select-list max-width\" }, [\n    _c(\"i\", {\n      staticClass: \"switch-input glyphicon glyphicon-refresh\",\n      attrs: { title: \"Switch between a list and comma separated values\" },\n      on: {\n        click: function($event) {\n          _vm.switchFields()\n        }\n      }\n    }),\n    _vm._v(\" \"),\n    !_vm.csvMode\n      ? _c(\n          \"ul\",\n          [\n            _vm._l(_vm.editItems, function(item) {\n              return _c(\"li\", { key: item.id }, [\n                _c(\"div\", { staticClass: \"input-group\" }, [\n                  _c(\"input\", {\n                    directives: [\n                      {\n                        name: \"model\",\n                        rawName: \"v-model\",\n                        value: item.value,\n                        expression: \"item.value\"\n                      }\n                    ],\n                    staticClass: \"form-control input-sm\",\n                    attrs: { type: \"text\" },\n                    domProps: { value: item.value },\n                    on: {\n                      input: [\n                        function($event) {\n                          if ($event.target.composing) {\n                            return\n                          }\n                          _vm.$set(item, \"value\", $event.target.value)\n                        },\n                        function($event) {\n                          _vm.removeEmpty(item)\n                        }\n                      ]\n                    }\n                  }),\n                  _vm._v(\" \"),\n                  _c(\n                    \"div\",\n                    {\n                      staticClass: \"input-group-btn\",\n                      on: {\n                        click: function($event) {\n                          _vm.deleteItem(item)\n                        }\n                      }\n                    },\n                    [_vm._m(0, true)]\n                  )\n                ])\n              ])\n            }),\n            _vm._v(\" \"),\n            _c(\"div\", { staticClass: \"new-item\" }, [\n              _c(\"div\", { staticClass: \"input-group\" }, [\n                _c(\"input\", {\n                  directives: [\n                    {\n                      name: \"model\",\n                      rawName: \"v-model\",\n                      value: _vm.newItem,\n                      expression: \"newItem\"\n                    }\n                  ],\n                  ref: \"newItemInput\",\n                  staticClass: \"form-control input-sm\",\n                  attrs: {\n                    type: \"text\",\n                    placeholder: \"add new values per line\"\n                  },\n                  domProps: { value: _vm.newItem },\n                  on: {\n                    input: function($event) {\n                      if ($event.target.composing) {\n                        return\n                      }\n                      _vm.newItem = $event.target.value\n                    }\n                  }\n                }),\n                _vm._v(\" \"),\n                _c(\n                  \"div\",\n                  {\n                    staticClass: \"input-group-btn\",\n                    on: {\n                      click: function($event) {\n                        _vm.addNewItem()\n                      }\n                    }\n                  },\n                  [_vm._m(1)]\n                )\n              ])\n            ]),\n            _vm._v(\" \"),\n            _vm.newItem.length > 0\n              ? _c(\"div\", { staticClass: \"new-item-help\" }, [\n                  _vm._v(\"\\n            Click \"),\n                  _c(\"i\", { staticClass: \"glyphicon glyphicon-plus\" }),\n                  _vm._v(\" to finish adding the value.\\n        \")\n                ])\n              : _vm._e()\n          ],\n          2\n        )\n      : _c(\"div\", { staticClass: \"csv\" }, [\n          _c(\"input\", {\n            directives: [\n              {\n                name: \"model\",\n                rawName: \"v-model\",\n                value: _vm.csv,\n                expression: \"csv\"\n              }\n            ],\n            staticClass: \"form-control input-sm\",\n            attrs: { type: \"text\", placeholder: \"add values comma separated\" },\n            domProps: { value: _vm.csv },\n            on: {\n              input: function($event) {\n                if ($event.target.composing) {\n                  return\n                }\n                _vm.csv = $event.target.value\n              }\n            }\n          })\n        ])\n  ])\n}\nvar staticRenderFns = [\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-remove\",\n          attrs: { title: \"Remove\" }\n        })\n      ]\n    )\n  },\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-plus\",\n          attrs: { title: \"Add\" }\n        })\n      ]\n    )\n  }\n]\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    _vm._b(\n      { staticClass: \"select-list max-width\" },\n      \"div\",\n      { disabled: _vm.disabled },\n      false\n    ),\n    [\n      _c(\"i\", {\n        staticClass: \"switch-input glyphicon glyphicon-refresh\",\n        attrs: { title: \"Switch between a list and comma separated values\" },\n        on: {\n          click: function($event) {\n            _vm.switchFields()\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      !_vm.csvMode\n        ? _c(\n            \"ul\",\n            [\n              _vm._l(_vm.editItems, function(item) {\n                return _c(\"li\", { key: item.id }, [\n                  _c(\"div\", { staticClass: \"input-group\" }, [\n                    _c(\"input\", {\n                      directives: [\n                        {\n                          name: \"model\",\n                          rawName: \"v-model\",\n                          value: item.value,\n                          expression: \"item.value\"\n                        }\n                      ],\n                      staticClass: \"form-control input-sm\",\n                      attrs: { type: \"text\" },\n                      domProps: { value: item.value },\n                      on: {\n                        input: [\n                          function($event) {\n                            if ($event.target.composing) {\n                              return\n                            }\n                            _vm.$set(item, \"value\", $event.target.value)\n                          },\n                          function($event) {\n                            _vm.removeEmpty(item)\n                          }\n                        ]\n                      }\n                    }),\n                    _vm._v(\" \"),\n                    _c(\n                      \"div\",\n                      {\n                        staticClass: \"input-group-btn\",\n                        on: {\n                          click: function($event) {\n                            _vm.deleteItem(item)\n                          }\n                        }\n                      },\n                      [_vm._m(0, true)]\n                    )\n                  ])\n                ])\n              }),\n              _vm._v(\" \"),\n              _c(\"div\", { staticClass: \"new-item\" }, [\n                _c(\"div\", { staticClass: \"input-group\" }, [\n                  _c(\"input\", {\n                    directives: [\n                      {\n                        name: \"model\",\n                        rawName: \"v-model\",\n                        value: _vm.newItem,\n                        expression: \"newItem\"\n                      }\n                    ],\n                    ref: \"newItemInput\",\n                    staticClass: \"form-control input-sm\",\n                    attrs: {\n                      type: \"text\",\n                      placeholder: \"add new values per line\"\n                    },\n                    domProps: { value: _vm.newItem },\n                    on: {\n                      input: function($event) {\n                        if ($event.target.composing) {\n                          return\n                        }\n                        _vm.newItem = $event.target.value\n                      }\n                    }\n                  }),\n                  _vm._v(\" \"),\n                  _c(\n                    \"div\",\n                    {\n                      staticClass: \"input-group-btn\",\n                      on: {\n                        click: function($event) {\n                          _vm.addNewItem()\n                        }\n                      }\n                    },\n                    [_vm._m(1)]\n                  )\n                ])\n              ]),\n              _vm._v(\" \"),\n              _vm.newItem.length > 0\n                ? _c(\"div\", { staticClass: \"new-item-help\" }, [\n                    _vm._v(\"\\n            Click \"),\n                    _c(\"i\", { staticClass: \"glyphicon glyphicon-plus\" }),\n                    _vm._v(\" to finish adding the value.\\n        \")\n                  ])\n                : _vm._e()\n            ],\n            2\n          )\n        : _c(\"div\", { staticClass: \"csv\" }, [\n            _c(\"input\", {\n              directives: [\n                {\n                  name: \"model\",\n                  rawName: \"v-model\",\n                  value: _vm.csv,\n                  expression: \"csv\"\n                }\n              ],\n              staticClass: \"form-control input-sm\",\n              attrs: {\n                type: \"text\",\n                placeholder: \"add values comma separated\"\n              },\n              domProps: { value: _vm.csv },\n              on: {\n                input: function($event) {\n                  if ($event.target.composing) {\n                    return\n                  }\n                  _vm.csv = $event.target.value\n                }\n              }\n            })\n          ])\n    ]\n  )\n}\nvar staticRenderFns = [\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-remove\",\n          attrs: { title: \"Remove\" }\n        })\n      ]\n    )\n  },\n  function() {\n    var _vm = this\n    var _h = _vm.$createElement\n    var _c = _vm._self._c || _h\n    return _c(\n      \"div\",\n      {\n        staticClass: \"btn btn-default input-sm\",\n        staticStyle: { \"font-size\": \"14px\" }\n      },\n      [\n        _c(\"i\", {\n          staticClass: \"glyphicon glyphicon-plus\",\n          attrs: { title: \"Add\" }\n        })\n      ]\n    )\n  }\n]\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/helpers/select-list.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -2956,7 +2956,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue_
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue-native-websocket */ \"./node_modules/vue-native-websocket/dist/build.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules */ \"./src/store/modules/index.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./mutation-types */ \"./src/store/mutation-types.js\");\n\n\n\n\n\nvar Store = vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Store;\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nvar store = new Store({\n  modules: {\n    auth: _modules__WEBPACK_IMPORTED_MODULE_3__[\"auth\"],\n    config: _modules__WEBPACK_IMPORTED_MODULE_3__[\"config\"],\n    defaults: _modules__WEBPACK_IMPORTED_MODULE_3__[\"defaults\"],\n    metadata: _modules__WEBPACK_IMPORTED_MODULE_3__[\"metadata\"],\n    notifications: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifications\"],\n    notifiers: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifiers\"],\n    qualities: _modules__WEBPACK_IMPORTED_MODULE_3__[\"qualities\"],\n    shows: _modules__WEBPACK_IMPORTED_MODULE_3__[\"shows\"],\n    socket: _modules__WEBPACK_IMPORTED_MODULE_3__[\"socket\"],\n    statuses: _modules__WEBPACK_IMPORTED_MODULE_3__[\"statuses\"]\n  },\n  state: {},\n  mutations: {},\n  getters: {},\n  actions: {}\n}); // Keep as a non-arrow function for `this` context.\n\nvar passToStoreHandler = function passToStoreHandler(eventName, event, next) {\n  var target = eventName.toUpperCase();\n  var eventData = event.data;\n\n  if (target === 'SOCKET_ONMESSAGE') {\n    var message = JSON.parse(eventData);\n    var data = message.data,\n        _event = message.event; // Show the notification to the user\n\n    if (_event === 'notification') {\n      var body = data.body,\n          hash = data.hash,\n          type = data.type,\n          title = data.title;\n      window.displayNotification(type, title, body, hash);\n    } else if (_event === 'configUpdated') {\n      var section = data.section,\n          _config = data.config;\n      this.store.dispatch('updateConfig', {\n        section: section,\n        config: _config\n      });\n    } else {\n      window.displayNotification('info', _event, data);\n    }\n  } // Resume normal 'passToStore' handling\n\n\n  next(eventName, event);\n};\n\nvar websocketUrl = function () {\n  var _window$location = window.location,\n      protocol = _window$location.protocol,\n      host = _window$location.host;\n  var proto = protocol === 'https:' ? 'wss:' : 'ws:';\n  var WSMessageUrl = '/ui';\n  var webRoot = document.body.getAttribute('web-root');\n  return \"\".concat(proto, \"//\").concat(host).concat(webRoot, \"/ws\").concat(WSMessageUrl);\n}();\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default.a, websocketUrl, {\n  store: store,\n  format: 'json',\n  reconnection: true,\n  // (Boolean) whether to reconnect automatically (false)\n  reconnectionAttempts: 2,\n  // (Number) number of reconnection attempts before giving up (Infinity),\n  reconnectionDelay: 1000,\n  // (Number) how long to initially wait before attempting a new (1000)\n  passToStoreHandler: passToStoreHandler,\n  // (Function|<false-y>) Handler for events triggered by the WebSocket (false)\n  mutations: {\n    SOCKET_ONOPEN: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONOPEN\"],\n    SOCKET_ONCLOSE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONCLOSE\"],\n    SOCKET_ONERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONERROR\"],\n    SOCKET_ONMESSAGE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONMESSAGE\"],\n    SOCKET_RECONNECT: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT\"],\n    SOCKET_RECONNECT_ERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT_ERROR\"]\n  }\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (store);\n\n//# sourceURL=webpack:///./src/store/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue-native-websocket */ \"./node_modules/vue-native-websocket/dist/build.js\");\n/* harmony import */ var vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules */ \"./src/store/modules/index.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./mutation-types */ \"./src/store/mutation-types.js\");\n\n\n\n\n\nvar Store = vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Store;\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vuex__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nvar store = new Store({\n  modules: {\n    auth: _modules__WEBPACK_IMPORTED_MODULE_3__[\"auth\"],\n    clients: _modules__WEBPACK_IMPORTED_MODULE_3__[\"clients\"],\n    config: _modules__WEBPACK_IMPORTED_MODULE_3__[\"config\"],\n    defaults: _modules__WEBPACK_IMPORTED_MODULE_3__[\"defaults\"],\n    metadata: _modules__WEBPACK_IMPORTED_MODULE_3__[\"metadata\"],\n    notifications: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifications\"],\n    notifiers: _modules__WEBPACK_IMPORTED_MODULE_3__[\"notifiers\"],\n    qualities: _modules__WEBPACK_IMPORTED_MODULE_3__[\"qualities\"],\n    search: _modules__WEBPACK_IMPORTED_MODULE_3__[\"search\"],\n    shows: _modules__WEBPACK_IMPORTED_MODULE_3__[\"shows\"],\n    socket: _modules__WEBPACK_IMPORTED_MODULE_3__[\"socket\"],\n    statuses: _modules__WEBPACK_IMPORTED_MODULE_3__[\"statuses\"]\n  },\n  state: {},\n  mutations: {},\n  getters: {},\n  actions: {}\n}); // Keep as a non-arrow function for `this` context.\n\nvar passToStoreHandler = function passToStoreHandler(eventName, event, next) {\n  var target = eventName.toUpperCase();\n  var eventData = event.data;\n\n  if (target === 'SOCKET_ONMESSAGE') {\n    var message = JSON.parse(eventData);\n    var data = message.data,\n        _event = message.event; // Show the notification to the user\n\n    if (_event === 'notification') {\n      var body = data.body,\n          hash = data.hash,\n          type = data.type,\n          title = data.title;\n      window.displayNotification(type, title, body, hash);\n    } else if (_event === 'configUpdated') {\n      var section = data.section,\n          _config = data.config;\n      this.store.dispatch('updateConfig', {\n        section: section,\n        config: _config\n      });\n    } else {\n      window.displayNotification('info', _event, data);\n    }\n  } // Resume normal 'passToStore' handling\n\n\n  next(eventName, event);\n};\n\nvar websocketUrl = function () {\n  var _window$location = window.location,\n      protocol = _window$location.protocol,\n      host = _window$location.host;\n  var proto = protocol === 'https:' ? 'wss:' : 'ws:';\n  var WSMessageUrl = '/ui';\n  var webRoot = document.body.getAttribute('web-root');\n  return \"\".concat(proto, \"//\").concat(host).concat(webRoot, \"/ws\").concat(WSMessageUrl);\n}();\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_native_websocket__WEBPACK_IMPORTED_MODULE_2___default.a, websocketUrl, {\n  store: store,\n  format: 'json',\n  reconnection: true,\n  // (Boolean) whether to reconnect automatically (false)\n  reconnectionAttempts: 2,\n  // (Number) number of reconnection attempts before giving up (Infinity),\n  reconnectionDelay: 1000,\n  // (Number) how long to initially wait before attempting a new (1000)\n  passToStoreHandler: passToStoreHandler,\n  // (Function|<false-y>) Handler for events triggered by the WebSocket (false)\n  mutations: {\n    SOCKET_ONOPEN: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONOPEN\"],\n    SOCKET_ONCLOSE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONCLOSE\"],\n    SOCKET_ONERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONERROR\"],\n    SOCKET_ONMESSAGE: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_ONMESSAGE\"],\n    SOCKET_RECONNECT: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT\"],\n    SOCKET_RECONNECT_ERROR: _mutation_types__WEBPACK_IMPORTED_MODULE_4__[\"SOCKET_RECONNECT_ERROR\"]\n  }\n});\n/* harmony default export */ __webpack_exports__[\"default\"] = (store);\n\n//# sourceURL=webpack:///./src/store/index.js?");
 
 /***/ }),
 
@@ -2972,6 +2972,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mut
 
 /***/ }),
 
+/***/ "./src/store/modules/clients.js":
+/*!**************************************!*\
+  !*** ./src/store/modules/clients.js ***!
+  \**************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  torrents: {\n    authType: null,\n    dir: null,\n    enabled: null,\n    highBandwidth: null,\n    host: null,\n    label: null,\n    labelAnime: null,\n    method: null,\n    path: null,\n    paused: null,\n    rpcurl: null,\n    seedLocation: null,\n    seedTime: null,\n    username: null,\n    verifySSL: null,\n    testStatus: 'Click below to test'\n  },\n  nzb: {\n    enabled: null,\n    method: null,\n    nzbget: {\n      category: null,\n      categoryAnime: null,\n      categoryAnimeBacklog: null,\n      categoryBacklog: null,\n      host: null,\n      priority: null,\n      useHttps: null,\n      username: null,\n      testStatus: 'Click below to test'\n    },\n    sabnzbd: {\n      category: null,\n      forced: null,\n      categoryAnime: null,\n      categoryBacklog: null,\n      categoryAnimeBacklog: null,\n      host: null,\n      username: null,\n      password: null,\n      apiKey: null,\n      testStatus: 'Click below to test'\n    }\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_0__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'clients') {\n    state = Object.assign(state, config);\n  }\n});\n\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/clients.js?");
+
+/***/ }),
+
 /***/ "./src/store/modules/config.js":
 /*!*************************************!*\
   !*** ./src/store/modules/config.js ***!
@@ -2980,7 +2992,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__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../api */ \"./src/api.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  wikiUrl: null,\n  donationsUrl: null,\n  localUser: null,\n  posterSortdir: null,\n  locale: null,\n  themeName: null,\n  selectedRootIndex: null,\n  webRoot: null,\n  namingForceFolders: null,\n  cacheDir: null,\n  databaseVersion: {\n    major: null,\n    minor: null\n  },\n  programDir: null,\n  dataDir: null,\n  animeSplitHomeInTabs: null,\n  torrents: {\n    authType: null,\n    dir: null,\n    enabled: null,\n    highBandwidth: null,\n    host: null,\n    label: null,\n    labelAnime: null,\n    method: null,\n    path: null,\n    paused: null,\n    rpcurl: null,\n    seedLocation: null,\n    seedTime: null,\n    username: null,\n    verifySSL: null\n  },\n  layout: {\n    show: {\n      specials: null,\n      showListOrder: [],\n      allSeasons: null\n    },\n    home: null,\n    history: null,\n    schedule: null\n  },\n  dbPath: null,\n  nzb: {\n    enabled: null,\n    method: null,\n    nzbget: {\n      category: null,\n      categoryAnime: null,\n      categoryAnimeBacklog: null,\n      categoryBacklog: null,\n      host: null,\n      priority: null,\n      useHttps: null,\n      username: null\n    },\n    sabnzbd: {\n      category: null,\n      forced: null,\n      categoryAnime: null,\n      categoryBacklog: null,\n      categoryAnimeBacklog: null,\n      host: null,\n      username: null\n    }\n  },\n  configFile: null,\n  fanartBackground: null,\n  trimZero: null,\n  animeSplitHome: null,\n  gitUsername: null,\n  branch: null,\n  commitHash: null,\n  indexers: {\n    config: {\n      main: {\n        externalMappings: {},\n        statusMap: {},\n        traktIndexers: {},\n        validLanguages: [],\n        langabbvToId: {}\n      },\n      indexers: {\n        tvdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tmdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tvmaze: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        }\n      }\n    }\n  },\n  sourceUrl: null,\n  rootDirs: [],\n  fanartBackgroundOpacity: null,\n  appArgs: [],\n  comingEpsDisplayPaused: null,\n  sortArticle: null,\n  timePreset: null,\n  subtitles: {\n    enabled: null\n  },\n  fuzzyDating: null,\n  backlogOverview: {\n    status: null,\n    period: null\n  },\n  posterSortby: null,\n  news: {\n    lastRead: null,\n    latest: null,\n    unread: null\n  },\n  logs: {\n    loggingLevels: {},\n    numErrors: null,\n    numWarnings: null\n  },\n  failedDownloads: {\n    enabled: null,\n    deleteFailed: null\n  },\n  postProcessing: {\n    naming: {\n      pattern: null,\n      multiEp: null,\n      enableCustomNamingSports: null,\n      enableCustomNamingAirByDate: null,\n      patternSports: null,\n      patternAirByDate: null,\n      enableCustomNamingAnime: null,\n      patternAnime: null,\n      animeMultiEp: null,\n      animeNamingType: null,\n      stripYear: null\n    },\n    showDownloadDir: null,\n    processAutomatically: null,\n    processMethod: null,\n    deleteRarContent: null,\n    unpack: null,\n    noDelete: null,\n    reflinkAvailable: null,\n    postponeIfSyncFiles: null,\n    autoPostprocessorFrequency: 10,\n    airdateEpisodes: null,\n    moveAssociatedFiles: null,\n    allowedExtensions: [],\n    addShowsWithoutDir: null,\n    createMissingShowDirs: null,\n    renameEpisodes: null,\n    postponeIfNoSubs: null,\n    nfoRename: null,\n    syncFiles: [],\n    fileTimestampTimezone: 'local',\n    extraScripts: [],\n    extraScriptsUrl: null,\n    multiEpStrings: {}\n  },\n  sslVersion: null,\n  pythonVersion: null,\n  comingEpsSort: null,\n  githubUrl: null,\n  datePreset: null,\n  subtitlesMulti: null,\n  pid: null,\n  os: null,\n  anonRedirect: null,\n  logDir: null,\n  recentShows: [],\n  showDefaults: {\n    status: null,\n    statusAfter: null,\n    quality: null,\n    subtitles: null,\n    seasonFolders: null,\n    anime: null,\n    scene: null\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'main') {\n    state = Object.assign(state, config);\n  }\n});\n\nvar getters = {\n  layout: function layout(state) {\n    return function (layout) {\n      return state.layout[layout];\n    };\n  }\n};\nvar actions = {\n  getConfig: function getConfig(context, section) {\n    var commit = context.commit;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].get('/config/' + (section || '')).then(function (res) {\n      if (section) {\n        var config = res.data;\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n        return config;\n      }\n\n      var sections = res.data;\n      Object.keys(sections).forEach(function (section) {\n        var config = sections[section];\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n      });\n      return sections;\n    });\n  },\n  setConfig: function setConfig(context, _ref2) {\n    var section = _ref2.section,\n        config = _ref2.config;\n\n    if (section !== 'main') {\n      return;\n    } // If an empty config object was passed, use the current state config\n\n\n    config = Object.keys(config).length === 0 ? context.state : config;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/' + section, config);\n  },\n  updateConfig: function updateConfig(context, _ref3) {\n    var section = _ref3.section,\n        config = _ref3.config;\n    var commit = context.commit;\n    return commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n      section: section,\n      config: config\n    });\n  },\n  setLayout: function setLayout(context, _ref4) {\n    var page = _ref4.page,\n        layout = _ref4.layout;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/main', {\n      layout: _defineProperty({}, page, layout)\n    }).then(function () {\n      setTimeout(function () {\n        // For now we reload the page since the layouts use python still\n        location.reload();\n      }, 500);\n    });\n  }\n};\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/config.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../api */ \"./src/api.js\");\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  wikiUrl: null,\n  donationsUrl: null,\n  localUser: null,\n  posterSortdir: null,\n  locale: null,\n  themeName: null,\n  selectedRootIndex: null,\n  webRoot: null,\n  namingForceFolders: null,\n  cacheDir: null,\n  databaseVersion: {\n    major: null,\n    minor: null\n  },\n  programDir: null,\n  dataDir: null,\n  animeSplitHomeInTabs: null,\n  torrents: {\n    authType: null,\n    dir: null,\n    enabled: null,\n    highBandwidth: null,\n    host: null,\n    label: null,\n    labelAnime: null,\n    method: null,\n    path: null,\n    paused: null,\n    rpcurl: null,\n    seedLocation: null,\n    seedTime: null,\n    username: null,\n    verifySSL: null\n  },\n  layout: {\n    show: {\n      specials: null,\n      showListOrder: [],\n      allSeasons: null\n    },\n    home: null,\n    history: null,\n    schedule: null\n  },\n  dbPath: null,\n  nzb: {\n    enabled: null,\n    method: null,\n    nzbget: {\n      category: null,\n      categoryAnime: null,\n      categoryAnimeBacklog: null,\n      categoryBacklog: null,\n      host: null,\n      priority: null,\n      useHttps: null,\n      username: null\n    },\n    sabnzbd: {\n      category: null,\n      forced: null,\n      categoryAnime: null,\n      categoryBacklog: null,\n      categoryAnimeBacklog: null,\n      host: null,\n      username: null,\n      password: null,\n      apiKey: null\n    }\n  },\n  configFile: null,\n  fanartBackground: null,\n  trimZero: null,\n  animeSplitHome: null,\n  gitUsername: null,\n  branch: null,\n  commitHash: null,\n  indexers: {\n    config: {\n      main: {\n        externalMappings: {},\n        statusMap: {},\n        traktIndexers: {},\n        validLanguages: [],\n        langabbvToId: {}\n      },\n      indexers: {\n        tvdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tmdb: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        },\n        tvmaze: {\n          apiParams: {\n            useZip: null,\n            language: null\n          },\n          baseUrl: null,\n          enabled: null,\n          icon: null,\n          id: null,\n          identifier: null,\n          mappedTo: null,\n          name: null,\n          scene_loc: null,\n          // eslint-disable-line camelcase\n          showUrl: null,\n          xemOrigin: null\n        }\n      }\n    }\n  },\n  sourceUrl: null,\n  rootDirs: [],\n  fanartBackgroundOpacity: null,\n  appArgs: [],\n  comingEpsDisplayPaused: null,\n  sortArticle: null,\n  timePreset: null,\n  subtitles: {\n    enabled: null\n  },\n  fuzzyDating: null,\n  backlogOverview: {\n    status: null,\n    period: null\n  },\n  posterSortby: null,\n  news: {\n    lastRead: null,\n    latest: null,\n    unread: null\n  },\n  logs: {\n    loggingLevels: {},\n    numErrors: null,\n    numWarnings: null\n  },\n  failedDownloads: {\n    enabled: null,\n    deleteFailed: null\n  },\n  postProcessing: {\n    naming: {\n      pattern: null,\n      multiEp: null,\n      enableCustomNamingSports: null,\n      enableCustomNamingAirByDate: null,\n      patternSports: null,\n      patternAirByDate: null,\n      enableCustomNamingAnime: null,\n      patternAnime: null,\n      animeMultiEp: null,\n      animeNamingType: null,\n      stripYear: null\n    },\n    showDownloadDir: null,\n    processAutomatically: null,\n    processMethod: null,\n    deleteRarContent: null,\n    unpack: null,\n    noDelete: null,\n    reflinkAvailable: null,\n    postponeIfSyncFiles: null,\n    autoPostprocessorFrequency: 10,\n    airdateEpisodes: null,\n    moveAssociatedFiles: null,\n    allowedExtensions: [],\n    addShowsWithoutDir: null,\n    createMissingShowDirs: null,\n    renameEpisodes: null,\n    postponeIfNoSubs: null,\n    nfoRename: null,\n    syncFiles: [],\n    fileTimestampTimezone: 'local',\n    extraScripts: [],\n    extraScriptsUrl: null,\n    multiEpStrings: {}\n  },\n  sslVersion: null,\n  pythonVersion: null,\n  comingEpsSort: null,\n  githubUrl: null,\n  datePreset: null,\n  subtitlesMulti: null,\n  pid: null,\n  os: null,\n  anonRedirect: null,\n  logDir: null,\n  recentShows: [],\n  showDefaults: {\n    status: null,\n    statusAfter: null,\n    quality: null,\n    subtitles: null,\n    seasonFolders: null,\n    anime: null,\n    scene: null\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'main') {\n    state = Object.assign(state, config);\n  }\n});\n\nvar getters = {\n  layout: function layout(state) {\n    return function (layout) {\n      return state.layout[layout];\n    };\n  }\n};\nvar actions = {\n  getConfig: function getConfig(context, section) {\n    var commit = context.commit;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].get('/config/' + (section || '')).then(function (res) {\n      if (section) {\n        var config = res.data;\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n        return config;\n      }\n\n      var sections = res.data;\n      Object.keys(sections).forEach(function (section) {\n        var config = sections[section];\n        commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n          section: section,\n          config: config\n        });\n      });\n      return sections;\n    });\n  },\n  setConfig: function setConfig(context, _ref2) {\n    var section = _ref2.section,\n        config = _ref2.config;\n\n    if (section !== 'main') {\n      return;\n    } // If an empty config object was passed, use the current state config\n\n\n    config = Object.keys(config).length === 0 ? context.state : config;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/' + section, config);\n  },\n  updateConfig: function updateConfig(context, _ref3) {\n    var section = _ref3.section,\n        config = _ref3.config;\n    var commit = context.commit;\n    return commit(_mutation_types__WEBPACK_IMPORTED_MODULE_1__[\"ADD_CONFIG\"], {\n      section: section,\n      config: config\n    });\n  },\n  setLayout: function setLayout(context, _ref4) {\n    var page = _ref4.page,\n        layout = _ref4.layout;\n    return _api__WEBPACK_IMPORTED_MODULE_0__[\"api\"].patch('config/main', {\n      layout: _defineProperty({}, page, layout)\n    }).then(function () {\n      setTimeout(function () {\n        // For now we reload the page since the layouts use python still\n        location.reload();\n      }, 500);\n    });\n  }\n};\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/config.js?");
 
 /***/ }),
 
@@ -3000,11 +3012,11 @@ eval("__webpack_require__.r(__webpack_exports__);\nvar state = {\n  show: {\n
 /*!************************************!*\
   !*** ./src/store/modules/index.js ***!
   \************************************/
-/*! exports provided: auth, config, defaults, metadata, notifications, notifiers, qualities, shows, socket, statuses */
+/*! exports provided: auth, clients, config, defaults, metadata, notifications, notifiers, qualities, shows, search, socket, statuses */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _auth__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./auth */ \"./src/store/modules/auth.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"auth\", function() { return _auth__WEBPACK_IMPORTED_MODULE_0__[\"default\"]; });\n\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./config */ \"./src/store/modules/config.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"config\", function() { return _config__WEBPACK_IMPORTED_MODULE_1__[\"default\"]; });\n\n/* harmony import */ var _defaults__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./defaults */ \"./src/store/modules/defaults.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"defaults\", function() { return _defaults__WEBPACK_IMPORTED_MODULE_2__[\"default\"]; });\n\n/* harmony import */ var _metadata__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./metadata */ \"./src/store/modules/metadata.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"metadata\", function() { return _metadata__WEBPACK_IMPORTED_MODULE_3__[\"default\"]; });\n\n/* harmony import */ var _notifications__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./notifications */ \"./src/store/modules/notifications.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifications\", function() { return _notifications__WEBPACK_IMPORTED_MODULE_4__[\"default\"]; });\n\n/* harmony import */ var _notifiers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./notifiers */ \"./src/store/modules/notifiers/index.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifiers\", function() { return _notifiers__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; });\n\n/* harmony import */ var _qualities__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./qualities */ \"./src/store/modules/qualities.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"qualities\", function() { return _qualities__WEBPACK_IMPORTED_MODULE_6__[\"default\"]; });\n\n/* harmony import */ var _shows__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./shows */ \"./src/store/modules/shows.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"shows\", function() { return _shows__WEBPACK_IMPORTED_MODULE_7__[\"default\"]; });\n\n/* harmony import */ var _socket__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./socket */ \"./src/store/modules/socket.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"socket\", function() { return _socket__WEBPACK_IMPORTED_MODULE_8__[\"default\"]; });\n\n/* harmony import */ var _statuses__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./statuses */ \"./src/store/modules/statuses.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"statuses\", function() { return _statuses__WEBPACK_IMPORTED_MODULE_9__[\"default\"]; });\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack:///./src/store/modules/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _auth__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./auth */ \"./src/store/modules/auth.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"auth\", function() { return _auth__WEBPACK_IMPORTED_MODULE_0__[\"default\"]; });\n\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./clients */ \"./src/store/modules/clients.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"clients\", function() { return _clients__WEBPACK_IMPORTED_MODULE_1__[\"default\"]; });\n\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./config */ \"./src/store/modules/config.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"config\", function() { return _config__WEBPACK_IMPORTED_MODULE_2__[\"default\"]; });\n\n/* harmony import */ var _defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./defaults */ \"./src/store/modules/defaults.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"defaults\", function() { return _defaults__WEBPACK_IMPORTED_MODULE_3__[\"default\"]; });\n\n/* harmony import */ var _metadata__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./metadata */ \"./src/store/modules/metadata.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"metadata\", function() { return _metadata__WEBPACK_IMPORTED_MODULE_4__[\"default\"]; });\n\n/* harmony import */ var _notifications__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./notifications */ \"./src/store/modules/notifications.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifications\", function() { return _notifications__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; });\n\n/* harmony import */ var _notifiers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./notifiers */ \"./src/store/modules/notifiers/index.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"notifiers\", function() { return _notifiers__WEBPACK_IMPORTED_MODULE_6__[\"default\"]; });\n\n/* harmony import */ var _qualities__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./qualities */ \"./src/store/modules/qualities.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"qualities\", function() { return _qualities__WEBPACK_IMPORTED_MODULE_7__[\"default\"]; });\n\n/* harmony import */ var _shows__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./shows */ \"./src/store/modules/shows.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"shows\", function() { return _shows__WEBPACK_IMPORTED_MODULE_8__[\"default\"]; });\n\n/* harmony import */ var _search__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./search */ \"./src/store/modules/search.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"search\", function() { return _search__WEBPACK_IMPORTED_MODULE_9__[\"default\"]; });\n\n/* harmony import */ var _socket__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./socket */ \"./src/store/modules/socket.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"socket\", function() { return _socket__WEBPACK_IMPORTED_MODULE_10__[\"default\"]; });\n\n/* harmony import */ var _statuses__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./statuses */ \"./src/store/modules/statuses.js\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"statuses\", function() { return _statuses__WEBPACK_IMPORTED_MODULE_11__[\"default\"]; });\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=webpack:///./src/store/modules/index.js?");
 
 /***/ }),
 
@@ -3308,6 +3320,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mut
 
 /***/ }),
 
+/***/ "./src/store/modules/search.js":
+/*!*************************************!*\
+  !*** ./src/store/modules/search.js ***!
+  \*************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mutation_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../mutation-types */ \"./src/store/mutation-types.js\");\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\nvar state = {\n  filters: {\n    ignoreUnknownSubs: false,\n    ignored: ['german', 'french', 'core2hd', 'dutch', 'swedish', 'reenc', 'MrLss', 'dubbed'],\n    undesired: ['internal', 'xvid'],\n    ignoredSubsList: ['dk', 'fin', 'heb', 'kor', 'nor', 'nordic', 'pl', 'swe'],\n    required: [],\n    preferred: []\n  },\n  general: {\n    minDailySearchFrequency: 10,\n    minBacklogFrequency: 720,\n    dailySearchFrequency: 40,\n    checkPropersInterval: '4h',\n    usenetRetention: 500,\n    maxCacheAge: 30,\n    backlogDays: 7,\n    torrentCheckerFrequency: 60,\n    backlogFrequency: 720,\n    cacheTrimming: false,\n    deleteFailed: false,\n    downloadPropers: true,\n    useFailedDownloads: false,\n    minTorrentCheckerFrequency: 30,\n    removeFromClient: false,\n    randomizeProviders: false,\n    propersSearchDays: 2,\n    allowHighPriority: true,\n    trackersList: ['udp://tracker.coppersurfer.tk:6969/announce', 'udp://tracker.leechers-paradise.org:6969/announce', 'udp://tracker.zer0day.to:1337/announce', 'udp://tracker.opentrackr.org:1337/announce', 'http://tracker.opentrackr.org:1337/announce', 'udp://p4p.arenabg.com:1337/announce', 'http://p4p.arenabg.com:1337/announce', 'udp://explodie.org:6969/announce', 'udp://9.rarbg.com:2710/announce', 'http://explodie.org:6969/announce', 'http://tracker.dler.org:6969/announce', 'udp://public.popcorn-tracker.org:6969/announce', 'udp://tracker.internetwarriors.net:1337/announce', 'udp://ipv4.tracker.harry.lu:80/announce', 'http://ipv4.tracker.harry.lu:80/announce', 'udp://mgtracker.org:2710/announce', 'http://mgtracker.org:6969/announce', 'udp://tracker.mg64.net:6969/announce', 'http://tracker.mg64.net:6881/announce', 'http://torrentsmd.com:8080/announce']\n  }\n};\n\nvar mutations = _defineProperty({}, _mutation_types__WEBPACK_IMPORTED_MODULE_0__[\"ADD_CONFIG\"], function (state, _ref) {\n  var section = _ref.section,\n      config = _ref.config;\n\n  if (section === 'search') {\n    state = Object.assign(state, config);\n  }\n});\n\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/search.js?");
+
+/***/ }),
+
 /***/ "./src/store/modules/shows.js":
 /*!************************************!*\
   !*** ./src/store/modules/shows.js ***!
diff --git a/themes/light/templates/config_search.mako b/themes/light/templates/config_search.mako
index 4f362728ef..080829afba 100644
--- a/themes/light/templates/config_search.mako
+++ b/themes/light/templates/config_search.mako
@@ -17,7 +17,26 @@ window.app = new Vue({
     el: '#vue-wrap',
     data() {
         return {
-            clients: {
+            configLoaded: false,
+            checkPropersIntervalLabels: [
+                { text: '24 hours', value: 'daily' },
+                { text: '4 hours', value: '4h' },
+                { text: '90 mins', value: '90m' },
+                { text: '45 mins', value: '45m' },
+                { text: '24 hours', value: '15m' }
+            ],
+            nzbGetPriorityOptions: [
+                { text: 'Very low', value: -100 },
+                { text: 'Low', value: -50 },
+                { text: 'Normal', value: 0 },
+                { text: 'High', value: 50 },
+                { text: 'Very high', value: 100 },
+                { text: 'Force', value: 900 },
+
+            ],
+
+            // Static clients config
+            clientsConfig: {
                 torrent: {
                     blackhole: {
                         title: 'Black hole'
@@ -103,60 +122,126 @@ window.app = new Vue({
                     }
                 },
             },
-            torrent: {
-                enabled: ${js_bool(app.USE_TORRENTS)},
-                dir: ${json.dumps(app.TORRENT_DIR)},
-                method: ${json.dumps(app.TORRENT_METHOD)},
-                host: ${json.dumps(app.TORRENT_HOST)},
-                rpcUrl: ${json.dumps(app.TORRENT_RPCURL)},
-                username: ${json.dumps(app.TORRENT_USERNAME)},
-                password: ${json.dumps(app.TORRENT_PASSWORD)},
-                label: ${json.dumps(app.TORRENT_LABEL)},
-                labelAnime: ${json.dumps(app.TORRENT_LABEL_ANIME)},
-                path: ${json.dumps(app.TORRENT_PATH)},
-                seedLocation: ${json.dumps(app.TORRENT_SEED_LOCATION)},
-                seedTime: ${json.dumps(app.TORRENT_SEED_TIME)},
-                testStatus: 'Click below to test',
-                authType: ${json.dumps(app.TORRENT_AUTH_TYPE)},
-                verifyCert: ${js_bool(app.TORRENT_VERIFY_CERT)},
-                paused: ${js_bool(app.TORRENT_PAUSED)},
-                highBandwidth: ${js_bool(app.TORRENT_HIGH_BANDWIDTH)},
-            },
-            nzb: {
-                enabled: ${js_bool(app.USE_NZBS)},
-                dir: ${json.dumps(app.NZB_DIR)},
-                method: ${json.dumps(app.NZB_METHOD)},
-                nzbget: {
-                    useHttps: ${js_bool(app.NZBGET_USE_HTTPS)},
-                    host: ${json.dumps(app.NZBGET_HOST)},
-                    username: ${json.dumps(app.NZBGET_USERNAME)},
-                    password: ${json.dumps(app.NZBGET_PASSWORD)},
+            // Mapped from state module: clients.js
+            clients: {
+                torrents: {
+                    authType: null,
+                    dir: null,
+                    enabled: null,
+                    highBandwidth: null,
+                    host: null,
+                    label: null,
+                    labelAnime: null,
+                    method: null,
+                    path: null,
+                    paused: null,
+                    rpcurl: null,
+                    seedLocation: null,
+                    seedTime: null,
+                    username: null,
+                    verifySSL: null,
                     testStatus: 'Click below to test',
-                    category: ${json.dumps(app.NZBGET_CATEGORY)},
-                    categoryBacklog: ${json.dumps(app.NZBGET_CATEGORY_BACKLOG)},
-                    categoryAnime: ${json.dumps(app.NZBGET_CATEGORY_ANIME)},
-                    categoryAnimeBacklog: ${json.dumps(app.NZBGET_CATEGORY_ANIME_BACKLOG)},
-                    priority: ${app.NZBGET_PRIORITY},
-                    priorityOptions: {
-                        'Very low': -100,
-                        'Low': -50,
-                        'Normal': 0,
-                        'High': 50,
-                        'Very high': 100,
-                        'Force': 900
+                },
+                nzb: {
+                    enabled: null,
+                    method: null,
+                    nzbget: {
+                        category: null,
+                        categoryAnime: null,
+                        categoryAnimeBacklog: null,
+                        categoryBacklog: null,
+                        host: null,
+                        priority: null,
+                        useHttps: null,
+                        username: null,
+                        testStatus: 'Click below to test',
+                    },
+                    sabnzbd: {
+                        category: null,
+                        forced: null,
+                        categoryAnime: null,
+                        categoryBacklog: null,
+                        categoryAnimeBacklog: null,
+                        host: null,
+                        username: null,
+                        password: null,
+                        apiKey: null,
+                        testStatus: 'Click below to test',
                     }
+                }
+            },
+            // Mapped from state module: search.js
+            search: {
+		        filters: {
+                    ignoreUnknownSubs: false,
+                    ignored: [
+                        'german',
+                        'french',
+                        'core2hd',
+                        'dutch',
+                        'swedish',
+                        'reenc',
+                        'MrLss',
+                        'dubbed'
+                    ],
+                    undesired: [
+                        'internal',
+                        'xvid'
+                    ],
+                    ignoredSubsList: [
+                        'dk',
+                        'fin',
+                        'heb',
+                        'kor',
+                        'nor',
+                        'nordic',
+                        'pl',
+                        'swe'
+                    ],
+                    required: [],
+                    preferred: []
                 },
-                sabnzbd: {
-                    host: ${json.dumps(app.SAB_HOST)},
-                    username: ${json.dumps(app.SAB_USERNAME)},
-                    password: ${json.dumps(app.SAB_PASSWORD)},
-                    apiKey: ${json.dumps(app.SAB_APIKEY)},
-                    testStatus: 'Click below to test',
-                    category: ${json.dumps(app.SAB_CATEGORY)},
-                    categoryBacklog: ${json.dumps(app.SAB_CATEGORY_BACKLOG)},
-                    categoryAnime: ${json.dumps(app.SAB_CATEGORY_ANIME)},
-                    categoryAnimeBacklog: ${json.dumps(app.SAB_CATEGORY_ANIME_BACKLOG)},
-                    forced: ${js_bool(app.SAB_FORCED)}
+                general: {
+                    minDailySearchFrequency: 10,
+                    minBacklogFrequency: 720,
+                    dailySearchFrequency: 40,
+                    checkPropersInterval: '4h',
+                    usenetRetention: 500,
+                    maxCacheAge: 30,
+                    backlogDays: 7,
+                    torrentCheckerFrequency: 60,
+                    backlogFrequency: 720,
+                    cacheTrimming: false,
+                    deleteFailed: false,
+                    downloadPropers: true,
+                    useFailedDownloads: false,
+                    minTorrentCheckerFrequency: 30,
+                    removeFromClient: false,
+                    randomizeProviders: false,
+                    propersSearchDays: 2,
+                    allowHighPriority: true,
+                    trackersList: [
+                        'udp://tracker.coppersurfer.tk:6969/announce',
+                        'udp://tracker.leechers-paradise.org:6969/announce',
+                        'udp://tracker.zer0day.to:1337/announce',
+                        'udp://tracker.opentrackr.org:1337/announce',
+                        'http://tracker.opentrackr.org:1337/announce',
+                        'udp://p4p.arenabg.com:1337/announce',
+                        'http://p4p.arenabg.com:1337/announce',
+                        'udp://explodie.org:6969/announce',
+                        'udp://9.rarbg.com:2710/announce',
+                        'http://explodie.org:6969/announce',
+                        'http://tracker.dler.org:6969/announce',
+                        'udp://public.popcorn-tracker.org:6969/announce',
+                        'udp://tracker.internetwarriors.net:1337/announce',
+                        'udp://ipv4.tracker.harry.lu:80/announce',
+                        'http://ipv4.tracker.harry.lu:80/announce',
+                        'udp://mgtracker.org:2710/announce',
+                        'http://mgtracker.org:6969/announce',
+                        'udp://tracker.mg64.net:6969/announce',
+                        'http://tracker.mg64.net:6881/announce',
+                        'http://torrentsmd.com:8080/announce'
+                    ]
                 }
             },
             httpAuthTypes: {
@@ -164,50 +249,56 @@ window.app = new Vue({
                 basic: 'Basic',
                 digest: 'Digest'
             },
-
-            // Episode Search: General Config
-            randomizeProviders: ${js_bool(app.RANDOMIZE_PROVIDERS)},
-            downloadPropers: ${js_bool(app.DOWNLOAD_PROPERS)},
-            checkPropersInterval: ${json.dumps(app.CHECK_PROPERS_INTERVAL)},
-            propersIntervalLabels: ${json.dumps(app.PROPERS_INTERVAL_LABELS)},
-            propersSearchDays: ${app.PROPERS_SEARCH_DAYS},
-            backlogDays: ${app.BACKLOG_DAYS},
-            backlogFrequency: ${app.BACKLOG_FREQUENCY},
-            minBacklogFrequency: ${app.MIN_BACKLOG_FREQUENCY},
-            dailySearchFrequency: ${app.DAILYSEARCH_FREQUENCY},
-            minDailySearchFrequency: ${app.MIN_DAILYSEARCH_FREQUENCY},
-            removeFromClient: ${js_bool(app.REMOVE_FROM_CLIENT and app.TORRENT_METHOD in ('transmission', 'deluge', 'deluged'))},
-            torrentCheckerFrequency: ${app.TORRENT_CHECKER_FREQUENCY},
-            minTorrentCheckerFrequency: ${app.MIN_TORRENT_CHECKER_FREQUENCY},
-            usenetRetention: ${app.USENET_RETENTION},
-            trackersList: ${json.dumps(app.TRACKERS_LIST)}.join(', '),
-            allowHighPriority: ${js_bool(app.ALLOW_HIGH_PRIORITY)},
-            useFailedDownloads: ${js_bool(app.USE_FAILED_DOWNLOADS)},
-            deleteFailed: ${js_bool(app.DELETE_FAILED)},
-            cacheTrimming: ${js_bool(app.CACHE_TRIMMING)},
-            maxCacheAge: ${app.MAX_CACHE_AGE},
-
-            // Episode Search: Search Filters
-            ignoreWords: ${json.dumps(app.IGNORE_WORDS)}.join(', '),
-            undesiredWords: ${json.dumps(app.UNDESIRED_WORDS)}.join(', '),
-            preferredWords: ${json.dumps(app.PREFERRED_WORDS)}.join(', '),
-            requireWords: ${json.dumps(app.REQUIRE_WORDS)}.join(', '),
-            ignoredSubsList: ${json.dumps(app.IGNORED_SUBS_LIST)}.join(', '),
-            ignoreUndSubs: ${js_bool(app.IGNORE_UND_SUBS)},
-
-            // Global
-            dataDir: ${json.dumps(app.DATA_DIR)},
         };
     },
+    computed: {
+        stateSearch() {
+            return this.$store.state.search;
+        },
+        stateClients() {
+            return this.$store.state.clients;            
+        },
+        torrentUsernameIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (!['rtorrent', 'deluge'].includes(method) || method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        },
+        torrentPasswordIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (method !== 'rtorrent' || method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        },
+        authTypeIsDisabled() {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { host, method } = torrents;
+            let torrentHost = host || '' 
+            if (method === 'rtorrent' && !torrentHost.startsWith('scgi://')) {
+                return false;
+            }
+            return true;
+        }
+    },
     beforeMount() {
         $('#config-components').tabs();
     },
     methods: {
         async testTorrentClient() {
-            const { torrent } = this;
-            const { method, host, username, password } = torrent;
+            const { clients } = this;
+            const { torrents } = clients;
+            const { method, host, username, password } = torrents;
 
-            this.torrent.testStatus = MEDUSA.config.loading;
+            this.clients.torrents.testStatus = MEDUSA.config.loading;
 
             const params = {
                 torrent_method: method,
@@ -217,14 +308,15 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testTorrent', { params });
 
-            this.torrent.testStatus = resp.data;
+            this.clients.torrents.testStatus = resp.data;
         },
         async testNzbget() {
-            const { nzb } = this;
+            const { clients } = this;
+            const { nzb } = clients;
             const { nzbget } = nzb;
             const { host, username, password, useHttps } = nzbget;
 
-            this.nzb.nzbget.testStatus = MEDUSA.config.loading;
+            this.clients.nzb.nzbget.testStatus = MEDUSA.config.loading;
 
             const params = {
                 host,
@@ -234,14 +326,15 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testNZBget', { params });
 
-            this.nzb.nzbget.testStatus = resp.data;
+            this.clients.nzb.nzbget.testStatus = resp.data;
         },
         async testSabnzbd() {
-            const { nzb } = this;
+            const { clients } = this;
+            const { nzb } = clients;
             const { sabnzbd } = nzb;
             const { host, username, password, apiKey } = sabnzbd;
 
-            this.nzb.sabnzbd.testStatus = MEDUSA.config.loading;
+            this.clients.nzb.sabnzbd.testStatus = MEDUSA.config.loading;
 
             const params = {
                 host,
@@ -251,42 +344,85 @@ window.app = new Vue({
             };
             const resp = await apiRoute.get('home/testSABnzbd', { params });
 
-            this.nzb.sabnzbd.testStatus = resp.data;
+            this.clients.nzb.sabnzbd.testStatus = resp.data;
+        },
+        save() {
+            const { $store, clients, configLoaded, search } = this;
+            // We want to wait until the page has been fully loaded, before starting to save stuff.
+            if (!configLoaded) {
+                return;
+            }
+            // Disable the save button until we're done.
+            this.saving = true;
+
+            // Clone the config into a new object
+            const config = Object.assign({}, {search}, {clients});
+
+            const section = 'main';
+            $store.dispatch('setConfig', { section, config }).then(() => {
+                this.$snotify.success(
+                    'Saved Search config',
+                    'Saved',
+                    { timeout: 5000 }
+                );
+            }).catch(() => {
+                this.$snotify.error(
+                    'Error while trying to save search config',
+                    'Error'
+                );
+            });
         }
     },
     watch: {
-        'torrent.host'(host) {
-            const { torrent } = this;
-            const { method } = torrent;
+        'clients.torrents.host'(host) {
+            const { clients } = this;
+            const { torrents } = clients;
+            const { method } = torrents;
 
             if (method === 'rtorrent') {
+                if (!host) {
+                    return;
+                }
                 const isMatch = host.startsWith('scgi://');
 
                 if (isMatch) {
-                    this.torrent.username = '';
-                    this.torrent.password = '';
-                    this.torrent.authType = 'none';
+                    this.clients.torrents.username = '';
+                    this.clients.torrents.password = '';
+                    this.clients.torrents.authType = 'none';
                 }
             }
 
             if (method === 'deluge') {
-                this.torrent.username = '';
+                this.clients.torrents.username = '';
             }
         },
-        'torrent.method'(method) {
-            if (!this.clients.torrent[method].removeFromClientOption) {
-                this.removeFromClient = false;
+        'clients.torrents.method'(method) {
+            if (!this.clientsConfig.torrent[method].removeFromClientOption) {
+                this.search.general.removeFromClient = false;
             }
         }
+    },
+    mounted() {
+        // The real vue stuff
+        // This is used to wait for the config to be loaded by the store.
+        this.$once('loaded', () => {
+            const { clients, search, stateClients, stateSearch } = this;
+
+            // Map the state values to local data.
+            this.search = Object.assign({}, search, stateSearch);
+            this.clients = Object.assign({}, clients, stateClients);
+            this.configLoaded = true;
+        });
     }
 });
 </script>
 </%block>
 <%block name="content">
+<vue-snotify></vue-snotify>
 <h1 class="header">{{ $route.meta.header }}</h1>
 <div id="config">
     <div id="config-content">
-        <form id="configForm" action="config/search/saveSearch" method="post">
+        <form id="configForm" method="post" @submit.prevent="save()">
             <div id="config-components">
                 <ul>
                     <li><app-link href="#episode-search">Episode Search</app-link></li>
@@ -295,676 +431,323 @@ window.app = new Vue({
                 </ul>
                 <div id="episode-search">
                     <!-- general settings //-->
-                    <div class="component-group-desc-legacy">
-                        <h3>General Search Settings</h3>
-                        <p>How to manage searching with <app-link href="config/providers">providers</app-link>.</p>
-                    </div>
-                    <div class="component-group">
-                        <fieldset class="component-group-list">
-                            <div class="field-pair">
-                                <label for="randomize_providers">
-                                    <span class="component-title">Randomize Providers</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="randomize_providers" id="randomize_providers" v-model="randomizeProviders"/>
-                                        <p>randomize the provider search order instead of going in order of placement</p>
-                                    </span>
-                                </label>
-                            </div><!-- randomize providers -->
-                            <div class="field-pair">
-                                <label for="download_propers">
-                                    <span class="component-title">Download propers</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="download_propers" id="download_propers" v-model="downloadPropers"/>
-                                        <p>replace original download with "Proper" or "Repack" if nuked</p>
-                                    </span>
-                                </label>
-                            </div><!-- download propers -->
-                            <div v-show="downloadPropers">
-                                <div class="field-pair">
-                                    <label for="check_propers_interval">
-                                        <span class="component-title">Check propers every:</span>
-                                        <span class="component-desc">
-                                            <select id="check_propers_interval" name="check_propers_interval" v-model="checkPropersInterval" class="form-control input-sm">
-                                                <option v-for="(label, interval) in propersIntervalLabels" :value="interval">{{label}}</option>
-                                            </select>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Proper search days</span>
-                                        <span class="component-desc">
-                                            <input type="number" min="2" max="7" step="1" name="propers_search_days" v-model.number="propersSearchDays" class="form-control input-sm input75"/>
-                                            <p>how many days to keep searching for propers since episode airdate (default: 2 days)</p>
-                                        </span>
-                                    </label>
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>General Search Settings</h3>
+                            <p>How to manage searching with <app-link href="config/providers">providers</app-link>.</p>
+                        </div>
+                    
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-toggle-slider v-model="search.general.randomizeProviders" label="Randomize Providers" id="randomize_providers" :explanations="['randomize the provider search order instead of going in order of placement']" ></config-toggle-slider>
+                                <config-toggle-slider v-model="search.general.downloadPropers" label="Download propers" id="download_propers" :explanations="['replace original download with \'Proper\' or \'Repack\' if nuked']" ></config-toggle-slider>
+                                
+                                <div v-show="search.general.downloadPropers">
+                                    <config-template label="Check propers every" label-for="check_propers_interval">
+                                        <select id="check_propers_interval" name="check_propers_interval" v-model="search.general.checkPropersInterval" class="form-control input-sm">
+                                            <option v-for="option in checkPropersIntervalLabels" :value="option.value">
+                                                {{option.text}}
+                                            </option>
+                                        </select>
+                                    </config-template>
+
+                                    <config-textbox-number :min="2" :max="7" :step="1" v-model.number="search.general.propersSearchDays" label="Proper search days" id="propers_search_days" :explanations="['how many days to keep searching for propers since episode airdate (default: 2 days)']"></config-textbox-number>
+                                    
                                 </div><!-- check propers -->
-                            </div>
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Forced backlog search day(s)</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="backlog_days" v-model.number="backlogDays" class="form-control input-sm input75"/>
-                                        <p>number of day(s) that the "Forced Backlog Search" will cover (e.g. 7 Days)</p>
-                                    </span>
-                                </label>
-                            </div><!-- backlog days -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Backlog search frequency</span>
-                                    <span class="component-desc">
-                                        <input type="number" :min="minBacklogFrequency" step="1" name="backlog_frequency" v-model.number="backlogFrequency" class="form-control input-sm input75"/>
-                                        <p>time in minutes between searches (min. {{minBacklogFrequency}})</p>
-                                    </span>
-                                </label>
-                            </div><!-- backlog frequency -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Daily search frequency</span>
-                                    <span class="component-desc">
-                                        <input type="number" :min="minDailySearchFrequency" step="1" name="dailysearch_frequency" v-model.number="dailySearchFrequency" class="form-control input-sm input75"/>
-                                        <p>time in minutes between searches (min. {{minDailySearchFrequency}})</p>
-                                    </span>
-                                </label>
-                            </div><!-- daily search frequency -->
-                            <div class="field-pair" v-show="clients.torrent[torrent.method].removeFromClientOption">
-                                <label for="remove_from_client">
-                                    <span class="component-title">Remove torrents from client</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="remove_from_client" id="remove_from_client" v-model="removeFromClient"/>
-                                        <p>Remove torrent from client (also torrent data) when provider ratio is reached</p>
-                                        <p><b>Note:</b> For now only Transmission and Deluge are supported</p>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="removeFromClient">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Frequency to check torrents ratio</span>
-                                        <span class="component-desc">
-                                            <input type="number" :min="minTorrentCheckerFrequency" step="1" name="torrent_checker_frequency" v-model.number="torrentCheckerFrequency" class="form-control input-sm input75"/>
-                                            <p>Frequency in minutes to check torrent's ratio (default: 60)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Usenet retention</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="usenet_retention" v-model.number="usenetRetention" class="form-control input-sm input75"/>
-                                        <p>age limit in days for usenet articles to be used (e.g. 500)</p>
-                                    </span>
-                                </label>
-                            </div><!-- usenet retention -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Trackers list</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="trackers_list" v-model="trackersList" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            Trackers that will be added to magnets without trackers<br>
-                                            separate trackers with a comma, e.g. "tracker1, tracker2, tracker3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- trackers -->
-                            <div class="field-pair">
-                                <label for="allow_high_priority">
-                                    <span class="component-title">Allow high priority</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="allow_high_priority" id="allow_high_priority" v-model="allowHighPriority"/>
-                                        <p>set downloads of recently aired episodes to high priority</p>
-                                    </span>
-                                </label>
-                            </div><!-- high priority -->
-                            <div class="field-pair">
-                                <label for="use_failed_downloads">
-                                    <span class="component-title">Use Failed Downloads</span>
-                                    <span class="component-desc">
-                                        <input id="use_failed_downloads" type="checkbox" name="use_failed_downloads" v-model="useFailedDownloads"/>
-                                        Use Failed Download Handling?<br>
-                                        Will only work with snatched/downloaded episodes after enabling this
-                                    </span>
-                                </label>
-                            </div><!-- use failed -->
-                            <div class="field-pair" v-show="useFailedDownloads">
-                                <label for="delete_failed">
-                                    <span class="component-title">Delete Failed</span>
-                                    <span class="component-desc">
-                                        <input id="delete_failed" type="checkbox" name="delete_failed" v-model="deleteFailed"/>
-                                        Delete files left over from a failed download?<br>
-                                        <b>NOTE:</b> This only works if Use Failed Downloads is enabled.
-                                    </span>
-                                </label>
-                            </div><!-- delete failed -->
-                            <div class="field-pair">
-                                <label for="cache_trimming">
-                                    <span class="component-title">Cache Trimming</span>
-                                    <span class="component-desc">
-                                        <input id="cache_trimming" type="checkbox" name="cache_trimming" v-model="cacheTrimming"/>
-                                        Enable trimming of provider cache<br>
-                                    </span>
-                                </label>
-                            </div><!-- cache trimming -->
-                            <div class="field-pair" v-show="cacheTrimming">
-                                <label for="max_cache_age">
-                                    <span class="component-title">Cache Retention</span>
-                                    <span class="component-desc">
-                                        <input type="number" min="1" step="1" name="max_cache_age" id="max_cache_age" v-model.number="maxCacheAge" class="form-control input-sm input75"/>
-                                        days<br>
-                                        <br>
-                                        Number of days to retain results in cache.  Results older than this will be removed if cache trimming is enabled.
-                                    </span>
-                                </label>
-                            </div><!-- max cache age -->
-                            <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
-                        </fieldset>
-                    </div><!-- /general settings //-->
+                                
+                                <config-textbox-number :min="1" :step="1" v-model.number="search.general.backlogDays" label="Forced backlog search day(s)" id="backlog_days" :explanations="['how many days to keep searching for propers since episode airdate (default: 2 days)']"></config-textbox-number>
+                                    
+                                <config-textbox-number :min="search.general.minDailySearchFrequency" :step="1" v-model.number="search.general.minBacklogFrequency" label="Backlog search frequency" id="backlog_frequency">
+                                    <p>time in minutes between searches (min. {{search.general.minBacklogFrequency}})</p>
+                                </config-textbox-number>
+                                
+                                <config-toggle-slider v-if="clientsConfig.torrent[clients.torrents.method]" v-show="clientsConfig.torrent[clients.torrents.method].removeFromClientOption" v-model="search.general.removeFromClient" label="Remove torrents from client" id="remove_from_client">
+                                    <p>Remove torrent from client (also torrent data) when provider ratio is reached</p>
+                                    <p><b>Note:</b> For now only Transmission and Deluge are supported</p>
+                                </config-toggle-slider>
+                                    
+                                <config-textbox-number v-show="search.general.removeFromClient" :min="search.general.minTorrentCheckerFrequency" :step="1" v-model.number="search.general.torrentCheckerFrequency" label="Frequency to check torrents ratio" id="torrent_checker_frequency" :explanations="['Frequency in minutes to check torrent\'s ratio (default: 60)']"></config-textbox-number>
+
+
+                                <config-textbox-number :min="1" :step="1" v-model.number="search.general.usenetRetention" label="Usenet retention" id="usenet_retention" :explanations="['age limit in days for usenet articles to be used (e.g. 500)']"></config-textbox-number>
+
+                                <config-template label-for="trackers_list" label="Trackers list">
+                                    <select-list name="trackers_list" id="trackers_list" :list-items="search.general.trackersList" @change="search.general.trackersList = $event.map(x => x.value)"></select-list>
+                                    Trackers that will be added to magnets without trackers<br>
+                                    separate trackers with a comma, e.g. "tracker1, tracker2, tracker3"
+                                </config-template>
+
+                                <config-toggle-slider v-model="search.general.allowHighPriority" label="Allow high priority" id="allow_high_priority" :explanations="['set downloads of recently aired episodes to high priority']" ></config-toggle-slider>
+                                
+                                
+                                <config-toggle-slider v-model="search.general.useFailedDownloads" label="Use Failed Downloads" id="use_failed_downloads" :explanations="['Use Failed Download Handling?',
+                                    'Will only work with snatched/downloaded episodes after enabling this']" >
+                                </config-toggle-slider>
+                                
+                                
+                                <config-toggle-slider v-show="search.general.useFailedDownloads" v-model="search.general.deleteFailed" label="Delete Failed" id="delete_failed">
+                                    Delete files left over from a failed download?<br>
+                                    <b>NOTE:</b> This only works if Use Failed Downloads is enabled.
+                                </config-toggle-slider>
+
+
+                                <config-toggle-slider v-model="search.general.cacheTrimming" label="Cache Trimming" id="cache_trimming" :explanations="['Enable trimming of provider cache']" ></config-toggle-slider>
+                                
+                                <config-textbox-number v-show="search.general.cacheTrimming" :min="1" :step="1" v-model.number="search.general.maxCacheAge" label="Cache Retention" id="max_cache_age" :explanations="['Number of days to retain results in cache.  Results older than this will be removed if cache trimming is enabled.']"></config-textbox-number>
+
+                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
+                            </fieldset>
+                        </div><!-- /general settings //-->
+                    </div><!-- /row -->
+
                     <!-- search filters //-->
-                    <div class="component-group-desc-legacy">
-                        <h3>Search Filters</h3>
-                        <p>Options to filter search results</p>
-                    </div>
-                    <div class="component-group">
-                        <fieldset class="component-group-list">
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Ignore words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="ignore_words" v-model="ignoreWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with any words from this list will be ignored<br>
-                                            separate words with a comma, e.g. "word1,word2,word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- ignored words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Undesired words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="undesired_words" v-model="undesiredWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with words from this list will only be selected as a last resort<br>
-                                            separate words with a comma, e.g. "word1, word2, word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- undesired words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Preferred words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="preferred_words" v-model="preferredWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results with one or more word from this list will be chosen over others<br>
-                                            separate words with a comma, e.g. "word1, word2, word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- preferred words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Require words</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="require_words" v-model="requireWords" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            results must include at least one word from this list<br>
-                                            separate words with a comma, e.g. "word1,word2,word3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- required words -->
-                            <div class="field-pair">
-                                <label>
-                                    <span class="component-title">Ignore language names in subbed results</span>
-                                    <span class="component-desc">
-                                        <input type="text" name="ignored_subs_list" v-model="ignoredSubsList" class="form-control input-sm input350"/>
-                                        <div class="clear-left">
-                                            Ignore subbed releases based on language names <br>
-                                            Example: "dk" will ignore words: dksub, dksubs, dksubbed, dksubed <br>
-                                            separate languages with a comma, e.g. "lang1, lang2, lang3"
-                                        </div>
-                                    </span>
-                                </label>
-                            </div><!-- subbed results -->
-                            <div class="field-pair">
-                                <label for="ignore_und_subs">
-                                    <span class="component-title">Ignore unknown subbed releases</span>
-                                    <span class="component-desc">
-                                        <input type="checkbox" name="ignore_und_subs" id="ignore_und_subs" v-model="ignoreUndSubs"/>
-                                        Ignore subbed releases without language names <br>
-                                        Filter words: subbed, subpack, subbed, subs, etc.)
-                                    </span>
-                                </label>
-                            </div><!-- ignore unknown subs -->
-                            <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
-                        </fieldset>
-                    </div><!-- /search filters //-->
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>Search Filters</h3>
+                            <p>Options to filter search results</p>
+                        </div>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-template label-for="ignore_words" label="Ignore words">
+                                    <select-list name="ignore_words" id="ignore_words" :list-items="search.filters.ignored" @change="search.filters.ignored = $event.map(x => x.value)"></select-list>
+                                    results with any words from this list will be ignored
+                                </config-template>
+
+                                <config-template label-for="undesired_words" label="Undesired words">
+                                    <select-list name="undesired_words" id="undesired_words" :list-items="search.filters.undesired" @change="search.filters.undesired = $event.map(x => x.value)"></select-list>
+                                    results with words from this list will only be selected as a last resort
+                                </config-template>
+
+                                <config-template label-for="preferred_words" label="Preferred words">
+                                    <select-list name="preferred_words" id="preferred_words" :list-items="search.filters.preferred" @change="search.filters.preferred = $event.map(x => x.value)"></select-list>
+                                    results with one or more word from this list will be chosen over others
+                                </config-template>
+
+                                <config-template label-for="require_words" label="Require words">
+                                    <select-list name="require_words" id="require_words" :list-items="search.filters.required" @change="search.filters.required = $event.map(x => x.value)"></select-list>
+                                    results must include at least one word from this list
+                                </config-template>
+
+                                <config-template label-for="ignored_subs_list" label="Ignore language names in subbed results">
+                                    <select-list name="ignored_subs_list" id="ignored_subs_list" :list-items="search.filters.ignoredSubsList" @change="search.filters.ignoredSubsList = $event.map(x => x.value)"></select-list>
+                                    Ignore subbed releases based on language names <br>
+                                    Example: "dk" will ignore words: dksub, dksubs, dksubbed, dksubed <br>
+                                </config-template>
+
+                                <config-toggle-slider v-model="search.filters.ignoreUnknownSubs" label="Ignore unknown subbed releases" id="ignore_und_subs" :explanations="['Ignore subbed releases without language names', 'Filter words: subbed, subpack, subbed, subs, etc.)']"></config-toggle-slider>
+
+                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" />
+                            </fieldset>
+                        </div><!-- /col //-->
+                    </div><!-- /row //-->   
                 </div><!-- /#episode-search //-->
-                <div id="nzb-search" class="component-group">
-                    <div class="component-group-desc-legacy">
-                        <h3>NZB Search</h3>
-                        <p>How to handle NZB search results.</p>
-                        <div id="nzb_method_icon" :class="'add-client-icon-' + nzb.method"></div>
-                    </div>
-                    <fieldset class="component-group-list">
-                        <div class="field-pair">
-                            <label for="use_nzbs">
-                                <span class="component-title">Search NZBs</span>
-                                <span class="component-desc">
-                                    <input type="checkbox" name="use_nzbs" id="use_nzbs" v-model="nzb.enabled"/>
-                                    <p>enable NZB search providers</p>
-                                </span>
-                            </label>
+                
+
+                <div id="nzb-search">
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>NZB Search</h3>
+                            <p>How to handle NZB search results.</p>
+                            <div id="nzb_method_icon" :class="'add-client-icon-' + clients.nzb.method"></div>
                         </div>
-                        <div v-show="nzb.enabled">
-                            <div class="field-pair">
-                                <label for="nzb_method">
-                                    <span class="component-title">Send .nzb files to:</span>
-                                    <span class="component-desc">
-                                        <select v-model="nzb.method" name="nzb_method" id="nzb_method" class="form-control input-sm">
-                                            <option v-for="(client, name) in clients.nzb" :value="name">{{client.title}}</option>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                <config-toggle-slider v-model="clients.nzb.enabled" label="Search NZBs" id="use_nzbs" :explanations="['enable NZB search providers']"></config-toggle-slider>
+
+                                <div v-show="clients.nzb.enabled">
+                                    <config-template label-for="nzb_method" label="Send .nzb files to">
+                                        <select v-model="clients.nzb.method" name="nzb_method" id="nzb_method" class="form-control input-sm">
+                                            <option v-for="(client, name) in clientsConfig.nzb" :value="name">{{client.title}}</option>
                                         </select>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="nzb.method === 'blackhole'" id="blackhole_settings">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Black hole folder location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="nzb_dir" title="Select .nzb black hole location" :initial-dir="nzb.dir" @update="nzb.dir = $event"></file-browser>
-                                            <div class="clear-left">
-                                                <p><b>.nzb</b> files are stored at this location for external software to find and use</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div v-show="nzb.method === 'sabnzbd'" id="sabnzbd_settings">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd server URL</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.host" type="text" id="sab_host" name="sab_host" class="form-control input-sm input350"/>
+                                    </config-template>
+                                    
+                                    <config-template v-show="clients.nzb.method === 'blackhole'" id="blackhole_settings" label-for="nzb_dir" label="Black hole folder location">
+                                        <file-browser name="nzb_dir" title="Select .nzb black hole location" :initial-dir="clients.nzb.dir" @update="clients.nzb.dir = $event"></file-browser>
+                                        <div class="clear-left">
+                                            <p><b>.nzb</b> files are stored at this location for external software to find and use</p>
+                                        </div>
+                                    </config-template>
+                                    
+                                    
+                                    <div v-if="clients.nzb.method" v-show="clients.nzb.method === 'sabnzbd'" id="sabnzbd_settings">
+                                        
+                                        <config-textbox v-model="clients.nzb.sabnzbd.host" label="SABnzbd server URL" id="sab_host" :explanations="['username for your KODI server (blank for none)']" @change="save()">
                                             <div class="clear-left">
-                                                <p v-html="clients.nzb[nzb.method].description"></p>
+                                                <p v-html="clientsConfig.nzb[clients.nzb.method].description"></p>
                                             </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd username</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.username" type="text" name="sab_username" id="sab_username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd password</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.password" type="password" name="sab_password" id="sab_password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">SABnzbd API key</span>
-                                        <span class="component-desc">
-                                            <input v-model="nzb.sabnzbd.apiKey" type="text" name="sab_apikey" id="sab_apikey" class="form-control input-sm input350"/>
-                                            <div class="clear-left"><p>locate at... SABnzbd Config -> General -> API Key</p></div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category" id="sab_category" v-model="nzb.sabnzbd.category" class="form-control input-sm input200"/>
-                                            <p>add downloads to this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_backlog" id="sab_category_backlog" v-model="nzb.sabnzbd.categoryBacklog" class="form-control input-sm input200"/>
-                                            <p>add downloads of old episodes to this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_anime" id="sab_category_anime" v-model="nzb.sabnzbd.categoryAnime" class="form-control input-sm input200"/>
-                                            <p>add anime downloads to this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use SABnzbd category for anime (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="sab_category_anime_backlog" id="sab_category_anime_backlog" v-model="nzb.sabnzbd.categoryAnimeBacklog" class="form-control input-sm input200"/>
-                                            <p>add anime downloads of old episodes to this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair" v-show="allowHighPriority">
-                                    <label for="sab_forced">
-                                        <span class="component-title">Use forced priority</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="sab_forced" id="sab_forced" v-model="nzb.sabnzbd.forced"/>
-                                            <p>enable to change priority from HIGH to FORCED</p></span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="nzb.sabnzbd.testStatus" v-html="nzb.sabnzbd.testStatus"></div>
-                                <input @click="testSabnzbd" type="button" value="Test SABnzbd" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                            <div v-show="nzb.method === 'nzbget'" id="nzbget_settings">
-                                <div class="field-pair">
-                                    <label for="nzbget_use_https">
-                                        <span class="component-title">Connect using HTTPS</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="nzbget_use_https" id="nzbget_use_https" v-model="nzb.nzbget.useHttps"/>
+                                        </config-textbox>
+                                        
+                                        <config-textbox v-model="clients.nzb.sabnzbd.username" label="SABnzbd username" id="sab_username" :explanations="['(blank for none)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.password" type="password" label="SABnzbd password" id="sab_password" :explanations="['(blank for none)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.apiKey" label="SABnzbd API key" id="sab_apikey" :explanations="['locate at... SABnzbd Config -> General -> API Key']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.category" label="Use SABnzbd category" id="sab_category" :explanations="['add downloads to this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryBacklog" label="Use SABnzbd category (backlog episodes)" id="sab_category_backlog" :explanations="['add downloads of old episodes to this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryAnime" label="Use SABnzbd category for anime" id="sab_category_anime" :explanations="['add anime downloads to this category (e.g. anime)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.sabnzbd.categoryAnimeBacklog" label="Use SABnzbd category for anime (backlog episodes)" id="sab_category_anime_backlog" :explanations="['add anime downloads of old episodes to this category (e.g. anime)']"></config-textbox>
+                                        <config-toggle-slider v-model="clients.nzb.sabnzbd.forced" label="Use forced priority" id="sab_forced" :explanations="['enable to change priority from HIGH to FORCED']" ></config-toggle-slider>
+                                
+                                        <div class="testNotification" v-show="clients.nzb.sabnzbd.testStatus" v-html="clients.nzb.sabnzbd.testStatus"></div>
+                                        <input @click="testSabnzbd" type="button" value="Test SABnzbd" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+                                    
+                                    <div v-if="clients.nzb.method" v-show="clients.nzb.method === 'nzbget'" id="nzbget_settings">
+                                        
+                                        <config-toggle-slider v-model="clients.nzb.nzbget.useHttps" label="Connect using HTTP" id="nzbget_use_https">
                                             <p><b>note:</b> enable Secure control in NZBGet and set the correct Secure Port here</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget host:port</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_host" id="nzbget_host" v-model="nzb.nzbget.host" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p v-html="clients.nzb[nzb.method].description"></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget username</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_username" id="nzbget_username" v-model="nzb.nzbget.username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>locate in nzbget.conf (default:nzbget)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget password</span>
-                                        <span class="component-desc">
-                                            <input type="password" name="nzbget_password" id="nzbget_password" v-model="nzb.nzbget.password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>locate in nzbget.conf (default:tegbzn6789)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category" id="nzbget_category" v-model="nzb.nzbget.category" class="form-control input-sm input200"/>
-                                            <p>send downloads marked this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_backlog" id="nzbget_category_backlog" v-model="nzb.nzbget.categoryBacklog" class="form-control input-sm input200"/>
-                                            <p>send downloads of old episodes marked this category (e.g. TV)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_anime" id="nzbget_category_anime" v-model="nzb.nzbget.categoryAnime" class="form-control input-sm input200"/>
-                                            <p>send anime downloads marked this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Use NZBget category for anime (backlog episodes)</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="nzbget_category_anime_backlog" id="nzbget_category_anime_backlog" v-model="nzb.nzbget.categoryAnimeBacklog" class="form-control input-sm input200"/>
-                                            <p>send anime downloads of old episodes marked this category (e.g. anime)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">NZBget priority</span>
-                                        <span class="component-desc">
-                                            <select name="nzbget_priority" id="nzbget_priority" v-model="nzb.nzbget.priority" class="form-control input-sm">
-                                                <option v-for="(value, title) in nzb.nzbget.priorityOptions" :value="value">{{title}}</option>
+                                        </config-toggle-slider>
+
+                                        <config-textbox v-model="clients.nzb.nzbget.host" label="NZBget host:port" id="nzbget_host">
+                                            <p v-if="clientsConfig.nzb[clients.nzb.method]" v-html="clientsConfig.nzb[clients.nzb.method].description"></p>
+                                        </config-textbox>
+
+                                        <config-textbox v-model="clients.nzb.nzbget.username" label="NZBget username" id="nzbget_username" :explanations="['locate in nzbget.conf (default:nzbget)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.password" type="password" label="NZBget password" id="nzbget_password" :explanations="['locate in nzbget.conf (default:tegbzn6789)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.category" label="Use NZBget category" id="nzbget_category" :explanations="['send downloads marked this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryBacklog" label="Use NZBget category (backlog episodes)" id="nzbget_category_backlog" :explanations="['send downloads of old episodes marked this category (e.g. TV)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryAnime" label="Use NZBget category for anime" id="nzbget_category_anime" :explanations="['send anime downloads marked this category (e.g. anime)']"></config-textbox>
+                                        <config-textbox v-model="clients.nzb.nzbget.categoryAnimeBacklog" label="Use NZBget category for anime (backlog episodes)" id="nzbget_category_anime_backlog" :explanations="['send anime downloads of old episodes marked this category (e.g. anime)']"></config-textbox>
+                                        
+                                        <config-template label-for="nzbget_priority" label="NZBget priority">
+                                            <select name="nzbget_priority" id="nzbget_priority" v-model="clients.nzb.nzbget.priority" class="form-control input-sm">
+                                                <option v-for="option in nzbGetPriorityOptions" :value="option.value">{{option.text}}</option>
                                             </select>
                                             <span>priority for daily snatches (no backlog)</span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="nzb.nzbget.testStatus" v-html="nzb.nzbget.testStatus"></div>
-                                <input @click="testNzbget" type="button" value="Test NZBget" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div><!-- /nzb.enabled //-->
+                                        </config-template>
+                                        
+                                        <div class="testNotification" v-show="clients.nzb.nzbget.testStatus" v-html="clients.nzb.nzbget.testStatus"></div>
+                                        <input @click="testNzbget" type="button" value="Test NZBget" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div><!-- /nzb.enabled //-->
+                                </div>
+                            </fieldset>
                         </div>
-                    </fieldset>
+                    </div> <!-- /row -->
                 </div><!-- /#nzb-search //-->
-                <div id="torrent-search" class="component-group">
-                    <div class="component-group-desc-legacy">
-                        <h3>Torrent Search</h3>
-                        <p>How to handle Torrent search results.</p>
-                        <div id="torrent_method_icon" :class="'add-client-icon-' + torrent.method"></div>
-                    </div>
-                    <fieldset class="component-group-list">
-                        <div class="field-pair">
-                            <label for="use_torrents">
-                                <span class="component-title">Search torrents</span>
-                                <span class="component-desc">
-                                    <input type="checkbox" name="use_torrents" id="use_torrents" v-model="torrent.enabled"/>
-                                    <p>enable torrent search providers</p>
-                                </span>
-                            </label>
+                
+                <div id="torrent-search">
+                    <div class="row component-group">
+                        <div class="component-group-desc col-xs-12 col-md-2">
+                            <h3>Torrent Search</h3>
+                            <p>How to handle Torrent search results.</p>
+                            <div id="torrent_method_icon" :class="'add-client-icon-' + clients.torrents.method"></div>
                         </div>
-                        <div v-show="torrent.enabled">
-                            <div class="field-pair">
-                                <label for="torrent_method">
-                                    <span class="component-title">Send .torrent files to:</span>
-                                    <span class="component-desc">
-                                        <select v-model="torrent.method" name="torrent_method" id="torrent_method" class="form-control input-sm">
-                                            <option v-for="(client, name) in clients.torrent" :value="name">{{client.title}}</option>
+                        <div class="col-xs-12 col-md-10">
+                            <fieldset class="component-group-list">
+                                
+                                <config-toggle-slider v-model="clients.torrents.enabled" label="Search torrents" id="use_torrents" :explanations="['enable torrent search providers']"></config-toggle-slider>
+                                <div v-show="clients.torrents.enabled">
+                                    
+                                    <config-template label-for="torrent_method" label="Send .torrent files to">
+                                        <select v-model="clients.torrents.method" name="torrent_method" id="torrent_method" class="form-control input-sm">
+                                            <option v-for="(client, name) in clientsConfig.torrent" :value="name">{{client.title}}</option>
                                         </select>
-                                    </span>
-                                </label>
-                            </div>
-                            <div v-show="torrent.method === 'blackhole'">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title">Black hole folder location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_dir" title="Select .torrent black hole location" :initial-dir="torrent.dir" @update="torrent.dir = $event"></file-browser>
-                                            <div class="clear-left">
-                                                <p><b>.torrent</b> files are stored at this location for external software to find and use</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                            <div v-show="torrent.method !== 'blackhole'">
-                                <div class="field-pair">
-                                    <label>
-                                        <span class="component-title" id="host_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} host:port</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_host" id="torrent_host" v-model="torrent.host" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p v-html="clients.torrent[torrent.method].description"></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'transmission'" class="field-pair" id="torrent_rpcurl_option">
-                                    <label>
-                                        <span class="component-title" id="rpcurl_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} RPC URL</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_rpcurl" id="torrent_rpcurl" v-model="torrent.rpcUrl" class="form-control input-sm input350"/>
-                                            <div class="clear-left">
-                                                <p id="rpcurl_desc_">The path without leading and trailing slashes (e.g. transmission)</p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://')" class="field-pair" id="torrent_auth_type_option">
-                                    <label>
-                                        <span class="component-title">Http Authentication</span>
-                                        <span class="component-desc">
-                                            <select v-model="torrent.authType" name="torrent_auth_type" id="torrent_auth_type" class="form-control input-sm">
+                                    </config-template>
+                                    
+                                    <div v-if="clients.torrents.method" v-show="clients.torrents.method === 'blackhole'">
+                                        <config-template label-for="torrent_dir" label="Black hole folder location">
+                                            <file-browser name="torrent_dir" title="Select .torrent black hole location" :initial-dir="clients.torrents.dir" @update="clients.torrents.dir = $event"></file-browser>
+                                            <p><b>.torrent</b> files are stored at this location for external software to find and use</p>
+                                        </config-template>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+
+                                    <div v-if="clients.torrents.method" v-show="clients.torrents.method !== 'blackhole'">
+                                        
+                                        <config-textbox v-model="clients.torrents.host" :label="clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title + ' host:port'" id="torrent_host">
+                                            <p v-html="clientsConfig.torrent[clients.torrents.method].description"></p>
+                                        </config-textbox>
+                                        
+                                        <config-textbox v-show="clients.torrents.method === 'transmission'" v-model="clients.torrents.rpcUrl" :label="clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title + ' RPC URL'" id="rpcurl_title">
+                                            <p id="rpcurl_desc_">The path without leading and trailing slashes (e.g. transmission)</p>
+                                        </config-textbox>
+
+                                        <config-template v-show="!authTypeIsDisabled" label-for="torrent_auth_type" label="Http Authentication">
+                                            <select v-model="clients.torrents.authType" name="torrent_auth_type" id="torrent_auth_type" class="form-control input-sm">
                                                 <option v-for="(title, name) in httpAuthTypes" :value="name">{{title}}</option>
                                             </select>
-                                            <p></p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].verifyCertOption" class="field-pair">
-                                    <label for="torrent_verify_cert">
-                                        <span class="component-title">Verify certificate</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_verify_cert" id="torrent_verify_cert" v-model="torrent.verifyCert"/>
+                                        </config-template>
+
+                                        <config-toggle-slider v-show="clientsConfig.torrent[clients.torrents.method].verifyCertOption" v-model="clients.torrents.verifyCert" label="Verify certificate" id="torrent_verify_cert">
                                             <p>Verify SSL certificates for HTTPS requests</p>
-                                            <p v-show="torrent.method === 'deluge'">disable if you get "Deluge: Authentication Error" in your log</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="!['rtorrent', 'deluge'].includes(torrent.method) || (torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://'))" class="field-pair" id="torrent_username_option">
-                                    <label>
-                                        <span class="component-title" id="username_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} username</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_username" id="torrent_username" v-model="torrent.username" class="form-control input-sm input200" autocomplete="no" />
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method !== 'rtorrent' || (torrent.method === 'rtorrent' && !torrent.host.startsWith('scgi://'))" class="field-pair" id="torrent_password_option">
-                                    <label>
-                                        <span class="component-title" id="password_title">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}} password</span>
-                                        <span class="component-desc">
-                                            <input type="password" name="torrent_password" id="torrent_password" v-model="torrent.password" class="form-control input-sm input200" autocomplete="no"/>
-                                            <p>(blank for none)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].labelOption" class="field-pair" id="torrent_label_option">
-                                    <label>
-                                        <span class="component-title">Add label to torrent</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_label" id="torrent_label" v-model="torrent.label" class="form-control input-sm input200"/>
-                                            <span v-show="['deluge', 'deluged'].includes(torrent.method)"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: label plugin must be enabled in Deluge clients</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: for qBitTorrent 3.3.1 and up</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'utorrent'">
-                                                <div class="clear-left"><p>Global label for torrents.<br>
-                                                <b>%N:</b> use Series-Name as label (can be used with other text)</p></div>
-                                            </span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].labelAnimeOption" class="field-pair">
-                                    <label>
-                                        <span class="component-title">Add label to torrent for anime</span>
-                                        <span class="component-desc">
-                                            <input type="text" name="torrent_label_anime" id="torrent_label_anime" v-model="torrent.labelAnime" class="form-control input-sm input200"/>
-                                            <span v-show="['deluge', 'deluged'].includes(torrent.method)"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: label plugin must be enabled in Deluge clients</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
-                                                <div class="clear-left"><p>note: for qBitTorrent 3.3.1 and up</p></div>
-                                            </span>
-                                            <span v-show="torrent.method === 'utorrent'">
-                                                <div class="clear-left"><p>Global label for torrents.<br>
-                                                <b>%N:</b> use Series-Name as label (can be used with other text)</p></div>
-                                            </span>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].pathOption" class="field-pair" id="torrent_path_option">
-                                    <label>
-                                        <span class="component-title" id="directory_title">Downloaded files location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_path" title="Select downloaded files location" :initial-dir="torrent.path" @update="torrent.path = $event"></file-browser>
-                                            <div class="clear-left"><p>where <span id="torrent_client">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}}</span> will save downloaded files (blank for client default)
-                                                <span v-show="torrent.method === 'downloadstation'"> <b>note:</b> the destination has to be a shared folder for Synology DS</span></p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].seedLocationOption" class="field-pair">
-                                    <label>
-                                        <span class="component-title" id="directory_title">Post-Processed seeding torrents location</span>
-                                        <span class="component-desc">
-                                            <file-browser name="torrent_seed_location" title="Select torrent seed location" :initial-dir="torrent.seedLocation" @update="torrent.seedLocation = $event"></file-browser>
-                                            <div class="clear-left">
+                                            <p v-show="clients.torrents.method === 'deluge'">disable if you get "Deluge: Authentication Error" in your log</p>
+                                        </config-toggle-slider>
+
+                                        <config-textbox v-show="!torrentUsernameIsDisabled" 
+                                            v-model="clients.torrents.username" :label="(clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title) + ' username'" id="torrent_username" :explanations="['(blank for none)']">
+                                        </config-textbox>
+                                        
+                                        <config-textbox type="password" v-show="!torrentPasswordIsDisabled" 
+                                            v-model="clients.torrents.password" :label="(clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title) + ' password'" id="torrent_password" :explanations="['(blank for none)']">
+                                        </config-textbox>
+                                        
+                                        <div v-show="clientsConfig.torrent[clients.torrents.method].labelOption" id="torrent_label_option">
+                                            <config-textbox v-model="clients.torrents.label" label="Add label to torrent" id="torrent_label">
+                                                <span v-show="['deluge', 'deluged'].includes(clients.torrents.method)">
+                                                    <p>(blank spaces are not allowed)</p>
+                                                    <p>note: label plugin must be enabled in Deluge clients</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
+                                                    <p>note: for qBitTorrent 3.3.1 and up</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'utorrent'">
+                                                    <p>Global label for torrents.<br>
+                                                    <b>%N:</b> use Series-Name as label (can be used with other text)</p>
+                                                </span>
+                                            </config-textbox>
+                                        </div>
+
+                                        <div v-show="clientsConfig.torrent[clients.torrents.method].labelAnimeOption">
+                                            <config-textbox v-model="clients.torrents.labelAnime" label="Add label to torrent for anime" id="torrent_label_anime">
+                                                <span v-show="['deluge', 'deluged'].includes(clients.torrents.method)">
+                                                    <p>(blank spaces are not allowed)</p>
+                                                    <p>note: label plugin must be enabled in Deluge clients</p>
+                                                </span>
+                                                <span v-show="clients.torrents.method === 'qbittorrent'"><p>(blank spaces are not allowed)</p>
+                                                    <p>note: for qBitTorrent 3.3.1 and up</p>
+                                                <span v-show="clients.torrents.method === 'utorrent'">
+                                                    <p>Global label for torrents.<br>
+                                                    <b>%N:</b> use Series-Name as label (can be used with other text)</p>
+                                                </span>
+                                            </config-textbox>
+                                        </div>
+
+                                        <config-template v-show="clientsConfig.torrent[clients.torrents.method].pathOption" label-for="torrent_client" label="Downloaded files location">
+                                                <file-browser name="torrent_path" title="Select downloaded files location" :initial-dir="clients.torrents.path" @update="clients.torrents.path = $event"></file-browser>
+                                                <p>where <span id="torrent_client" v-if="clientsConfig.torrent[clients.torrents.method]">{{clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title}}</span> will save downloaded files (blank for client default)
+                                                    <span v-show="clients.torrents.method === 'downloadstation'"> <b>note:</b> the destination has to be a shared folder for Synology DS</span>
+                                                </p>
+                                        </config-template>
+                                        
+                                        <config-template v-show="clientsConfig.torrent[clients.torrents.method].seedLocationOption" label-for="torrent_seed_location" label="Post-Processed seeding torrents location">
+                                                <file-browser name="torrent_seed_location" title="Select torrent seed location" :initial-dir="clients.torrents.seedLocation" @update="clients.torrents.seedLocation = $event"></file-browser>
                                                 <p>
-                                                    where <span id="torrent_client_seed_path">{{clients.torrent[torrent.method].shortTitle || clients.torrent[torrent.method].title}}</span> will move Torrents after Post-Processing<br/>
+                                                    where <span id="torrent_client_seed_path">{{clientsConfig.torrent[clients.torrents.method].shortTitle || clientsConfig.torrent[clients.torrents.method].title}}</span> will move Torrents after Post-Processing<br/>
                                                     <b>Note:</b> If your Post-Processor method is set to hard/soft link this will move your torrent
                                                     to another location after Post-Processor to prevent reprocessing the same file over and over.
                                                     This feature does a "Set Torrent location" or "Move Torrent" like in client
                                                 </p>
-                                            </div>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].seedTimeOption" class="field-pair" id="torrent_seed_time_option">
-                                    <label>
-                                        <span class="component-title" id="torrent_seed_time_label">{{torrent.method === 'transmission' ? 'Stop seeding when inactive for' : 'Minimum seeding time is'}}</span>
-                                        <span class="component-desc">
-                                            <input type="number" step="1" name="torrent_seed_time" id="torrent_seed_time" v-model="torrent.seedTime" class="form-control input-sm input100" />
-                                            <p>hours. (default: '0' passes blank to client and '-1' passes nothing)</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="clients.torrent[torrent.method].pausedOption" class="field-pair" id="torrent_paused_option">
-                                    <label>
-                                        <span class="component-title">Start torrent paused</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_paused" id="torrent_paused" v-model="torrent.paused"/>
+                                        </config-template>
+
+                                        <config-textbox-number v-show="clientsConfig.torrent[clients.torrents.method].seedTimeOption" :min="-1" :step="1" v-model.number="clients.torrents.seedTime" :label="clients.torrents.method === 'transmission' ? 'Stop seeding when inactive for' : 'Minimum seeding time is'" id="torrent_seed_time" :explanations="['hours. (default: \'0\' passes blank to client and \'-1\' passes nothing)']"></config-textbox-number>
+
+                                        <config-toggle-slider v-show="clientsConfig.torrent[clients.torrents.method].pausedOption" v-model="clients.torrents.paused" label="Start torrent paused" id="torrent_paused">
                                             <p>add .torrent to client but do <b style="font-weight:900;">not</b> start downloading</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div v-show="torrent.method === 'transmission'" class="field-pair">
-                                    <label>
-                                        <span class="component-title">Allow high bandwidth</span>
-                                        <span class="component-desc">
-                                            <input type="checkbox" name="torrent_high_bandwidth" id="torrent_high_bandwidth" v-model="torrent.highBandwidth"/>
-                                            <p>use high bandwidth allocation if priority is high</p>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="testNotification" v-show="torrent.testStatus" v-html="torrent.testStatus"></div>
-                                <input @click="testTorrentClient" type="button" value="Test Connection" class="btn-medusa test-button"/>
-                                <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
-                            </div>
-                        </div><!-- /torrent.enabled //-->
-                    </fieldset>
+                                        </config-toggle-slider>
+
+                                        <config-toggle-slider v-show="clients.torrents.method === 'transmission'" v-model="clients.torrents.highBandwidth" label="Allow high bandwidth" id="torrent_high_bandwidth" :explanations="['use high bandwidth allocation if priority is high']"></config-toggle-slider>
+
+                                        <div class="testNotification" v-show="clients.torrents.testStatus" v-html="clients.torrents.testStatus"></div>
+                                        <input @click="testTorrentClient" type="button" value="Test Connection" class="btn-medusa test-button"/>
+                                        <input type="submit" class="btn-medusa config_submitter" value="Save Changes" /><br>
+                                    </div>
+                                </div><!-- /torrent.enabled //-->
+                            </fieldset>
+                        </div>
+                    </div>
                 </div><!-- /#torrent-search //-->
                 <br>
-                <h6 class="pull-right"><b>All non-absolute folder locations are relative to <span class="path">{{dataDir}}</span></b> </h6>
+                <h6 class="pull-right"><b>All non-absolute folder locations are relative to <span class="path">{{config.dataDir}}</span></b> </h6>
                 <input type="submit" class="btn-medusa pull-left config_submitter button" value="Save Changes" />
             </div><!-- /config-components //-->
         </form>