<template>
  <div id="menu">
    <div class="container">
      <div class="pure-menu pure-menu-horizontal">
        <ul class="pure-menu-list">
          <li class="pure-menu-item logout">
            <a class="pure-menu-link" href="#" @click.prevent="logout">{{ $t('admin.logout') }}</a>
          </li>

          <menu-link route="/admin/uploads" :title="$t('admin.menu.uploads')"></menu-link>
          <menu-link route="/admin/codes" :title="$t('admin.menu.codes')"></menu-link>
          <menu-link route="/admin/users" :title="$t('admin.menu.users')" v-if="hasAuth('manageUsers')"></menu-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import shared from '../../shared';

var menuLink =  {
  props: ['route', 'title'],
  template: '<router-link tag="li" :to="route" class="pure-menu-item" active-class="pure-menu-selected">' +
            '<a class="pure-menu-link">{{ title }}</a>' +
            '</router-link>'
};


export default {
  data()
  {
    return {
    };
  },

  components: {
    'menu-link': menuLink
  },

  methods: {
    hasAuth(token)
    {
      return shared.user !== null && shared.user.auth.indexOf(token) > -1;
    },


    logout()
    {
      var self = this;
      shared.adminToken = null;
    }
  }
}
</script>

<style lang="scss">
@import '~purecss/build/menus.css';


#menu
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  background-color: black;

  .pure-menu-horizontal .pure-menu-list
  {
    width: 100%;
  }

  .pure-menu-link
  {
    color: white;

    &:hover
    {
      background-color: #323232;
    }
  }

  .pure-menu-selected
  {
    .pure-menu-link, .pure-menu-link:hover
    {
      background-color: #228dd4;
    }
  }

  .logout
  {
    float: right;
  }
}
</style>