<template>
  <ul class="nav nav-tabs">
    <li role="presentation" v-bind:class="{ active: $route.name === 'home' }">
      <router-link to="/">
        Home
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'about' }">
      <router-link to="/about">
        About
      </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensates' }">-->
      <!--<router-link to="/condensates">-->
        <!--Condensates-->
      <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'browse' }">-->
      <!--<router-link to="/browse">-->
        <!--Browse-->
      <!--</router-link>-->
    <!--</li>-->
    <li role="presentation" v-bind:class="{ active: $route.name === 'biomolecular' }">
      <router-link to="/biomolecular">
        Biomolecular Condensates
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'synthetic' }">
      <router-link to="/synthetic">
        Synthetic Condensates
      </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensate_example' }">-->
    <!--<router-link to="/condensate_example">-->
      <!--Condensate Example-->
    <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'protein_example' }">-->
      <!--<router-link to="/protein_example">-->
        <!--Protein Example-->
      <!--</router-link>-->
    <!--</li>-->
    <li role="presentation" v-bind:class="{ active: $route.name === 'statistics' }">
      <router-link to="/statistics">
        Statistics
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'encyclopedia' }">
      <router-link to="/encyclopedia">
        Encyclopedia
      </router-link>
    </li>
    <li v-show="userData !== undefined" role="presentation" v-bind:class="{ active: $route.name === 'profile' }">
      <router-link to="/profile">
        Profile
      </router-link>
    </li>
    <li v-show="userData !== undefined" role="presentation">
      <router-link to="/login" v-on:click.native="signOut">
        <span class="fa fa-sign-out"/>
      </router-link>
    </li>
    <li v-show="userData === undefined" role="presentation" v-bind:class="{ active: $route.name === 'login' }">
      <router-link to="/login">
        Login
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Links",
  data() {
    return {
      userData: undefined
    }
  },
  methods: {
    signOut() {
      const vm = this
      window.localStorage.removeItem('jwt');
      window.localStorage.removeItem('userData');
      vm.userData = undefined
    }
  },
  mounted: function () {
    const vm = this
    vm.userData = window.localStorage.getItem('userData')
    if(vm.userData === null) {
      vm.userData = undefined
    }

    // console.log(vm.userData)
    // console.log(this.$route.name)
  }
}
</script>