From a564f15f84dfff8a1c03461d3daed35af3b9015e Mon Sep 17 00:00:00 2001
From: Kylart <Kylart.dev@gmail.com>
Date: Sun, 13 Aug 2017 23:46:05 +0100
Subject: [PATCH] All templates are now Pug! Added .editorconfig for vs-code
 Updated to vuetify 0.14.11 `pack` script

---
 .editorconfig               |  13 ++
 assets/App.vue              | 169 +++++++++--------------
 components/choiceWindow.vue |  56 ++++----
 components/env.vue          |   2 +-
 components/historyModal.vue | 104 ++++++--------
 components/infoModal.vue    |  77 +++++------
 components/infoResults.vue  |  77 +++++------
 components/settings.vue     | 215 ++++++++++++-----------------
 package.json                |   3 +-
 pages/downloader.vue        | 246 ++++++++++++++-------------------
 pages/index.vue             | 226 +++++++++++-------------------
 pages/localPage.vue         | 266 +++++++++++++-----------------------
 pages/seasons.vue           | 236 ++++++++++++--------------------
 pages/watchList.vue         | 147 ++++++++------------
 14 files changed, 713 insertions(+), 1124 deletions(-)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..e335102
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,vue}]
+indent_style = space
+indent_size = 2
\ No newline at end of file
diff --git a/assets/App.vue b/assets/App.vue
index 3e7e8a2..aeb8983 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -1,108 +1,67 @@
-<template>
-  <v-app dark footer toolbar>
-    <v-navigation-drawer class="pb-0"
-                         style="width: 280px"
-                         temporary
-                         v-model="$store.state.drawer"
-    >
-      <v-list>
-        <v-list-tile id="title" to="/">
-          <v-list-tile-action>
-            <img src="static/images/icon2.png" height="50"/>
-          </v-list-tile-action>
-          <v-list-tile-title class="title">
-            かわニメ
-          </v-list-tile-title>
-        </v-list-tile>
-        <template v-for="item in itemGroup">
-          <v-list-group v-if="item.items"
-                        :key="item.title">
-            <v-list-tile slot="item" class="ripple" ripple>
-              <v-list-tile-action>
-                <v-icon>{{ item.action }}</v-icon>
-              </v-list-tile-action>
-              <v-list-tile-title>
-                {{ item.title }}
-              </v-list-tile-title>
-              <v-list-tile-action>
-                <v-icon>
-                  keyboard_arrow_down
-                </v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile v-for="subItem in item.items"
-                         class="ripple"
-                         ripple
-                         :to="subItem.href"
-                         :key="subItem.title">
-              <v-list-tile-action>
-                <v-icon>{{ subItem.action }}</v-icon>
-              </v-list-tile-action>
-              <v-list-tile-content>
-                <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
-              </v-list-tile-content>
-            </v-list-tile>
-            <v-divider></v-divider>
-          </v-list-group>
-          <v-subheader v-else-if="item.header" class="white--text">{{ item.header }}</v-subheader>
-          <v-divider v-else-if="item.divider"></v-divider>
-        </template>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-system-bar dark
-                  status
-                  class="wb dragable"
-                  v-if="!browser">
-      <v-spacer></v-spacer>
-      <div v-if="$store.state.platform !== 'darwin'">
-        <v-icon class="window-icon non-dragable" @click="actOnWindow('minimize')">remove</v-icon>
-        <v-icon class="window-icon non-dragable" @click="actOnWindow('maximize')">check_box_outline_blank</v-icon>
-        <v-icon class="window-icon non-dragable" @click="actOnWindow('close')">close</v-icon>
-      </div>
-    </v-system-bar>
-
-    <v-toolbar fixed dark class="mablue tb">
-      <v-toolbar-side-icon @click.stop="toggleDrawer()"></v-toolbar-side-icon>
-      <v-toolbar-title class="white--text title hidden-xs-only">かわニメ</v-toolbar-title>
-      <v-spacer></v-spacer>
-      <info-modal></info-modal>
-      <v-btn icon
-             class="open-in-browser"
-             v-tooltip:left="{ html: 'Open KawAnime in your browser' }"
-             @click="openInBrowser()">
-        <v-icon>open_in_new</v-icon>
-      </v-btn>
-      <settings></settings>
-    </v-toolbar>
-
-    <main class="m">
-      <transition name="page" mode="out-in">
-        <router-view></router-view>
-      </transition>
-    </main>
-
-    <env v-if="$store.state.NODE_ENV"></env>
-    <info-results v-show="$store.state.info.show"></info-results>
-
-    <!-- Used for displaying any info -->
-    <v-snackbar
-      :timeout="5000"
-      :top="true"
-      :bottom="false"
-      :right="false"
-      :left="false"
-      v-model="$store.state.infoSnackbar.show"
-    >
-      {{ $store.state.infoSnackbar.text }}
-      <v-btn flat class="pink--text" @click="$store.state.infoSnackbar.show = false">Close</v-btn>
-    </v-snackbar>
-
-    <v-footer class="grey darken-4">
-      <v-spacer></v-spacer>
-      <div class="white--text">&copy; 2016 - 2017 Kylart</div>
-    </v-footer>
-  </v-app>
+<template lang="pug">
+  v-app(dark, footer, toolbar)
+    v-navigation-drawer.pb-0(style='width: 280px', temporary, v-model='$store.state.drawer')
+      v-list
+        v-list-tile#title(to='/')
+          v-list-tile-action
+            img(src='static/images/icon2.png', height='50')
+          v-list-tile-title.title
+            | かわニメ
+        template(v-for='item in itemGroup')
+          v-list-group(v-if='item.items', :key='item.title')
+            v-list-tile.ripple(slot='item', ripple)
+              v-list-tile-action
+                v-icon {{ item.action }}
+              v-list-tile-title {{ item.title }}
+              v-list-tile-action
+                v-icon keyboard_arrow_down
+            v-list-tile.ripple(v-for='subItem in item.items', ripple, :to='subItem.href', :key='subItem.title')
+              v-list-tile-action
+                v-icon {{ subItem.action }}
+              v-list-tile-content
+                v-list-tile-title {{ subItem.title }}
+            v-divider
+          v-subheader.white--text(v-else-if='item.header') {{ item.header }}
+          v-divider(v-else-if='item.divider')
+    
+    v-system-bar.wb.dragable(dark, status, v-if='!browser')
+      v-spacer
+      div(v-if="$store.state.platform !== 'darwin'")
+        v-icon.window-icon.non-dragable(@click="actOnWindow('minimize')") remove
+        v-icon.window-icon.non-dragable(@click="actOnWindow('maximize')") check_box_outline_blank
+        v-icon.window-icon.non-dragable(@click="actOnWindow('close')") close
+    
+    v-toolbar.mablue.tb(fixed, dark)
+      v-toolbar-side-icon(@click.stop='toggleDrawer()')
+      v-toolbar-title.white--text.title.hidden-xs-only かわニメ
+      v-spacer
+      info-modal
+      v-btn.open-in-browser(icon, v-tooltip:left="{ html: 'Open KawAnime in your browser' }", @click='openInBrowser()')
+        v-icon open_in_new
+      settings
+    
+    main.m
+      transition(name='page', mode='out-in')
+        router-view
+    
+    env(v-show='$store.state.NODE_ENV')
+    
+    info-results(v-show='$store.state.info.show')
+    
+    // Used for displaying any info
+    v-snackbar(
+      :timeout='5000',
+      :top='true',
+      :bottom='false',
+      :right='false',
+      :left='false',
+      v-model='$store.state.infoSnackbar.show'
+    ) {{ $store.state.infoSnackbar.text }}
+      v-btn.pink--text(flat, @click='$store.state.infoSnackbar.show = false') Close
+    
+    v-footer.grey.darken-4
+      v-spacer
+      .white--text © 2016 - 2017 Kylart
 </template>
 
 <script>
diff --git a/components/choiceWindow.vue b/components/choiceWindow.vue
index d444f4e..23a5829 100644
--- a/components/choiceWindow.vue
+++ b/components/choiceWindow.vue
@@ -1,36 +1,26 @@
-<template>
-  <v-dialog v-model="show"
-            persistent
-            width="650">
-    <v-card>
-        <v-card-title class="headline">Add «{{ entry }}» to</v-card-title>
-        <v-card-text>
-          <v-layout row wrap>
-            <template v-for="i in 5">
-              <v-flex v-if="!options[i - 1].half" xs4>
-                <v-checkbox v-model="selected"
-                            :value="options[i - 1].value"
-                            :label="options[i - 1].label"
-                            class="option primary--text">
-                </v-checkbox>
-              </v-flex>
-              <v-flex v-else xs6 class="checkbox-container">
-                <v-checkbox v-model="selected"
-                            :value="options[i - 1].value"
-                            :label="options[i - 1].label"
-                            class="option primary--text">
-                </v-checkbox>
-              </v-flex>
-            </template>
-          </v-layout>
-        </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn class="blue--text darken-1" flat @click="add()">Add</v-btn>
-        <v-btn class="blue--text darken-1" flat @click="hide()">Close</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+<template lang="pug">
+  v-dialog(v-model='show', persistent, width='650')
+    v-card
+      v-card-title.headline Add «{{ entry }}» to
+      v-card-text
+        v-layout(row, wrap)
+          template(v-for='i in 5')
+            v-flex(v-if='!options[i - 1].half', xs4)
+              v-checkbox.option.primary--text(
+                v-model='selected',
+                :value='options[i - 1].value',
+                :label='options[i - 1].label'
+              )
+            v-flex.checkbox-container(v-else, xs6)
+              v-checkbox.option.primary--text(
+                v-model='selected',
+                :value='options[i - 1].value',
+                :label='options[i - 1].label'
+              )
+      v-card-actions
+        v-spacer
+        v-btn.blue--text.darken-1(flat, @click='add()') Add
+        v-btn.blue--text.darken-1(flat, @click='hide()') Close
 </template>
 
 <script>
