<template>
  <v-expansion-panels flat accordion tile v-model="panel">
    <v-expansion-panel v-for="filter in filtersSearchable" :key="filter.title">
      <v-expansion-panel-header>{{
        $t(`learning.filters.${filter.title}`) | capitalize
      }}</v-expansion-panel-header>
      <v-expansion-panel-content>
        <universalFilterSelector
          :filterTitle="filter.title"
          :editMode="true"
          filterType="menu"
        />
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script>
import universalFilterSelector from '@/components/UniversalFilterSelector/UniversalFilterSelector'

export default {
  components: {
    universalFilterSelector,
  },
  computed: {
    filtersSearchable() {
      return this.$store.getters.filtersSearchable
    },
    subMenu() {
      return this.$store.getters.rightDrawer.subMenu
    },
    panel: {
      get() {
        return this.filtersSearchable.findIndex(
          (filter) => filter.title === this.subMenu
        )
      },
      set(v) {},
    },
  },
}
</script>

<style scoped>
.v-item-group >>> .v-list-item--active.secondary {
  background-color: var(--v-primary-base) !important;
}
</style>