<template>
  <v-app>
    <!--<v-navigation-drawer app></v-navigation-drawer>-->
    <v-toolbar app>
      <v-toolbar-title>
        <span v-if="!hasUser"><span @click="() => { doLogin(); }">Login</span></span>
        <v-menu v-if="hasUser" offset-y>
          <v-btn flat slot="activator" color="primary">
            <v-avatar size="24"><v-img :src="user.picture" /></v-avatar>&nbsp;{{ user.name }}
          </v-btn>
          <v-list>
            <v-list-tile>
              <v-list-tile-title flat><nuxt-link to="/logout/">Logga ut</nuxt-link></v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-content>
      <v-container fluid>
        <nuxt />
      </v-container>
    </v-content>
    <v-footer app></v-footer>
  </v-app>
</template>

<style lang="scss">
// We need this line to import all global styling
@import "assets/scss/global.scss";
</style>

<style lang="scss" scoped>
.layout {
  background-color: white;

  .log-out {
    cursor: pointer;
  }
}
</style>

<script>
import auth from "~/utils/auth";

export default {
  data() {
    return {
      user: undefined
    };
  },
  computed: {
    hasUser() {
      return this.user;
    }
  },
  watch: {
    "$route.path"() {
      this.fetchUser();
    }
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      this.user = auth.getUserInfo();
    },
    doLogin() {
      auth.triggerLogin({ returnUrl: this.$route.fullPath });
    }
  }
};
</script>