diff --git a/components/env.vue b/components/env.vue
index a097faa..1be8908 100644
--- a/components/env.vue
+++ b/components/env.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  div.c
+  .c
     div#container
       span.text.white--text Development mode
 </template>
diff --git a/components/historyModal.vue b/components/historyModal.vue
index 50d46ad..13a3c87 100644
--- a/components/historyModal.vue
+++ b/components/historyModal.vue
@@ -1,69 +1,41 @@
-<template>
-  <v-dialog lazy absolute width="75%"
-            v-model="$store.state.historyModal">
-    <v-btn secondary dark
-           @click.mative="refresh()"
-           slot="activator">History
-    </v-btn>
-    <v-card class="secondary">
-      <v-card-title class="headline">History</v-card-title>
-      <v-divider></v-divider>
-        <v-card-text>
-          <v-layout row wrap>
-            <v-expansion-panel expand class="secondary">
-              <v-expansion-panel-content class="item-container"
-                                         ripple
-                                         v-for="item in Object.keys(history).reverse()"
-                                         :key="item">
-                <div slot="header"
-                     v-ripple="true"
-                     class="day">{{ item }}
-                </div>
-                <v-card>
-                  <v-card-text class="lighten-3 info-container">
-                    <v-layout row wrap>
-                      <template v-for="info in history[item]">
-                        <v-flex xs2 class="time entry"
-                                :class="isDelete(info.type)">
-                          {{ info.time }}
-                        </v-flex>
-                        <v-flex xs2 class="type entry" :class="isDelete(info.type)">
-                          {{ info.type }}
-                        </v-flex>
-                        <v-flex xs7
-                                class="ellipsis text entry"
-                                :class="isDelete(info.type)">
-                          {{ info.text }}
-                        </v-flex>
-                        <v-flex xs1
-                                class="entry"
-                                :class="isDelete(info.type)">
-                          <v-icon class="delete-entry"
-                                  v-ripple="true"
-                                  @click.stop="clearEntry(info, item)">
-                            clear
-                          </v-icon>
-                        </v-flex>
-                      </template>
-                    </v-layout>
-                  </v-card-text>
-                </v-card>
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-          </v-layout>
-        </v-card-text>
-      <v-divider></v-divider>
-      <v-card-actions style=" padding-right: 20px;">
-        <v-spacer></v-spacer>
-        <v-btn class="blue--text darken-1"
-               flat
-               style="width: 100px;"
-               @click="$store.commit('setHistoryModal', false)">
-          Close
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+<template lang="pug">
+  v-dialog(lazy, absolute, width='75%', v-model='$store.state.historyModal')
+    v-btn(secondary, dark, @click.mative='refresh()', slot='activator')
+      | History
+    v-card.secondary
+      v-card-title.headline History
+      v-divider
+      v-card-text
+        v-layout(row, wrap)
+          v-expansion-panel.secondary(expand)
+            v-expansion-panel-content.item-container(
+              ripple,
+              v-for='item in Object.keys(history).reverse()',
+              :key='item'
+            )
+              .day(slot='header', v-ripple='true')
+                | {{ item }}
+              v-card
+                v-card-text.lighten-3.info-container
+                  v-layout(row, wrap)
+                    template(v-for='info in history[item]')
+                      v-flex.time.entry(xs2, :class='isDelete(info.type)')
+                        | {{ info.time }}
+                      v-flex.type.entry(xs2, :class='isDelete(info.type)')
+                        | {{ info.type }}
+                      v-flex.ellipsis.text.entry(xs7, :class='isDelete(info.type)')
+                        | {{ info.text }}
+                      v-flex.entry(xs1, :class='isDelete(info.type)')
+                        v-icon.delete-entry(v-ripple='true', @click.stop='clearEntry(info, item)')
+                          | clear
+      v-divider
+      v-card-actions(style=' padding-right: 20px;')
+        v-spacer
+        v-btn.blue--text.darken-1(
+          flat,
+          style='width: 100px;',
+          @click="$store.commit('setHistoryModal', false)"
+        ) Close
 </template>
 
 <script>
diff --git a/components/infoModal.vue b/components/infoModal.vue
index 36a4b3b..9296a31 100644
--- a/components/infoModal.vue
+++ b/components/infoModal.vue
@@ -1,49 +1,34 @@
-<template>
-  <div>
-    <v-dialog v-model="searchShow" width="650" lazy absolute>
-      <v-btn icon slot="activator">
-        <v-icon>search</v-icon>
-      </v-btn>
-      <v-card class="pr-4">
-        <v-card-title class="headline">Which anime are you looking for?</v-card-title>
-        <v-card-text>
-          <v-layout wrap justify-center>
-            <v-flex xs6>
-              <v-text-field
-                  name="search-name"
-                  label="Anime name"
-                  v-model="searchTerm"
-                  dark
-              ></v-text-field>
-            </v-flex>
-            <v-flex xs12>
-              <v-layout row wrap justify-center>
-                <template v-if="results.length"
-                          v-for="item in results">
-                  <v-flex xs3 class="elem"
-                          @click="search(item.name)">
-                    <v-layout wrap justify-center
-                              v-ripple="true"
-                              class="elem-content elevation-3"
-                              @click.all="search(item.name)">
-                      <v-flex xs8>
-                        <img :src="item.image_url" height="140" class="elem-picture">
-                      </v-flex>
-                      <v-flex xs10 class="elem-name">{{ item.name }}</v-flex>
-                    </v-layout>
-                  </v-flex>
-                </template>
-              </v-layout>
-            </v-flex>
-          </v-layout>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn class="blue--text darken-1 close-button" flat @click="searchShow = false">Close</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
+<template lang="pug">
+  v-dialog(v-model='searchShow', width='650', lazy, absolute)
+    v-btn(icon, slot='activator')
+      v-icon search
+    v-card.pr-4
+      v-card-title.headline Which anime are you looking for?
+      v-card-text
+        v-layout(wrap, justify-center)
+          v-flex(xs6)
+            v-text-field(
+              name='search-name',
+              label='Anime name',
+              v-model='searchTerm',
+              dark
+            )
+          v-flex(xs12)
+            v-layout(row, wrap, justify-center)
+              template(v-if='results.length', v-for='item in results')
+                v-flex.elem(xs3, @click='search(item.name)')
+                  v-layout.elem-content.elevation-3(
+                    wrap,
+                    justify-center,
+                    v-ripple='true',
+                    @click.all='search(item.name)'
+                  )
+                    v-flex(xs8)
+                      img.elem-picture(:src='item.image_url', height='140')
+                    v-flex.elem-name(xs10) {{ item.name }}
+      v-card-actions
+        v-spacer
+        v-btn.blue--text.darken-1.close-button(flat, @click='searchShow = false') Close
 </template>
 
 <script>
diff --git a/components/infoResults.vue b/components/infoResults.vue
index d2d16f7..e578252 100644
--- a/components/infoResults.vue
+++ b/components/infoResults.vue
@@ -1,49 +1,34 @@
-<template>
-  <v-dialog width="800" v-model="$store.state.info.show" persistent lazy absolute>
-    <v-card class="secondary">
-      <v-card-title class="headline">Result for «{{ searchTerm }}»</v-card-title>
-      <v-card-text>
-        <h4 v-if="error">{{ error }}</h4>
-        <div v-else-if="loading">
-          <h5 class="loading-text white--text">Gathering data...</h5>
-          <h5 class="loading-text white--text">Info should be displayed in a few seconds</h5>
-        </div>
-        <v-card v-else class="secondary">
-          <v-layout row wrap>
-            <v-flex xs9>
-              <v-card-title class="info-title">
-                {{ info.alternativeTitles.japanese[0].replace('Japanese: ', '') }} [{{info.type }}]
-              </v-card-title>
-            </v-flex>
-            <v-flex xs3>
-              <v-card-title>{{ info.statistics.score.value }} ({{ info.statistics.score.count }})</v-card-title>
-            </v-flex>
-          </v-layout>
-          <v-layout row wrap>
-            <v-flex xs3 class="info-pic-container">
-              <img :src="info.image" class="info-pic"/>
-            </v-flex>
-            <v-flex xs9 class="info-synopsis-container">
-              <p class="info-synopsis">{{ info.synopsis }}</p>
-            </v-flex>
-          </v-layout>
-          <v-layout class="top-info">
-            <v-flex xs9 class="info-text">{{ info.genres.join(', ') }}</v-flex>
-            <v-flex xs3 class="info-text">{{ info.episodes }} {{ episodeLabel }}</v-flex>
-          </v-layout>
-          <v-layout class="bottom-info">
-            <v-flex xs5 class="info-text">{{ info.studios.join(', ') }}</v-flex>
-            <v-flex xs4 class="info-text">{{ info.classification }}</v-flex>
-            <v-flex xs3 class="info-text">{{ info.status }} ({{ info.aired.split(' ')[2] }})</v-flex>
-          </v-layout>
-        </v-card>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn class="blue--text darken-1 close-button" flat @click="$store.commit('showInfo', false)">Thanks!</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+<template lang="pug">
+  v-dialog(width='800', v-model='$store.state.info.show', persistent, lazy, absolute)
+    v-card.secondary
+      v-card-title.headline Result for «{{ searchTerm }}»
+      v-card-text
+        h4(v-if='error') {{ error }}
+        div(v-else-if='loading')
+          h5.loading-text.white--text Gathering data...
+          h5.loading-text.white--text Info should be displayed in a few seconds
+        v-card.secondary(v-else)
+          v-layout(row, wrap)
+            v-flex(xs9)
+              v-card-title.info-title
+                | {{ info.alternativeTitles.japanese[0].replace('Japanese: ', '') }} [{{info.type }}]
+            v-flex(xs3)
+              v-card-title {{ info.statistics.score.value }} ({{ info.statistics.score.count }})
+          v-layout(row, wrap)
+            v-flex.info-pic-container(xs3)
+              img.info-pic(:src='info.image')
+            v-flex.info-synopsis-container(xs9)
+              p.info-synopsis {{ info.synopsis }}
+          v-layout.top-info
+            v-flex.info-text(xs9) {{ info.genres.join(', ') }}
+            v-flex.info-text(xs3) {{ info.episodes }} {{ episodeLabel }}
+          v-layout.bottom-info
+            v-flex.info-text(xs5) {{ info.studios.join(', ') }}
+            v-flex.info-text(xs4) {{ info.classification }}
+            v-flex.info-text(xs3) {{ info.status }} ({{ info.aired.split(' ')[2] }})
+      v-card-actions
+        v-spacer
+        v-btn.blue--text.darken-1.close-button(flat, @click="$store.commit('showInfo', false)") Thanks!
 </template>
 
 <script>
