<template>
  <v-row no-gutters>
    <v-col cols="12" md="4" sm="12" class="mx-auto">
      <v-container class="fill-height d-flex flex-column justify-space-between" fluid>
        <div>
          <app-logo class="app-logo d-flex mr-10" theme="light" width="180" />
        </div>
        <auth :mode="mode" />
        <span class="tertiary--text overline">
          <Copyright />
        </span>
      </v-container>
    </v-col>

    <v-col cols="12" md="8" class="d-none d-lg-flex">
      <v-img
        :src="welcomeImgSrc"        
        height="100vh"
       
      >
        <div class="d-flex flex-column justify-end pa-4 fill-height">
          <span class="display-3 white--text font-italic ml-7">
            Samen leren
            <br>in de ggz
          </span>
        </div>
      </v-img>
    </v-col>
    <global-snackbar />
  </v-row>
</template>

<script>
import AppLogo from '~/components/Logo'
import Auth from '~/components/Auth/Auth'
import Copyright from '@/components/Admin/ggz/Footer/Copyright'
import globalSnackbar from '~/components/UI/GlobalSnackbar/GlobalSnackbar'

export default {
  auth: 'guest',
  layout: 'empty',
  components: {
    AppLogo,
    Auth,
    Copyright,
    globalSnackbar,
  },
  mounted() {
    this.$vuetify.theme.dark = false
  },
  computed: {
    slug() {
      return this.$route.params.auth
    },
    mode() {
      const modes = ['login', 'password-forgotten', 'password-reset']
      if (!modes.includes(this.slug)) return 'login'
      return this.slug
    },
    welcomeImgSrc(){
      const customerLowercase = process.env.CUSTOMER.toLowerCase()
      return require(`@/assets/img/${customerLowercase}/welcome.jpg`)
    }
  },
}
</script>

<style scoped>
div{
  min-width: 400px;
}
.app-logo {
  margin-top: 20px;
  margin-left: 16px;
}
.v-image >>>.v-image__image{
  background-position: 44% 16% !important; 
  background-size: 220% !important;
}

</style>