<template>
  <b-navbar>
    <template slot="brand">
      <b-navbar-item tag="router-link" :to="{ path: '/' }">
        <trpl-title>{name}}</trpl-title>
      </b-navbar-item>
    </template>
    <template slot="start">
      <b-navbar-item><trpl-para><router-link
        to='/forums'
      >
        Forum
      </router-link></trpl-para></b-navbar-item>
      <b-navbar-item><trpl-para><router-link
        to='/users'
      >
        Users
      </router-link></trpl-para></b-navbar-item>
      <b-navbar-item><trpl-para><router-link
        to='/marketplace'
      >
        Marketplace
      </router-link></trpl-para></b-navbar-item>
      <b-navbar-item><trpl-para>sssss
        Games
      </router-link></trpl-para></b-navbar-item>
      <div class="navbar-item has-dropdown is-hoverable is-info">
        <a class="navbar-link">
          <trpl-para>More</trpl-para>
        </a>
        <div class="navbar-dropdown is-boxed">
          <router-link class="navbar-item" to='/blog'>Blog</router-link>
          <a class="navbar-item" href="https://twitter.com/Kaverti">
            Twitter
          </a>
          <a class="navbar-item" href="https://discord.gg/undefined">
            Discord
          </a>
          <router-link class="navbar-item" to='/developers'>Developers</router-link>
          <router-link class="navbar-item is-active" to='/premium'>Upgrade</router-link>
        </div>
      </div>
    </template>
    <template slot="end">
      <template v-if='$store.state.username'>
        <div>
          <NotificationButton></NotificationButton>
          <div class="navbar-item has-dropdown is-hoverable is-info">
            <a class="navbar-link">
              <trpl-para>{{this.$store.state.username}}</trpl-para>
            </a>
            <div class="navbar-dropdown is-boxed">
              <router-link class="navbar-item" :to='"/user/" + this.$store.state.username'>My Profile</router-link>
              <router-link class="navbar-item" to='/settings'>Settings</router-link>
              <router-link to='/admin' class="navbar-item" v-if='$store.state.admin'>Admin Panel</router-link>
              <router-link class="navbar-item is-active" to='/premium'>Upgrade</router-link>
              <a class="navbar-item" @click='logout'>
                Log out
              </a>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <b-button class="is-info" @click='showAccountModalTab(0)' v-if='!$store.state.meta.RegistrationsDisabled'>
          Register
        </b-button>
        <b-button @click='showAccountModalTab(1)'>
          Login
        </b-button>
      </template>
      <span class='header__menu_button' @click='toggleMenu'>
				<font-awesome-icon :icon='["fa", "bars"]' />
			</span>
    </template>
  </b-navbar>
</template>