diff --git a/components/settings.vue b/components/settings.vue
index 668c031..4a25e25 100644
--- a/components/settings.vue
+++ b/components/settings.vue
@@ -1,130 +1,91 @@
-<template>
-  <v-dialog v-model="configModal"
-            fullscreen
-            transition="config"
-            :overlay=false>
-    <v-btn icon slot="activator">
-      <v-icon>settings</v-icon>
-    </v-btn>
-
-    <v-card class="white--text main">
-      <v-toolbar dark class="mablue">
-        <v-btn icon @click="configModal = false" dark>
-          <v-icon>close</v-icon>
-        </v-btn>
-        <v-toolbar-title class="headline">Settings</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-toolbar-items>
-          <v-btn dark flat
-                 v-on:click.native="save()">
-            Save
-          </v-btn>
-        </v-toolbar-items>
-      </v-toolbar>
-
-      <v-navigation-drawer class="pb-0 drawer"
-                           v-model="drawer">
-        <v-list>
-          <template v-for="item in itemGroup">
-            <v-list-group v-if="item.items"
-                          :key="item.title">
-              <v-list-tile slot="item" class="ripple" ripple>
-                <v-list-tile-action>
-                  <v-icon>{{ item.action }}</v-icon>
-                </v-list-tile-action>
-                <v-list-tile-title>
-                  {{ item.title }}
-                </v-list-tile-title>
-                <v-list-tile-action>
-                  <v-icon>
-                    keyboard_arrow_down
-                  </v-icon>
-                </v-list-tile-action>
-              </v-list-tile>
-              <v-list-tile v-for="subItem in item.items"
-                           class="ripple"
-                           ripple
-                           :to="subItem.href"
-                           :key="subItem.title">
-                <v-list-tile-action>
-                  <v-icon>{{ subItem.action }}</v-icon>
-                </v-list-tile-action>
-                <v-list-tile-content>
-                  <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
-                </v-list-tile-content>
-              </v-list-tile>
-              <v-divider></v-divider>
-            </v-list-group>
-            <v-subheader v-else-if="item.header">{{ item.header }}</v-subheader>
-            <v-divider v-else-if="item.divider"></v-divider>
-            <v-list-tile v-else ripple style="position: relative">
-              <v-list-tile-action>
-                <v-icon>{{ item.action }}</v-icon>
-              </v-list-tile-action>
-              <v-list-tile-title>
-                {{ item.title }}
-              </v-list-tile-title>
-            </v-list-tile>
-          </template>
-        </v-list>
-      </v-navigation-drawer>
-
-      <v-container fluid class="container">
-        <v-layout row wrap justify-center>
-          <v-flex xs11>
-            <v-card>
-              <v-card-title class="headline" id="download">
-                Download
-              </v-card-title>
-              <v-divider></v-divider>
-              <v-layout row wrap justify-center>
-                <v-flex xs6 class="section-title">Preferred fansub</v-flex>
-                <v-flex xs6 class="section-title">Quality</v-flex>
-                <v-flex offset-xs1 xs4>
-                  <v-select
-                      v-bind:items="fansubChoices"
-                      v-model="config.fansub"
-                      hint="The fansub you want to check first!"
-                      persistent-hint
-                      dark
-                      item-value="text"
-                  ></v-select>
-                </v-flex>
-                <v-flex xs1></v-flex>
-                <template v-for="radio in radios">
-                  <v-flex xs2>
-                    <v-radio :label="radio" :value="radio" class="primary--text" v-model="config.quality"></v-radio>
-                  </v-flex>
-                </template>
-                <v-flex offset-xs1 xs3 class="section-title">Magnets</v-flex>
-                <v-flex xs8>
-                  <v-switch label="Activate" color="primary" v-model="config.magnets" dark></v-switch>
-                </v-flex>
-              </v-layout>
-            </v-card>
-            <v-card class="section">
-              <v-card-title class="headline" id="local">Local</v-card-title>
-              <v-divider></v-divider>
-              <v-layout row wrap justify-center>
-                <v-flex xs4 class="section-title">Preferred local path</v-flex>
-                <v-flex xs6 class="local-path">{{ config.localPath }}</v-flex>
-                <v-flex xs2>
-                  <v-btn accent @click="$store.dispatch('changePathWithConfig')">Choose</v-btn>
-                </v-flex>
-                <v-flex xs3 class="section-title">News</v-flex>
-                <v-flex xs9>
-                  <v-switch :label="config.inside ? 'Inside' : 'Outside'"
-                            color="primary"
-                            v-model="config.inside" dark>
-                  </v-switch>
-                </v-flex>
-              </v-layout>
-            </v-card>
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-card>
-</v-dialog>
+<template lang="pug">
+  v-dialog(v-model='configModal', fullscreen, transition='config', :overlay='false')
+    v-btn(icon, slot='activator')
+      v-icon settings
+    v-card.white--text.main
+      v-toolbar.mablue(dark)
+        v-btn(icon, @click='configModal = false', dark)
+          v-icon close
+        v-toolbar-title.headline Settings
+        v-spacer
+        v-toolbar-items
+          v-btn(dark, flat, v-on:click.native='save()')
+            | Save
+      v-navigation-drawer.pb-0.drawer(v-model='drawer')
+        v-list
+          template(v-for='item in itemGroup')
+            v-list-group(v-if='item.items', :key='item.title')
+              v-list-tile.ripple(slot='item', ripple)
+                v-list-tile-action
+                  v-icon {{ item.action }}
+                v-list-tile-title
+                  | {{ item.title }}
+                v-list-tile-action
+                  v-icon
+                    | keyboard_arrow_down
+              v-list-tile.ripple(
+                v-for='subItem in item.items',
+                ripple, :to='subItem.href',
+                :key='subItem.title'
+              )
+                v-list-tile-action
+                  v-icon {{ subItem.action }}
+                v-list-tile-content
+                  v-list-tile-title {{ subItem.title }}
+              v-divider
+            v-subheader(v-else-if='item.header') {{ item.header }}
+            v-divider(v-else-if='item.divider')
+            v-list-tile(v-else, ripple, style='position: relative')
+              v-list-tile-action
+                v-icon {{ item.action }}
+              v-list-tile-title
+                | {{ item.title }}
+      v-container.container(fluid)
+        v-layout(row, wrap, justify-center)
+          v-flex(xs11)
+            v-card
+              v-card-title#download.headline
+                | Download
+              v-divider
+              v-layout(row, wrap, justify-center)
+                v-flex.section-title(xs6) Preferred fansub
+                v-flex.section-title(xs6) Quality
+                v-flex(offset-xs1, xs4)
+                  v-select(
+                    v-bind:items='fansubChoices',
+                    v-model='config.fansub',
+                    hint='The fansub you want to check first!',
+                    persistent-hint,
+                    dark,
+                    item-value='text'
+                  )
+                v-flex(xs1)
+                template(v-for='radio in radios')
+                  v-flex(xs2)
+                    v-radio.primary--text(
+                      :label='radio',
+                      :value='radio',
+                      v-model='config.quality'
+                    )
+                v-flex.section-title(offset-xs1, xs3) Magnets
+                v-flex(xs8)
+                  v-switch(label='Activate', color='primary', v-model='config.magnets', dark)
+            v-card.section
+              v-card-title#local.headline Local
+              v-divider
+              v-layout(row, wrap, justify-center)
+                v-flex.section-title(xs4) Preferred local path
+                v-flex.local-path(xs6) {{ config.localPath }}
+                v-flex(xs2)
+                  v-btn(accent, @click="$store.dispatch('changePathWithConfig')") Choose
+                v-flex.section-title(xs3) News
+                v-flex(xs9)
+                  v-switch(
+                    :label="config.inside ? 'Inside' : 'Outside'",
+                    color='primary',
+                    v-model='config.inside',
+                    dark
+                  )
 </template>
 
 <script>
