<template>
  <div id="app">
    <template v-if="user.authenticated">
      <div class="menu-wrapper">
        <div class="ui secondary menu">
          <router-link to="/" class="item" v-lang.nav.home></router-link>
          <router-link to="/books" class="item" v-lang.nav.books></router-link>
          <router-link to="/authors" class="item" v-lang.nav.authors></router-link>
          <router-link to="/publishers" class="item" v-lang.nav.publishers></router-link>
          <router-link to="/items" class="item" v-lang.nav.items></router-link>
          <div class="right menu">
            <img v-bind:src="gravatar" class="menu-avatar"/>
            <div class="ui item"> {{ user.infos.username }}</div>
            <a class="ui item" @click="logout()">
              <icon name="sign-out"></icon>
            </a>
          </div>
        </div>
        <div class="ui divider"></div>
      </div>
    </template>
    <div class="content">
      <router-view/>
    </div>

    <div class="lang-switcher">
      <a @click="language = 'en'"><i class="gb flag"></i></a>
      <a @click="language = 'de'"><i class="de flag"></i></a>
      <a @click="language = 'fr'"><i class="fr flag"></i></a>
    </div>
    <notifications position="bottom left" />
  </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' })
    }

    // Set the users avatar
    this.setAvatar()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'setAvatar'
  },
  methods: {
    logout () {
      auth.logout()
    },
    setAvatar () {
      auth.getUserInfos()
      this.gravatar = 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=40&d=mm'
    }
  }
}
</script>

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

  #app{
    margin: 0 1em;
    padding-top: 1.5em;
  }

  .menu-avatar{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }

  a, a:hover, a:focus, a:active{
    cursor: pointer;
  }

  .lang-switcher{
    float: right;
  }

  .grey{
    color: #ccc;
  }

  .ui.secondary.menu .router-link-exact-active{
    box-shadow: none;
    background: rgba(0,0,0,.05);
    color: rgba(0,0,0,.95);
    border-radius: .28571429rem;
    align-self: center;
    border: none;
    padding: .78571429em .92857143em;
    margin: 0 .35714286em;
    -webkit-transition: color .1s ease;
    transition: color .1s ease;
    font-weight: 400;
  }

  .menu-wrapper {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: 1em;
  }

  .content {
    padding-top: 70px;
  }

  /* spinner */
  .fullscreen-loader-wrapper {
    position: fixed;
    background: rgba(250,250,250,0.8);
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .half-circle-spinner, .half-circle-spinner * {
    box-sizing: border-box;
  }

  .half-circle-spinner {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: relative;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
  }

  .half-circle-spinner .circle {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: calc(60px / 10) solid transparent;
  }

  .half-circle-spinner .circle.circle-1 {
    border-top-color: #4CAF50;
    animation: half-circle-spinner-animation 1s infinite;
  }

  .half-circle-spinner .circle.circle-2 {
    border-bottom-color: #4CAF50;
    animation: half-circle-spinner-animation 1s infinite alternate;
  }

  @keyframes half-circle-spinner-animation {
    0% {
      transform: rotate(0deg);

    }
    100%{
      transform: rotate(360deg);
    }
  }
</style>
