<template>
  <div id="app">
    <template v-if="user.authenticated">
      <div class="ui secondary menu">
        <router-link to="/home" class="item">Home</router-link>
        <router-link to="/books" class="item">Books</router-link>
        <router-link to="/authors" class="item">Authors</router-link>
        <router-link to="/publishers" class="item">Publishers</router-link>
        <div class="right menu">
          <img v-bind:src="gravatar" class="menu-avatar"/>
          <a class="ui item" @click="logout()">
            Logout
          </a>
        </div>
      </div>
    <div class="ui divider"></div>
    </template>
    <router-view/>
  </div>
</template>

<script>
import auth from './auth'
import router from './router'

export default {
  name: 'app',
  data () {
    return {
      user: auth.user,
      gravatar: ''
    }
  },
  created () {
    // Redirect the user to the login page if he's not logged in
    if (!this.user.authenticated) {
      this.logout()
      router.push({ name: 'login' })
    }

    let user = auth.getUserInfos()
    this.gravatar = 'https://www.gravatar.com/avatar/' + user.avatar + '?s=40'
  },
  methods: {
    logout () {
      auth.logout()
    }
  }
}
</script>

<style>
  *, *:hover, *:active, *:focus{
    outline: none;
  }

  #app{
    margin: 2em 1em;
  }

  .menu-avatar{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
</style>