diff --git a/package.json b/package.json
index a9a3a26..884c28f 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "test": "standard --fix && npm test:front && npm test:server",
     "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
     "lint": "standard --fix --verbose --plugin vue '**/*.{js,vue}' | snazzy",
+    "pack": "build --dir",
     "dist:linux": "build --linux deb AppImage",
     "dist:win": "build --win nsis --ia32 x64 appx zip squirrel",
     "dist:mac": "build --mac dmg zip",
@@ -55,7 +56,7 @@
     "vue-loader": "^13.0.4",
     "vue-router": "^2.7.0",
     "vue-server-renderer": "^2.4.2",
-    "vuetify": "^0.14.9",
+    "vuetify": "^0.14.11",
     "vuex": "^2.3.1",
     "vuex-router-sync": "^4.1.2"
   },
diff --git a/pages/downloader.vue b/pages/downloader.vue
index 27f6b2d..4cf6855 100644
--- a/pages/downloader.vue
+++ b/pages/downloader.vue
@@ -1,147 +1,105 @@
-<template>
-  <v-container fluid class="container" id="downloader">
-    <div class="cute-char left-pic"></div>
-    <div class="cute-char right-pic"></div>
-
-    <div class="form-container">
-      <v-layout row wrap justify-center>
-        <v-flex xs2 sm7 md9>
-          <!-- Dummy cell -->
-        </v-flex>
-        <v-flex xs10 sm5 md3>
-          <div class="choose-magnets">
-            <v-card class="z-depth-0">
-              <v-card-text class="switch">
-                <v-switch id="magnets-switch"
-                          label="Get Magnets"
-                          color="primary"
-                          v-model="$store.state.config.magnets"
-                          dark/>
-              </v-card-text>
-            </v-card>
-          </div>
-        </v-flex>
-        <v-flex xs4></v-flex>
-        <v-flex xs4
-                @keydown.enter="next(1)">
-          <v-text-field name="name-input"
-                        type="text"
-                        id="name-input"
-                        label="Name of the anime"
-                        v-model="$store.state.downloaderForm.name"
-                        autofocus dark>
-          </v-text-field>
-        </v-flex>
-        <v-flex xs4></v-flex>
-        <v-flex xs4></v-flex>
-        <v-flex xs4
-               @keydown.enter="next(2)"
-               @keydown.delete="previous(2)">
-          <v-text-field name="from-ep-input"
-                        type="number" min="0"
-                        label="From episode..."
-                        v-model="$store.state.downloaderForm.fromEp"
-                        dark>
-          </v-text-field>
-        </v-flex>
-        <v-flex xs4></v-flex>
-        <v-flex xs4></v-flex>
-        <v-flex xs4
-               @keydown.enter="next(3)"
-               @keydown.delete="previous(3)">
-          <v-text-field name="until-ep-input"
-                        type="number"
-                        label="Until episode.."
-                        v-model="$store.state.downloaderForm.untilEp"
-                        dark>
-          </v-text-field>
-        </v-flex>
-        <v-flex xs4></v-flex>
-        <v-flex xs12 sm6 md4 class="radio-container">
-          <v-radio class="radio primary--text"
-                   label="480p"
-                   v-model="quality"
-                   value="480p" dark/>
-        </v-flex>
-        <v-flex xs12 sm6 md4>
-          <v-radio class="radio primary--text"
-                   label="720p"
-                   v-model="quality"
-                   value="720p" dark/>
-        </v-flex>
-        <v-flex xs12 sm6 md4>
-          <v-radio class="radio primary--text"
-                   label="1080p"
-                   v-model="quality"
-                   value="1080p" dark/>
-        </v-flex>
-      </v-layout>
-    </div>
-    <div class="download-button-container">
-      <div class="download-button">
-        <v-btn dark block secondary
-               id="download-btn"
-               @click="isDownloadable()"
-               v-if="!$store.state.downloaderForm.loading">
-          Download!
-        </v-btn>
-        <v-btn dark block secondary loading v-else></v-btn>
-      </div>
-    </div>
-    <v-dialog v-model="$store.state.downloaderModal.show"
-              lazy absolute
-              width="800"
-              class="magnet-modal">
-      <v-card class="secondary white--text">
-        <v-card-text class="white--text">
-          <h2 class="title white--text">Magnets for <strong>{{ $store.state.downloaderModal.title }}</strong></h2>
-        </v-card-text>
-        <v-divider/>
-        <v-card-text class="subheading white--text">
-          <v-layout row wrap justify-center align-center>
-            <v-flex xs4 offset-xs6 class="modal-icon-container">
-              <v-btn flat icon
-                     v-if="links"
-                     v-clipboard="links.join('\n')"
-                     @success="copiedSnackbar = true">
-                <v-icon class="copy-icon">content_copy</v-icon>
-              </v-btn>
-
-            </v-flex>
-            <v-flex xs12 v-for="link in $store.state.downloaderModal.text"
-                   class="subheading grey--text modal-text" :key="link">{{ link.split('&')[0] }}
-            </v-flex>
-          </v-layout>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn flat
-                 class="blue--text darken-1"
-                 v-on:click.native="$store.state.downloaderModal.show = false">
-            Thanks!
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-    <v-snackbar :timeout="timeout"
-                :top="y === 'top'"
-                :bottom="y === 'bottom'"
-                :right="x === 'right'"
-                :left="x === 'left'"
-                v-model="snackbar">
-      Please, enter a valid name (at least 3 letters...)
-      <v-btn flat class="pink--text" @click="snackbar = false">ok!</v-btn>
-    </v-snackbar>
-    <v-snackbar :timeout="copiedTimeout"
-                :top="y === 'top'"
-                :bottom="y === 'bottom'"
-                :right="x === 'right'"
-                :left="x === 'left'"
-                v-model="copiedSnackbar">
-      All magnets were copied to clipboard!
-      <v-btn flat class="pink--text" @click="copiedSnackbar = false">Thanks!</v-btn>
-    </v-snackbar>
-  </v-container>
+<template lang="pug">
+  v-container#downloader.container(fluid)
+    .cute-char.left-pic
+    .cute-char.right-pic
+    .form-container
+      v-layout(row, wrap, justify-center)
+        v-flex(xs2, sm7, md9)
+          // Dummy cell
+        v-flex(xs10, sm5, md3)
+          .choose-magnets
+            v-card.z-depth-0
+              v-card-text.switch
+                v-switch#magnets-switch(
+                  label='Get Magnets',
+                  color='primary',
+                  v-model='$store.state.config.magnets',
+                  dark
+                )
+        v-flex(xs4)
+        v-flex(xs4, @keydown.enter='next(1)')
+          v-text-field#name-input(
+            name='name-input',
+            type='text',
+            label='Name of the anime',
+            v-model='$store.state.downloaderForm.name',
+            autofocus,
+            dark
+          )
+        v-flex(xs4)
+        v-flex(xs4)
+        v-flex(xs4, @keydown.enter='next(2)', @keydown.delete='previous(2)')
+          v-text-field(
+            name='from-ep-input',
+            type='number',
+            min='0',
+            label='From episode...',
+            v-model='$store.state.downloaderForm.fromEp',
+            dark
+          )
+        v-flex(xs4)
+        v-flex(xs4)
+        v-flex(xs4, @keydown.enter='next(3)', @keydown.delete='previous(3)')
+          v-text-field(
+            name='until-ep-input',
+            type='number',
+            label='Until episode..',
+            v-model='$store.state.downloaderForm.untilEp',
+            dark
+          )
+        v-flex(xs4)
+        v-flex.radio-container(xs12, sm6, md4)
+          v-radio.radio.primary--text(label='480p', v-model='quality', value='480p', dark)
+        v-flex(xs12, sm6, md4)
+          v-radio.radio.primary--text(label='720p', v-model='quality', value='720p', dark)
+        v-flex(xs12, sm6, md4)
+          v-radio.radio.primary--text(label='1080p', v-model='quality', value='1080p', dark)
+    .download-button-container
+      .download-button
+        v-btn#download-btn(
+          dark, block, secondary,
+          @click='isDownloadable()',
+          v-if='!$store.state.downloaderForm.loading'
+        ) Download!
+        v-btn(dark, block, secondary, loading, v-else)
+    v-dialog.magnet-modal(v-model='$store.state.downloaderModal.show', lazy, absolute, width='800')
+      v-card.secondary.white--text
+        v-card-text.white--text
+          h2.title.white--text
+            | Magnets for #[strong {{ $store.state.downloaderModal.title }}]
+        v-divider
+        v-card-text.subheading.white--text
+          v-layout(row, wrap, justify-center, align-center)
+            v-flex.modal-icon-container(xs4, offset-xs6)
+              v-btn(flat, icon, v-if='links', v-clipboard="links.join('')", @success='copiedSnackbar = true')
+                v-icon.copy-icon content_copy
+            v-flex.subheading.grey--text.modal-text(
+              xs12,
+              v-for='link in $store.state.downloaderModal.text',
+              :key='link'
+            ) {{ link.split('&')[0] }}
+        v-card-actions
+          v-spacer
+          v-btn.blue--text.darken-1(flat, v-on:click.native='$store.state.downloaderModal.show = false')
+            | Thanks!
+    v-snackbar(
+      :timeout='timeout',
+      :top="y === 'top'",
+      :bottom="y === 'bottom'",
+      :right="x === 'right'",
+      :left="x === 'left'",
+      v-model='snackbar'
+    ) Please, enter a valid name (at least 3 letters...)
+      v-btn.pink--text(flat, @click='snackbar = false') ok!
+    v-snackbar(
+      :timeout='copiedTimeout',
+      :top="y === 'top'",
+      :bottom="y === 'bottom'",
+      :right="x === 'right'",
+      :left="x === 'left'",
+      v-model='copiedSnackbar'
+    ) All magnets were copied to clipboard!
+      v-btn.pink--text(flat, @click='copiedSnackbar = false') Thanks!
 </template>
 
 <script>
