<!--
Switch year bar : Barre qui s'affiche lorsque l'utilisateur possède un compte multi user
-->

<template>
  <UiSystemBar color="ot_info" v-if="show">
    <template #bar.text>
      <v-icon small>fas fa-exclamation-triangle</v-icon>
      <span v-html="$t('multi_account_alert', { fullname })"></span>
       <v-icon class="ml-1" small>fa fa-users</v-icon>
      {{$t('multi_account_alert_next')}}
    </template>
  </UiSystemBar>
</template>

<script lang="ts">
import { defineComponent, useStore} from '@nuxtjs/composition-api'
import {accessState, AnyStore} from "~/types/interfaces";
import {State} from "@vuex-orm/core";

export default defineComponent({
  setup () {
    const store:AnyStore = useStore<State>()
    const profileAccess:accessState = store.state.profile.access

    return {
      show: profileAccess.hasFamilyMenu,
      fullname: `${profileAccess.givenName} ${profileAccess.name}`
    }
  }
})
</script>

<style scoped>

</style>
