<template>
  <div>
    <page-header class="d-flex justify-space-between">
      <span>
        {{ $t('learning.filters.title') }}
      </span>

      <!-- <v-btn
        depressed
        :to="localePath('/manager/learning/filters/new')"
        color="accent"
        rounded
      >
        <v-icon left>mdi-plus</v-icon>
        <small>{{ $t('general.add') }}</small>
      </v-btn> -->
    </page-header>

    <v-data-table
      :headers="headers"
      :items="filters"
      :items-per-page="100"
      hide-default-footer
      class="pa-4 secondary"
    >
      <!-- @click:row="handleClick" -->
      <!-- Translates dynamically headers -->
      <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
        {{ $t(h.text) }}
      </template>

      <template v-slot:item.title="{ item }">
        <strong class="txt--text">{{
          $t(`learning.filters.${item.title}`) | capitalize
        }}</strong>
      </template>

      <template v-slot:item.actions="{ item }">
        <v-btn
          class="mx-4 white--text button-hover"
          style="height: 100%"
          :color="$vuetify.theme.dark ? 'info' : 'txt'"
          rounded
          depressed
          nuxt
          small
          @click="handleClick(item)"
          >{{ $t('general.edit') }}</v-btn
        >

        <v-menu offset-y>
          <template v-slot:activator="{ on }">
            <v-hover v-slot:default="{ hover }">
              <v-btn
                class="dots"
                v-on="on"
                depressed
                :outlined="hover"
                small
                fab
                :color="hover ? 'info' : ''"
              >
                <v-icon>mdi-dots-horizontal</v-icon>
              </v-btn>
            </v-hover>
          </template>
          <v-list width="200">
            <v-list-item @click="handleClick(item)">
              <v-list-item-icon class="mr-1">
                <v-icon small>mdi-pencil</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-subtitle>
                  {{ $t('general.edit') | capitalize }}
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-menu>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import PageHeader from '~/components/UI/PageHeader/PageHeader'
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'

export default {
  layout: `${process.env.CUSTOMER}Admin`,
  middleware: 'adminsOrOperators',
  components: {
    PageHeader,
    accordionCard,
  },
  data() {
    return {
      headers: [
        { text: 'naam', value: 'title' },
        { text: 'aantal', value: 'items_count' },
        // { text: 'sinds', value: 'created_at' },
        // { text: 'update', value: 'last_updated_at' },
        { text: '', value: 'actions', sortable: false },
      ],
      filters: [],
    }
  },
  async asyncData({ $axios }) {
    const { data } = await $axios.get('/filters-with-count')

    const filtersFiltered = data.filter((f) => f.title !== 'quality_standards')

    return { filters: filtersFiltered }
  },
  methods: {
    handleClick(item) {
      this.$router.push(
        this.localePath(`/manager/learning/filters/${item.slug}`)
      )
    },
  },
}
</script>

<style lang="scss" scoped>
table tr .button-hover.v-btn {
  opacity: 0;
}
table tr:hover .button-hover.v-btn {
  opacity: 1;
}
.dots {
  background-color: unset !important;
}
</style>
