<template>
  <section>
    <nav class="level is-mobile">
      <div class="level-item">

        <b-dropdown v-if="user"
                    aria-role="list">
          <button class="button is-primary"
                  :class="{'is-danger': user.is_root}"
                  slot="trigger">
            <span>{{ user.short_name }}</span>
            <!-- <b-icon icon="menu-down"></b-icon> -->
          </button>

          <b-dropdown-item aria-role="listitem" has-link>
            <router-link to="/">Home</router-link>
          </b-dropdown-item>

          <slot></slot>

          <b-dropdown-item aria-role="listitem" has-link>
            <router-link to="/logout">Logout</router-link>
          </b-dropdown-item>

          <b-dropdown-item aria-role="listitem" has-link>
            <router-link to="/about">About</router-link>
          </b-dropdown-item>

        </b-dropdown>

        <b-button v-if="!user"
                  type="is-primary"
                  tag="router-link" to="/login">
          Login
        </b-button>
      </div>

      <div class="level-item">
        {{ title }}
      </div>

      <div class="level-item">
        <byjove-feedback :url="feedbackUrl"></byjove-feedback>
      </div>
    </nav>

  </section>
</template>

<script>
import ByjoveFeedback from '../feedback'
export default {
    name: 'ByjoveMenu',
    props: {
        appsettings: Object,
        feedbackUrl: {
            type: String,
            default: '/api/feedback',
        },
    },
    components: {
        ByjoveFeedback,
    },
    computed: {
        title: function() {
            if (this.appsettings.production) {
                return this.appsettings.systemTitle
            } else {
                return "[STAGE] " + this.appsettings.systemTitle
            }
        },
        user: function() {
            return this.$store.state.user
        }
    },
}
</script>
