<style lang="scss" src="./assets/style.scss"></style>

<template>
  <div>
    <b-navbar>
      <template #brand>

        <b-dropdown
              append-to-body
              aria-role="menu"
              trap-focus>
              <template #trigger>
                  <a class="navbar-item" role="button">
                      <b-icon icon="earth" />
                      <span class="pl-2"> {{language}}</span>
                      <b-icon icon="menu-down" />
                  </a>
              </template>

              <b-dropdown-item aria-role="listitem" @click="changeLocale('pt')">Português</b-dropdown-item>
              <b-dropdown-item aria-role="listitem" @click="changeLocale('es')">Español</b-dropdown-item>
              <b-dropdown-item aria-role="listitem" @click="changeLocale('en_US')">English</b-dropdown-item>
          </b-dropdown>

      </template>
      <template #end>
        <b-navbar-item @click="logout">
          <b-icon icon="location-exit" size="is-small" /> <span class="pl-1">{{ $t('menu.logout') }}</span>
        </b-navbar-item>
      </template>
    </b-navbar>

    <div class="is-flex is-justify-content-center" style="margin-top:-15px">
      <div>
        <p class="image is-96x96 m-auto" style="z-index: 40">
          <v-gravatar class="is-rounded" :email="user.email" :size="96" default-img="mm" />
        </p>
        <div class="has-text-centered mt-5">
          <h1 class="title">{{ user.name }}</h1>
          <h5 class="subtitle is-6">{{ user.email }}</h5>
        </div>
      </div>
    </div>

    <div class="mx-auto mt-5 p-3" style="max-width:500px">

      <!-- Alert Area: TODO create a notification funcionalities -->
      <b-notification type="is-warning">{{$t('hello')}}</b-notification>

      <!-- All Applications Available -->
      <app-list class="has-background-white"/>
    </div>

    <div class="has-text-centered">
      <small>{{$APP.version}}</small>
    </div>
  </div>
</template>

<script>
import AppList from './components/AppList.vue'
export default {
  name: "App",
  components: {AppList},
  methods: {
    logout() {
      this.$keycloak.logout({ redirectUri: window.location.href });
    },
    changeLocale(locale) {
      localStorage.language = locale
      window.location.reload()
    }
  },
  computed: {
    language() {
      return localStorage.language || navigator.language.replace('-','_')
    }
  }
};
</script>