<template>
  <div class="mt-4">
    <v-chip
      class="mr-4 mb-2 txt--text font-weight-bold px-6"
      color="primary"
      v-for="filter in filters"
      :key="filter.title"
      @click.stop="
        $store.commit('navigation/SWITCH_RIGHT_DRAWER', {
          component: 'FiltersMenu',
          subMenu: filter.title,
        })
      "
    >
      {{ $t(`learning.filters.${filter.title}`) | capitalize }}
    </v-chip>
    <v-chip
      class="mr-4 mb-2 txt--text font-weight-bold px-6"
      color="primary"
      @click.stop="
        $store.commit('navigation/SWITCH_RIGHT_DRAWER', {
          component: 'Settings',
          subMenu: 'filters',
        })
      "
    >
      {{ $t('learning.filters.more') }}
    </v-chip>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch('learning/setFilters')
  },
  computed: {
    filters() {
      return this.$store.state.learning.filters.slice(0, 5)
    },
  },
}
</script>