<i18n>
{
  "en": {
    "showall": "Show All",
    "groups": "Groups",
    "clients": "Clients"
  },
  "de": {
    "showall": "Alle anzeigen",
    "groups": "Gruppen",
    "clients": "Clienten"
  }
}
</i18n>

<template>
  <div>
    <v-layout>
      <v-spacer></v-spacer>
      <div><v-switch class="show-toggle" :label="$t('showall')" hide-details color="primary" :input-value="showAll" @change="setShowAll"></v-switch></div>
    </v-layout>
    <v-subheader>{{ $t('groups') }}</v-subheader>
    <group-module-group-list :tabIndex="0" :groups="home.groups" />
    <v-subheader>{{ $t('clients') }}</v-subheader>
    <group-module-client-list :tabIndex="0" :clients="home.clients" />
  </div>
</template>

<script>
import GroupModuleGroupList from '@/components/GroupModuleGroupList'
import GroupModuleClientList from '@/components/GroupModuleClientList'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'GroupModuleHomeView',
  props: ['home'],
  components: {
    GroupModuleGroupList,
    GroupModuleClientList
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState('groups', ['showAll'])
  },
  watch: {
    showAll () {
      this.$store.dispatch('groups/loadHome')
    }
  },
  methods: {
    ...mapMutations('groups', ['setShowAll'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show-toggle {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: -20px;
}
</style>
