<template lang="pug">
div.theheader(v-shortcuts="[{ shortcut: [ 'n', ], callback: setNotificationsVisible, push: true, focus: true },]")
  vm-navbar(class="nabar" type="flat")
    router-link(to='/')
    vm-spacer
    vm-navbar-item(index="0")
      vm-button(ref="button" type="default" icon="bell-outline" size="small" :indicator="!emptyNotifications" color="primary" @click="setNotificationsVisible")
    vm-navbar-item(index="1")
      vm-dropdown
        vm-avatar(:text="$auth.user().name" color="primary" :src="$auth.user().avatar")

        vm-dropdown-menu
          vm-dropdown-item
            .user
              .col1
                vm-avatar(:text="$auth.user().name" color="primary" :src="$auth.user().avatar")
              .col2
                .name \{{ $auth.user().name }}
                .email \{{ $auth.user().email }}
          vm-dropdown-item(@click="setModalFeedbackVisible(true)" divider) \{{ $t('strings.feedback') }}
          vm-dropdown-item(@click="logout" divider) \{{ $t('login.logout') }}
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'TheHeader',
  computed: {
    ...mapGetters(['notifications']),
    emptyNotifications () {
      return this.notifications.length === 0
    }
  },
  methods: {
    ...mapActions(['setModalFeedbackVisible', 'setNotificationsVisible']),
    logout () {
      this.$auth.logout({
        makeRequest: true,
        redirect: { name: 'login' }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.theheader {
  position: fixed;
  width: calc(100% - 65px);
  margin-left: 65px;
  background: white;
  z-index: 10000;
  border-top-left-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  .nabar {
    padding: 0.4rem 1rem;
    .logo-header {
      margin-left: 25px;
    }
    .vm-navbar--item {
      padding: 0 10px;
      display: flex;
      .con-vm-avatar {
        cursor: pointer;
        pointer-events: inherit;
        margin: 0;
      }
    }
  }
}
.heading {
  min-width: 180px;
  padding: 2px 12px;
  h4 {
    padding-top: 3px;
  }
}
.nonotifications {
  text-align: center;
}
.con-vm-avatar {
  border-radius: 5px !important;
  top: 4px;
  .con-img {
    border-radius: 5px !important;
  }
}
.user {
  display: flex;
  flex-direction: row;
  line-height: normal;
  align-items: center;
  .col1 {
    margin-right: 5px;
  }
  .name {
    color: rgb(39, 44, 55);
  }
  .email {
    font-size: 11px;
    color: rgb(142, 155, 178);
  }
}
</style>
