<template>
  <div v-if="$auth.check()">

    <div v-if="!loaded">
      Loading...
    </div>

    <div v-if="loaded">
      <router-view/>
    </div>

  </div>
  <div v-else>
    <v-container>
      <p class="text-h5">403 Forbidden</p>
    </v-container>
  </div>
</template>

<script>
export default {
  name: "site-index",
  data: function () {
    return {
      loaded: false,
    }
  },
  mounted() {
    this.$auth.load().then(() => {
        if (this.$auth.check()) {
          // console.log('Index.vue/a')
          // If user is authenticated update store
          this.$store.dispatch('site/setTeam', this.$auth.user())
          this.loaded = true
        } else {
          // console.log('Index.vue/b')
          this.loaded = false
        }
      });

    this.$auth.load().then(() => {
      this.$store.dispatch('site/fetchPrototyping')
    })
  }
}
</script>

<style scoped>

</style>