diff --git a/pages/index.vue b/pages/index.vue
index 436cdeb..d9ae7ac 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,158 +1,90 @@
-<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
-  <v-container id="container" fluid class="container pa-0">
-    <transition name="fade" v-if="releases.length">
-      <v-layout row wrap justify-center style="margin: 0 1% 0 1%;">
-        <v-flex md4 sm4 xs8 class="time-container">
-          <span class="update-time">Updated {{ lastUpdateTime }}.</span>
-        </v-flex>
-        <v-flex md4 sm1 hidden-xs-only></v-flex>
-        <v-flex md2 sm3 xs10>
-          <v-select
-            class="select"
-            :items="fansubList"
-            v-model="$store.state.releaseFansub"
-            label="Fansub"
-            dark
-            single-line
-            hint="Pick a fansub"
+<template lang="pug" xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
+  v-container#container.container.pa-0(fluid)
+    transition(name='fade', v-if='releases.length')
+      v-layout(row, wrap, justify-center, style='margin: 0 1% 0 1%;')
+        v-flex.time-container(md4, sm4, xs8)
+          span.update-time Updated {{ lastUpdateTime }}.
+        v-flex(md4, sm1, hidden-xs-only)
+        v-flex(md2, sm3, xs10)
+          v-select.select(
+            :items='fansubList',
+            v-model='$store.state.releaseFansub',
+            label='Fansub',
+            dark, single-line,
+            hint='Pick a fansub',
             persistent-hint
-          />
-        </v-flex>
-        <v-flex md1 sm2 xs10>
-          <v-select
-            class="select"
-            :items="qualityList"
-            v-model="$store.state.releaseQuality"
-            label="Quality"
-            dark
-            single-line
-            hint="Which quality ?"
+          )
+        v-flex(md1, sm2, xs10)
+          v-select.select(
+            :items='qualityList',
+            v-model='$store.state.releaseQuality',
+            label='Quality',
+            dark,
+            single-line,
+            hint='Which quality ?',
             persistent-hint
-          />
-        </v-flex>
-        <v-flex md1 sm1 xs12 class="refresh-button-container">
-          <v-btn icon
-                 class="refresh-button"
-                 @click="refresh()">
-            <v-icon large>refresh</v-icon>
-          </v-btn>
-        </v-flex>
-        <template v-for="item in releases">
-          <v-flex xs12 sm6 md4
-                  :key="item.name"
-                  class="elem">
-            <v-card class="elem-content elevation-3" v-ripple="true">
-              <v-card-text class="elem-card">
-                <v-container fluid style="padding: 0;">
-                  <v-layout row wrap>
-                    <v-flex class="elem-title" xs9 v-tooltip:top="{ html: item.rawName }">
-                      <h6 class="white--text">{{ item.rawName }}</h6>
-                    </v-flex>
-                    <v-flex v-tooltip:top="{ html: 'Episode ' + item.ep }"
-                            class="elem-ep text-xs-right" xs3>
-                      <h6 class="white--text">Ep {{ item.ep }}</h6>
-                    </v-flex>
-                    <v-flex class="elem-image"
-                            xl6 lg4 md5 xs4>
-                      <img :src="item.picture" onerror="this.src='static/images/error.jpg'" height="200" class="picture"/>
-                    </v-flex>
-                    <v-flex xl6 lg8 md7 xs8>
-                      <div class="elem-text-links">
-                        <div class="synopsis">
-                          {{ item.synopsis }}
-                        </div>
-                        <div class="links">
-                          <a :href="item.magnetLink" class="download-button">
-                            <v-btn dark flat
-                                   @click="print(item)"
-                                   class="btn--light-flat-pressed">
-                              Download
-                            </v-btn>
-                          </a>
-                          <!-- Add open-on-hover when vuetify repaired it -->
-                          <v-menu transition="slide-x-transition">
-                            <v-btn flat dark slot="activator">
-                              More
-                            </v-btn>
-                            <v-list class="dark">
-                              <v-list-tile @click="openModal(item.rawName, item.fullSynopsis)">
-                                <v-list-tile-action>
-                                  <v-icon>more</v-icon>
-                                </v-list-tile-action>
-                                <v-list-tile-title>
-                                  Check synopsis
-                                </v-list-tile-title>
-                              </v-list-tile>
-                              <v-list-tile @click="downloadAll(item.rawName)">
-                                <v-list-tile-action>
-                                  <v-icon>file_download</v-icon>
-                                </v-list-tile-action>
-                                <v-list-tile-title>
-                                  Download all episodes
-                                </v-list-tile-title>
-                              </v-list-tile>
-                              <v-list-tile @click="searchThis(item.rawName)">
-                                <v-list-tile-action>
-                                  <v-icon>info_outline</v-icon>
-                                </v-list-tile-action>
-                                <v-list-tile-title>Information</v-list-tile-title>
-                              </v-list-tile>
-                              <v-list-tile @click="showChoices(item.rawName)">
-                                <v-list-tile-action>
-                                  <v-icon>add_box</v-icon>
-                                </v-list-tile-action>
-                                <v-list-tile-title>
-                                  Add to
-                                </v-list-tile-title>
-                              </v-list-tile>
-                            </v-list>
-                          </v-menu>
-                        </div>
-                      </div>
-                    </v-flex>
-                  </v-layout>
-                </v-container>
-              </v-card-text>
-            </v-card>
-          </v-flex>
-        </template>
-      </v-layout>
-    </transition>
-    <loader v-else></loader>
-    <div class="text-xs-center modal-container">
-      <v-dialog v-model="modal" width="70%">
-        <v-card class="white--text">
-          <v-card-text class="white--text">
-            <h2 class="white--text headline">{{ modalTitle }}</h2>
-          </v-card-text>
-          <v-card-text class="subheading white--text">
-            {{ modalText }}
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn class="blue--text darken-1" flat
-                   v-on:click.native="modal = false">Thanks!
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </div>
-    <choice-window :entry="choiceTitle"></choice-window>
-  </v-container>
+          )
+        v-flex.refresh-button-container(md1, sm1, xs12)
+          v-btn.refresh-button(icon, @click='refresh()')
+            v-icon(large) refresh
+        template(v-for='item in releases')
+          v-flex.elem(xs12, sm6, md4, :key='item.name')
+            v-card.elem-content.elevation-3(v-ripple='true')
+              v-card-text.elem-card
+                v-container(fluid, style='padding: 0;')
+                  v-layout(row, wrap)
+                    v-flex.elem-title(xs9, v-tooltip:top='{ html: item.rawName }')
+                      h6.white--text {{ item.rawName }}
+                    v-flex.elem-ep.text-xs-right(v-tooltip:top="{ html: 'Episode ' + item.ep }", xs3)
+                      h6.white--text Ep {{ item.ep }}
+                    v-flex.elem-image(xl6, lg4, md5, xs4)
+                      img.picture(
+                        :src='item.picture',
+                        onerror="this.src='static/images/error.jpg'",
+                        height='200'
+                      )
+                    v-flex(xl6, lg8, md7, xs8)
+                      .elem-text-links
+                        .synopsis {{ item.synopsis }}
+                        .links
+                          a.download-button(:href='item.magnetLink')
+                            v-btn.btn--light-flat-pressed(dark, flat, @click='print(item)') Download
+                          v-menu(open-on-hover, transition='slide-x-transition')
+                            v-btn(flat, dark, slot='activator') More
+                            v-list.dark
+                              v-list-tile(@click='openModal(item.rawName, item.fullSynopsis)')
+                                v-list-tile-action
+                                  v-icon more
+                                v-list-tile-title Check synopsis
+                              v-list-tile(@click='downloadAll(item.rawName)')
+                                v-list-tile-action
+                                  v-icon file_download
+                                v-list-tile-title Download all episodes
+                              v-list-tile(@click='searchThis(item.rawName)')
+                                v-list-tile-action
+                                  v-icon info_outline
+                                v-list-tile-title Information
+                              v-list-tile(@click='showChoices(item.rawName)')
+                                v-list-tile-action
+                                  v-icon add_box
+                                v-list-tile-title Add to
+    loader(v-else)
+    .text-xs-center.modal-container
+      v-dialog(v-model='modal', width='70%')
+        v-card.white--text
+          v-card-text.white--text
+            h2.white--text.headline {{ modalTitle }}
+          v-card-text.subheading.white--text {{ modalText }}
+          v-card-actions
+            v-spacer
+            v-btn.blue--text.darken-1(flat, v-on:click.native='modal = false') Thanks!
+    choice-window(:entry='choiceTitle')
 </template>
 
 <script>
   import axios from 'axios'
 
   export default {
-    head () {
-      return {
-        title: 'Releases',
-        meta: [
-          {hid: 'description', name: 'description', content: 'Latest downloadable anime releases'}
-        ]
-      }
-    },
     mounted () {
       if (this.releases.length) {
         this.updateTime(this.$store)
diff --git a/pages/localPage.vue b/pages/localPage.vue
index f372584..28415fc 100644
--- a/pages/localPage.vue
+++ b/pages/localPage.vue
@@ -1,171 +1,97 @@
-<template>
-  <v-container fluid class="pa-0">
-    <div v-if="files.length">
-      <v-layout row wrap style="margin: 0 1%;">
-        <v-flex xs12 class="menubar">
-          <v-layout row wrap>
-            <v-flex hidden-sm-and-up xs2></v-flex>
-            <v-flex xs4 sm3 md2 class="menu-eps">
-              <p class="menu-eps-text">{{ nbEps }} {{ episodeLabel }}</p>
-            </v-flex>
-            <v-flex xs4 sm2 md2>
-              <history-modal></history-modal>
-            </v-flex>
-            <v-flex xs12 sm7 offset-md3 md5 offset-lg4 lg4 offset-xl5 xl3 class="menu-buttons">
-              <v-btn icon
-                     class="refresh-button"
-                     v-if="!this.$store.state.refreshingLocal"
-                     @click="refresh()">
-                <v-icon large>refresh</v-icon>
-              </v-btn>
-              <v-btn v-else icon loading
-                     class="refresh-button">
-              </v-btn>
-              <v-btn flat dark
-                     @click="changePath()"
-                     class="change-dir-button">
-                Change dir
-              </v-btn>
-              <v-btn secondary dark
-                     @click="resetLocal()"
-                     v-if="!this.$store.state.resettingLocal"
-                     class="reset-cache-button">
-                Refresh local info
-              </v-btn>
-              <v-btn secondary dark loading v-else class="reset-cache-button"></v-btn>
-            </v-flex>
-          </v-layout>
-        </v-flex>
-        <transition-group name="list">
-          <template v-for="item in files">
-            <v-flex :key="item.path" xs12 sm6 md4 xl3
-                    class="elem">
-              <v-card class="elem-content elevation-3" v-ripple="true">
-                <v-card-text class="elem-card">
-                  <v-container fluid style="padding: 0;">
-                    <v-layout row wrap class="elem-container">
-                      <v-flex xs7
-                              v-tooltip:top="{ html: item.name }">
-                        <h6 class="elem-title ellipsis white--text">{{ item.name }}</h6>
-                      </v-flex>
-                      <v-flex xs2
-                              v-tooltip:top="{ html: 'Episode ' + item.ep }"
-                              class="elem-ep text-xs-right">
-                        <p class="ellipsis ep">{{ item.ep }} / {{ item.numberOfEpisode }}</p>
-                      </v-flex>
-                      <v-flex xs3 class="buttons-container">
-                        <v-btn large icon
-                               class="play-button"
-                               @click="playThis(item)">
-                          <v-icon large>play_circle_outline</v-icon>
-                        </v-btn>
-                        <!-- Add open-on-hover when vuetify repaired it -->
-                        <v-menu transition="slide-x-transition">
-                          <v-btn icon medium slot="activator">
-                            <v-icon>more_vert</v-icon>
-                          </v-btn>
-                          <v-list class="dark">
-                            <v-list-tile @click="showChoices(item.name)">
-                              <v-list-tile-action>
-                                <v-icon>add_box</v-icon>
-                              </v-list-tile-action>
-                              <v-list-tile-title>
-                                Add to
-                              </v-list-tile-title>
-                            </v-list-tile>
-                            <v-list-tile @click="delThis(item)">
-                              <v-list-tile-action>
-                                <v-icon medium class="primary--text">delete_forever</v-icon>
-                              </v-list-tile-action>
-                              <v-list-tile-title class="primary--text">Delete</v-list-tile-title>
-                            </v-list-tile>
-                          </v-list>
-                        </v-menu>
-                      </v-flex>
-                      <v-flex xs8
-                              v-tooltip:top="{ html: item.genres.length ? item.genres.join(', ') : 'No specified genre' }">
-                        <p class="ellipsis genres">
-                          {{ item.genres.length ? item.genres.join(', ') : 'No specified genre' }}
-                        </p>
-                      </v-flex>
-                      <v-flex xs4 v-tooltip:top="{ html: item.classification.replace('None', 'No restriction') }">
-                        <p class="ellipsis classification">
-                          {{ item.classification.replace('None', 'No restriction') }}
-                        </p>
-                      </v-flex>
-                      <v-flex xl5 lg4 md5 xs4 class="picture-container">
-                        <lazy-component>
-                          <img :src="item.picture" onerror="this.src='static/images/error.jpg'" class="picture">
-                        </lazy-component>
-                      </v-flex>
-                      <v-flex xl7 lg8 md7 xs8 class="bottom-right-container">
-                        <v-layout row wrap justify-space-between>
-                          <v-flex xs12>
-                            <div class="synopsis">{{ reduced(item.synopsis) }}</div>
-                          </v-flex>
-                          <v-flex xs12 style="display: flex">
-                            <v-layout align-center justify-space-between style="min-width: 100%">
-                              <v-flex xs2>
-                                <p class="year">{{ item.year }}</p>
-                              </v-flex>
-                              <v-flex xs7>
-                                <p class="status">{{ item.status }}</p>
-                              </v-flex>
-                              <v-flex xs3><p class="mark">{{ item.mark }}</p></v-flex>
-                            </v-layout>
-                          </v-flex>
-                        </v-layout>
-                      </v-flex>
-                    </v-layout>
-                  </v-container>
-                </v-card-text>
-              </v-card>
-            </v-flex>
-          </template>
-        </transition-group>
-      </v-layout>
-    </div>
-    <v-container fluid v-else>
-      <transition name="fade">
-        <img v-if="emptyBg" class="empty-bg" height="400" src="~static/images/empty-bg.png"/>
-      </transition>
-      <v-layout row wrap>
-        <v-flex xs12 class="menubar">
-          <v-layout row wrap>
-            <v-flex offset-xs2 xs2>
-              <history-modal></history-modal>
-            </v-flex>
-            <v-flex xs5></v-flex>
-            <v-flex xs3 class="menu-buttons">
-              <v-btn icon
-                     class="refresh-button"
-                     v-if="!this.$store.state.refreshingLocal"
-                     @click="refresh()">
-                <v-icon large>refresh</v-icon>
-              </v-btn>
-              <v-btn v-else icon loading
-                     class="refresh-button">
-              </v-btn>
-              <v-btn flat dark
-                     @click="changePath()"
-                     class="change-dir-button">
-                Change dir
-              </v-btn>
-            </v-flex>
-          </v-layout>
-        </v-flex>
-        <v-flex xs12 class="empty-message">
-          <h3 class="white--text">Wow such empty!</h3>
-          <h4 class="white--text">Start downloading anime
-            <router-link to="/downloader" class="green--text">here</router-link>
-            or
-            <router-link to="/" class="cyan--text">here!</router-link>
-          </h4>
-        </v-flex>
-      </v-layout>
-    </v-container>
-    <choice-window :entry="choiceTitle"></choice-window>
-  </v-container>
+<template lang="pug">
+  v-container.pa-0(fluid)
+    div(v-if='files.length')
+      v-layout(row, wrap, style='margin: 0 1%;')
+        v-flex.menubar(xs12)
+          v-layout(row, wrap)
+            v-flex(hidden-sm-and-up, xs2)
+            v-flex.menu-eps(xs4, sm3, md2)
+              p.menu-eps-text {{ nbEps }} {{ episodeLabel }}
+            v-flex(xs4, sm2, md2)
+              history-modal
+            v-flex.menu-buttons(xs12, sm7, offset-md3, md5, offset-lg4, lg4, offset-xl5, xl3)
+              v-btn.refresh-button(icon, v-if='!this.$store.state.refreshingLocal', @click='refresh()')
+                v-icon(large) refresh
+              v-btn.refresh-button(v-else, icon, loading)
+              v-btn.change-dir-button(flat, dark, @click='changePath()')
+                | Change dir
+              v-btn.reset-cache-button(secondary, dark, @click='resetLocal()', v-if='!this.$store.state.resettingLocal')
+                | Refresh local info
+              v-btn.reset-cache-button(secondary, dark, loading, v-else)
+        transition-group(name='list')
+          template(v-for='item in files')
+            v-flex.elem(:key='item.path', xs12, sm6, md4, xl3)
+              v-card.elem-content.elevation-3(v-ripple='true')
+                v-card-text.elem-card
+                  v-container(fluid, style='padding: 0;')
+                    v-layout.elem-container(row, wrap)
+                      v-flex(xs7, v-tooltip:top='{ html: item.name }')
+                        h6.elem-title.ellipsis.white--text {{ item.name }}
+                      v-flex.elem-ep.text-xs-right(xs2, v-tooltip:top="{ html: 'Episode ' + item.ep }")
+                        p.ellipsis.ep {{ item.ep }} / {{ item.numberOfEpisode }}
+                      v-flex.buttons-container(xs3)
+                        v-btn.play-button(large, icon, @click='playThis(item)')
+                          v-icon(large) play_circle_outline
+                        v-menu(open-on-hover, transition='slide-x-transition')
+                          v-btn(icon, medium, slot='activator')
+                            v-icon more_vert
+                          v-list.dark
+                            v-list-tile(@click='showChoices(item.name)')
+                              v-list-tile-action
+                                v-icon add_box
+                              v-list-tile-title
+                                | Add to
+                            v-list-tile(@click='delThis(item)')
+                              v-list-tile-action
+                                v-icon.primary--text(medium) delete_forever
+                              v-list-tile-title.primary--text Delete
+                      v-flex(
+                        xs8,
+                        v-tooltip:top="{ html: item.genres.length ? item.genres.join(', ') : 'No specified genre' }"
+                      )
+                        p.ellipsis.genres
+                          | {{ item.genres.length ? item.genres.join(', ') : 'No specified genre' }}
+                      v-flex(xs4, v-tooltip:top="{ html: item.classification.replace('None', 'No restriction') }")
+                        p.ellipsis.classification
+                          | {{ item.classification.replace('None', 'No restriction') }}
+                      v-flex.picture-container(xl5, lg4, md5, xs4)
+                        lazy-component
+                          img.picture(:src='item.picture', onerror="this.src='static/images/error.jpg'")
+                      v-flex.bottom-right-container(xl7, lg8, md7, xs8)
+                        v-layout(row, wrap, justify-space-between)
+                          v-flex(xs12)
+                            .synopsis {{ reduced(item.synopsis) }}
+                          v-flex(xs12, style='display: flex')
+                            v-layout(align-center, justify-space-between, style='min-width: 100%')
+                              v-flex(xs2)
+                                p.year {{ item.year }}
+                              v-flex(xs7)
+                                p.status {{ item.status }}
+                              v-flex(xs3)
+                                p.mark {{ item.mark }}
+    v-container(fluid, v-else)
+      transition(name='fade')
+        img.empty-bg(v-if='emptyBg', height='400', src='~static/images/empty-bg.png')
+      v-layout(row, wrap)
+        v-flex.menubar(xs12)
+          v-layout(row, wrap)
+            v-flex(offset-xs2, xs2)
+              history-modal
+            v-flex(xs5)
+            v-flex.menu-buttons(xs3)
+              v-btn.refresh-button(icon, v-if='!this.$store.state.refreshingLocal', @click='refresh()')
+                v-icon(large) refresh
+              v-btn.refresh-button(v-else, icon, loading)
+              v-btn.change-dir-button(flat, dark, @click='changePath()')
+                | Change dir
+        v-flex.empty-message(xs12)
+          h3.white--text Wow such empty!
+          h4.white--text
+            | Start downloading anime
+            router-link.green--text(to='/downloader') here
+            | or
+            router-link.cyan--text(to='/') here!
+    choice-window(:entry='choiceTitle')
 </template>
 
 <script>
@@ -218,7 +144,7 @@
 
           this.$store.dispatch('appendHistory', {
             type: 'Play',
-            text: item.name
+            text: `${item.name} - ${item.ep}`
           }).catch(err => { void (err) })
         })
       },
