<i18n>
{
  "en": {
  },
  "de": {
  }
}
</i18n>

<template>
  <v-app class="grey darken-4 non-selectable">

    <div class="setting-buttons">
      <v-btn class="ma-2" icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })">
        <v-icon>invert_colors</v-icon>
      </v-btn>
    </div>

    <div dark class="start-page">
      <img v-if="settings.dark" class="logo" src="@/assets/logo.svg"/>
      <img v-else class="logo" src="@/assets/logo-light.svg"/>
      <router-view></router-view>
    </div>
    <notifications-snackbars></notifications-snackbars>
  </v-app>
</template>

<script>
import { mapState } from 'vuex'
import NotificationsSnackbars from '@/components/NotificationsSnackbars'
import StartPageLogin from '@/components/StartPageLogin'
import StartPageSetup from '@/components/StartPageSetup'

export default {
  name: 'StartPage',
  routes () {
    return [
      { name: 'login', path: 'login', component: StartPageLogin },
      { name: 'setup', path: 'setup', component: StartPageSetup }
    ]
  },
  components: {
    NotificationsSnackbars
  },
  computed: {
    ...mapState(['settings', 'user']),
    dark () { return this.settings.dark }
  },
  watch: {
    dark (value) {
      this.$vuetify.theme.dark = value
    }
  }
}
</script>

<style scoped>
.setting-buttons {
  position: absolute;
  top: 0;
  right: 0;
}

.start-page {
  height: 100%;
  width: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 180px;
  margin-bottom: 60px;
}
</style>
