<template>
  <v-menu offset-y>
    <template v-slot:activator="{ on }">
      <v-avatar size="24" v-on="on" tile class="mx-2">
        <img
          :src="require(`@/assets/img/flags/svg/${currentLocale.flag}`)"
          :alt="currentLocale.name"
        />
      </v-avatar>
    </template>

    <v-list>
      <v-list-item
        v-for="locale in availableLocales"
        :key="locale.code"
        nuxt
        :to="switchLocalePath(locale.code)"
        exact
      >
        <v-list-item-avatar tile>
          <img :src="require(`@/assets/img/flags/svg/${locale.flag}`)" />
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title v-text="locale.name"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  computed: {
    currentLocale() {
      return this.$i18n.locales.filter((i) => i.code === this.$i18n.locale)[0]
    },
    availableLocales() {
      return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
    },
  },
}
</script>