@@ -241,7 +167,7 @@
 
           this.$store.dispatch('appendHistory', {
             type: 'Delete',
-            text: item.name
+            text: `${item.name} - ${item.ep}`
           }).catch(err => { void (err) })
         }).catch((err) => {
           console.log('An error occurred while trying to delete a file:' + err)
diff --git a/pages/seasons.vue b/pages/seasons.vue
index 4880b52..f3fc0ae 100644
--- a/pages/seasons.vue
+++ b/pages/seasons.vue
@@ -1,153 +1,89 @@
-<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
-  <div style="min-height: 95vh">
-    <loader v-if="!season[1].items"></loader>
-
-    <v-container fluid v-else style="padding: 20px 0 0">
-      <v-layout row wrap justify-center class="form-container">
-        <v-flex sm3 xs8 class="season-container">
-          <v-select
-              v-bind:items="seasonChoices"
-              v-model="$store.state.season"
-              label="Season"
-              dark
-              item-text="name"
-              item-value="value"/>
-        </v-flex>
-        <v-flex offset-sm1 sm3 xs8 class="year-container">
-          <v-text-field name="input-year"
-                        type="number" min="2010"
-                        label="Year"
-                        v-model="$store.state.year"
-                        dark>
-          </v-text-field>
-        </v-flex>
-        <v-flex offset-sm1 sm2 xs8 class="refresh-button">
-          <v-btn secondary block dark @click="refreshSeason()">Refresh</v-btn>
-        </v-flex>
-      </v-layout>
-
-      <v-tabs id="tabs" dark fixed centered>
-        <v-tabs-bar slot="activators" class="mablue">
-          <v-tabs-slider class="primary"></v-tabs-slider>
-          <v-tabs-item v-for="i in 3"
-                       :href="'#' + i"
-                       :key="i">
-            {{ season[i].name }}
-          </v-tabs-item>
-        </v-tabs-bar>
-        <v-tabs-content v-for="i in 3"
-                        lazy
-                        v-bind:id="`${i}`"
-                        :key="i">
-          <v-text-field class="query"
-                        v-model="query"
-                        label="Search entry" dark>
-          </v-text-field>
-          <v-layout row wrap class="elems">
-            <transition-group name="list">
-              <v-flex md6 xs12 v-for="item in computedSeason[i].items"
-                      style="display: inline-block"
-                      :key="item.key">
-                <v-layout row wrap class="elem elevation-3" v-ripple="true">
-                  <!-- Header of elem -->
-                  <v-flex xs12 v-tooltip:bottom="{ html: item.title }">
-                    <h6 class="title ellipsis white--text">
-                      {{ item.title }}
-                    </h6>
-                  </v-flex>
-                  <v-flex xs8 v-tooltip:bottom="{ html: item.genres.join(' ') }">
-                    <p class="genres ellipsis">{{ item.genres.join(' ') }}</p>
-                  </v-flex>
-                  <v-flex xs3 v-tooltip:bottom="{ html: item.fromType }">
-                    <p class="from-type ellipsis">
-                      {{ item.fromType }}
-                    </p>
-                  </v-flex>
-                  <v-flex xs1></v-flex>
-                  <!-- Picture of elem -->
-                  <v-flex xs4 class="image-container">
-                    <lazy-component>
-                      <img :src="item.picture" onerror="this.src='static/images/error.jpg'" class="image"/>
-                    </lazy-component>
-                  </v-flex>
-                  <v-flex xs8 class="bottom-right">
-                    <v-layout wrap justify-space-between align-center>
-                      <v-flex xs12>
-                        <div class="synopsis">
-                          {{ reduced(item.synopsis) }}
-                        </div>
-                      </v-flex>
-                      <v-flex xs12>
-                        <v-layout wrap justify-space-between>
-                          <v-flex xs3 class="date">{{ getDate(item.releaseDate) }}</v-flex>
-                          <v-flex xs4 class="nb-ep">{{ item.nbEp }} {{ episode(item.npEp) }}</v-flex>
-                        </v-layout>
-                        <v-layout wrap justify-space-between>
-                          <v-flex xs8 class="producers"><strong>{{ item.producers.join(' ') }}</strong></v-flex>
-                          <v-flex xs4 class="dropdown-container">
-                            <!-- Add open-on-hover when vuetify repaired it -->
-                            <v-menu transition="slide-x-transition">
-                              <v-btn flat dark slot="activator">
-                                More
-                              </v-btn>
-                              <v-list class="dark">
-                                <v-list-tile @click="openModal(item.title, item.synopsis)">
-                                  <v-list-tile-action>
-                                    <v-icon>more</v-icon>
-                                  </v-list-tile-action>
-                                  <v-list-tile-title>
-                                    Check synopsis
-                                  </v-list-tile-title>
-                                </v-list-tile>
-                                <v-list-tile @click="$store.dispatch('searchInfoFromName', item.title)">
-                                  <v-list-tile-action>
-                                    <v-icon>info_outline</v-icon>
-                                  </v-list-tile-action>
-                                  <v-list-tile-title>Information</v-list-tile-title>
-                                </v-list-tile>
-                                <v-list-tile @click="showChoices(item.title)">
-                                  <v-list-tile-action>
-                                    <v-icon>add_box</v-icon>
-                                  </v-list-tile-action>
-                                  <v-list-tile-title>
-                                    Add to
-                                  </v-list-tile-title>
-                                </v-list-tile>
-                              </v-list>
-                            </v-menu>
-                          </v-flex>
-                        </v-layout>
-                      </v-flex>
-                    </v-layout>
-                  </v-flex>
-                </v-layout>
-              </v-flex>
-            </transition-group>
-          </v-layout>
-        </v-tabs-content>
-      </v-tabs>
-      <div class="text-xs-center modal-container">
-        <v-dialog v-model="modal" width="70%">
-          <v-card class="secondary white--text">
-            <v-card-text class="white--text">
-              <h2 class="headline white--text">{{ modalTitle }}</h2>
-            </v-card-text>
-            <v-card-text class="text white--text">
-              {{ modalText }}
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn class="blue--text darken-1" flat
-                     style="width: 100px"
-                     v-on:click.native="modal = false">Thanks!
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-      </div>
-      <choice-window :entry="choiceTitle"></choice-window>
-    </v-container>
-  </div>
+<template lang="pug" xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
+  div(style='min-height: 95vh')
+    loader(v-if='!season[1].items')
+    v-container(fluid, v-else, style='padding: 20px 0 0')
+      v-layout.form-container(row, wrap, justify-center)
+        v-flex.season-container(sm3, xs8)
+          v-select(
+            v-bind:items='seasonChoices',
+            v-model='$store.state.season',
+            label='Season',
+            dark, item-text='name',
+            item-value='value'
+          )
+        v-flex.year-container(offset-sm1, sm3, xs8)
+          v-text-field(name='input-year', type='number', min='2010', label='Year', v-model='$store.state.year', dark)
+        v-flex.refresh-button(offset-sm1, sm2, xs8)
+          v-btn(secondary, block, dark, @click='refreshSeason()') Refresh
+      v-tabs#tabs(dark, fixed, centered)
+        v-tabs-bar.mablue(slot='activators')
+          v-tabs-slider.primary
+          v-tabs-item(v-for='i in 3', :href="'#' + i", :key='i')
+            | {{ season[i].name }}
+        v-tabs-content(v-for='i in 3', lazy, v-bind:id='`${i}`', :key='i')
+          v-text-field.query(v-model='query', label='Search entry', dark)
+          v-layout.elems(row, wrap)
+            transition-group(name='list')
+              v-flex(
+                md6, xs12,
+                v-for='item in computedSeason[i].items',
+                style='display: inline-block',
+                :key='item.key'
+              )
+                v-layout.elem.elevation-3(row, wrap, v-ripple='true')
+                  // Header of elem
+                  v-flex(xs12, v-tooltip:bottom='{ html: item.title }')
+                    h6.title.ellipsis.white--text
+                      | {{ item.title }}
+                  v-flex(xs8, v-tooltip:bottom="{ html: item.genres.join(' ') }")
+                    p.genres.ellipsis {{ item.genres.join(' ') }}
+                  v-flex(xs3, v-tooltip:bottom='{ html: item.fromType }')
+                    p.from-type.ellipsis
+                      | {{ item.fromType }}
+                  v-flex(xs1)
+                  // Picture of elem
+                  v-flex.image-container(xs4)
+                    lazy-component
+                      img.image(:src='item.picture', onerror="this.src='static/images/error.jpg'")
+                  v-flex.bottom-right(xs8)
+                    v-layout(wrap, justify-space-between, align-center)
+                      v-flex(xs12)
+                        .synopsis {{ reduced(item.synopsis) }}
+                      v-flex(xs12)
+                        v-layout(wrap, justify-space-between)
+                          v-flex.date(xs3) {{ getDate(item.releaseDate) }}
+                          v-flex.nb-ep(xs4) {{ item.nbEp }} {{ episode(item.npEp) }}
+                        v-layout(wrap, justify-space-between)
+                          v-flex.producers(xs8)
+                            strong {{ item.producers.join(' ') }}
+                          v-flex.dropdown-container(xs4)
+                            v-menu(open-on-hover, transition='slide-x-transition')
+                              v-btn(flat, dark, slot='activator') More
+                              v-list.dark
+                                v-list-tile(@click='openModal(item.title, item.synopsis)')
+                                  v-list-tile-action
+                                    v-icon more
+                                  v-list-tile-title Check synopsis
+                                v-list-tile(@click="$store.dispatch('searchInfoFromName', item.title)")
+                                  v-list-tile-action
+                                    v-icon info_outline
+                                  v-list-tile-title Information
+                                v-list-tile(@click='showChoices(item.title)')
+                                  v-list-tile-action
+                                    v-icon add_box
+                                  v-list-tile-title Add to
+      .text-xs-center.modal-container
+        v-dialog(v-model='modal', width='70%')
+          v-card.secondary.white--text
+            v-card-text.white--text
+              h2.headline.white--text {{ modalTitle }}
+            v-card-text.text.white--text
+              | {{ modalText }}
+            v-card-actions
+              v-spacer
+              v-btn.blue--text.darken-1(flat, style='width: 100px', v-on:click.native='modal = false')
+                | Thanks!
+      choice-window(:entry='choiceTitle')
 </template>
 
 <script>
diff --git a/pages/watchList.vue b/pages/watchList.vue
index ea694fc..c2b35aa 100644
--- a/pages/watchList.vue
+++ b/pages/watchList.vue
@@ -1,91 +1,62 @@
-<template>
-  <v-container fluid id="watch-list" class="pa-0">
-    <v-tabs id="tabs" grow icons>
-      <v-tabs-bar slot="activators" class="mablue">
-        <v-tabs-slider class="primary"></v-tabs-slider>
-        <template v-for="i in 5">
-          <v-tabs-item :href="'#tabs-' + i">
-            {{ actionsList[i - 1].name }}
-            <v-icon>{{ actionsList[i - 1].icon }}</v-icon>
-          </v-tabs-item>
-        </template>
-      </v-tabs-bar>
-      <v-tabs-content v-for="i in 5" :key="i"
-                      lazy
-                      v-bind:id="'tabs-' + i">
-        <v-card style="background-color: #303030">
-          <v-card-text>
-            <v-layout row wrap class="list-container">
-              <v-flex xs12>
-                <v-layout row wrap align-center justify-center class="top-form">
-                  <v-flex md3 sm4 xs9>
-                    <v-btn icon flat
-                           @click="selectAll(i)"
-                           v-tooltip:bottom="{ html: allSelected[i] ? 'Unselect all' : 'Select all' }">
-                      <v-icon>select_all</v-icon>
-                    </v-btn>
-                    <!-- Add open-on-hover when vuetify repaired it -->
-                    <v-menu transition="slide-x-transition">
-                      <v-btn secondary slot="activator">Move to</v-btn>
-                      <v-list class="dark">
-                        <v-list-tile @click.capture="moveTo(action.list, i)"
-                                     v-for="action in actions(i)"
-                                     :key="action.name">
-                          <v-list-tile-action>
-                            <v-icon>{{ action.icon }}</v-icon>
-                          </v-list-tile-action>
-                          <v-list-tile-title>{{ action.name }}</v-list-tile-title>
-                        </v-list-tile>
-                      </v-list>
-                    </v-menu>
-                    <v-btn @click="deleteSelected(i)"
-                           class="red--text"
-                           v-tooltip:bottom="{ html: 'Delete all selected items from this list' }"
-                           icon>
-                      <v-icon>delete_sweep</v-icon>
-                    </v-btn>
-                  </v-flex>
-                  <v-flex md2 sm2 xs3>
-                    <p class="elem-number">
-                      {{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
-                    </p>
-                  </v-flex>
-                  <v-flex md3 sm1 hidden-xs-only></v-flex>
-                  <v-flex md2 sm3 xs4 @keyup.enter="addEntry(i)">
-                    <v-text-field type="text"
-                                  class="entry-text"
-                                  label="Add entry"
-                                  v-model="entries[i]"
-                                  dark>
-                    </v-text-field>
-                  </v-flex>
-                  <v-flex hidden-sm-and-up xs1></v-flex>
-                  <v-flex md2 sm2 xs4 class="add-button-container">
-                    <v-btn dark secondary
-                           @click="addEntry(i)"
-                           class="add-button">
-                      Add
-                    </v-btn>
-                  </v-flex>
-                </v-layout>
-              </v-flex>
-              <transition-group name="list">
-                <template v-for="item in lists[i - 1]">
-                  <list-entry
-                      :item="item"
-                      :deleteEntry="deleteEntry"
-                      :key="item"
-                      :index="i"
-                      :select="select"
-                      :selected="selected"></list-entry>
-                </template>
-              </transition-group>
-            </v-layout>
-          </v-card-text>
-        </v-card>
-      </v-tabs-content>
-    </v-tabs>
-  </v-container>
+<template lang="pug">
+  v-container#watch-list.pa-0(fluid)
+    v-tabs#tabs(grow, icons)
+      v-tabs-bar.mablue(slot='activators')
+        v-tabs-slider.primary
+        template(v-for='i in 5')
+          v-tabs-item(:href="'#tabs-' + i")
+            | {{ actionsList[i - 1].name }}
+            v-icon {{ actionsList[i - 1].icon }}
+      v-tabs-content(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
+        v-card(style='background-color: #303030')
+          v-card-text
+            v-layout.list-container(row, wrap)
+              v-flex(xs12)
+                v-layout.top-form(row, wrap, align-center, justify-center)
+                  v-flex(md3, sm4, xs9)
+                    v-btn(
+                      icon, flat,
+                      @click='selectAll(i)',
+                      v-tooltip:bottom="{ html: allSelected[i] ? 'Unselect all' : 'Select all' }"
+                    )
+                      v-icon select_all
+                    v-menu(open-on-hover, transition='slide-x-transition')
+                      v-btn(secondary, slot='activator') Move to
+                      v-list.dark
+                        v-list-tile(
+                          @click.capture='moveTo(action.list, i)',
+                          v-for='action in actions(i)',
+                          :key='action.name'
+                        )
+                          v-list-tile-action
+                            v-icon {{ action.icon }}
+                          v-list-tile-title {{ action.name }}
+                    v-btn.red--text(
+                      @click='deleteSelected(i)',
+                      v-tooltip:bottom="{ html: 'Delete all selected items from this list' }",
+                      icon
+                    )
+                      v-icon delete_sweep
+                  v-flex(md2, sm2, xs3)
+                    p.elem-number
+                      | {{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
+                  v-flex(md3, sm1, hidden-xs-only)
+                  v-flex(md2, sm3, xs4, @keyup.enter='addEntry(i)')
+                    v-text-field.entry-text(type='text', label='Add entry', v-model='entries[i]', dark)
+                  v-flex(hidden-sm-and-up, xs1)
+                  v-flex.add-button-container(md2, sm2, xs4)
+                    v-btn.add-button(dark, secondary, @click='addEntry(i)')
+                      | Add
+              transition-group(name='list')
+                template(v-for='item in lists[i - 1]')
+                  list-entry(
+                    :item='item',
+                    :deleteentry='deleteEntry',
+                    :key='item',
+                    :index='i',
+                    :select='select',
+                    :selected='selected'
+                  )
 </template>
 
 <script>