<!--
Switch user

Barre qui s'affiche lorsque l'utilisateur possède un compte multi user
-->

<template>
  <!-- TODO : fonctionnement à valider -->
  <UiSystemBar v-if="show" color="ot-info">
    <template #bar.text>
      <v-icon small icon="fas fa-info-circle" />
      <span v-html="$t('multi_account_alert', { fullname })" />
      <v-icon class="ml-1" small icon="fa fa-users" />
      {{$t('multi_account_alert_next')}}
    </template>
  </UiSystemBar>
</template>

<script setup lang="ts">
  import {useAccessProfileStore} from "~/stores/accessProfile";
  import {useMenu} from "~/composables/layout/useMenu";

  const accessProfile = useAccessProfileStore()
  const { hasMenu } = useMenu()

  const show = hasMenu('Family')
  const fullname = `${accessProfile.givenName} ${accessProfile.name}`
</script>

<style scoped lang="scss">
.v-system-bar {
  font-size: 14px;
}

.v-icon {
  height: 20px;
  margin: 0 6px;
}
</style>
