<template>
  <div class="d-flex align-items-center mb-2">
    <button class="navbar-toggler text-white d-md-none" @click="toggleMenu">
      <Icon icon="list" />
    </button>

    <div class="ml-auto" />

    <SearchForm />

    <template v-if="username">
      <b-dropdown variant="link" right no-caret>
        <template #button-content>
          <b-avatar variant="secondary">
            <Icon icon="person-fill" />
          </b-avatar>
        </template>
        <b-dropdown-text>
          {{ server }}
        </b-dropdown-text>
        <b-dropdown-text>
          {{ username }}
        </b-dropdown-text>
        <b-dropdown-divider />
        <b-dropdown-item-button @click="logout">
          Log out
        </b-dropdown-item-button>
      </b-dropdown>
    </template>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import { mapMutations, mapState } from 'vuex'
  import SearchForm from '@/search/SearchForm.vue'

  export default Vue.extend({
    components: {
      SearchForm,
    },
    computed: {
      ...mapState([
        'server',
        'username',
      ]),
    },
    methods: {
      ...mapMutations([
        'toggleMenu',
      ]),
      logout() {
        this.$auth.logout()
        this.$router.go(0)
      }
    }
  })
</script>
