<i18n>
{
  "en": {
    "roles": "Roles",
    "users": "Users",
    "delete-are-you-sure": "Are you sure you want to delete this role? | Are you sure you want to delete these roles?",
    "delete-permission": "Delete {0} role | Delete {0} roles",
    "delete-role": "Delete {0} Role | Delete {0} Roles"
  },
  "de": {
    "roles": "Rollen",
    "users": "Nutzer",
    "delete-are-you-sure": "Sind sie sicher, dass sie diese Rolle Löschen wollen? | Sind sie sicher, dass sie diese Rollen löschen wollen?",
    "delete-permission": "Delete {0} role | Delete {0} roles",
    "delete-role": "Lösche {0} Rolle | Lösche {0} Rollen"
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
        <v-card class="elevation-3">
          <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
            <v-tab><v-icon class="tabbar-tabicon">verified_user</v-icon>{{ $t('roles') }}</v-tab>
            <v-tab><v-icon class="tabbar-tabicon">people</v-icon>{{ $t('users') }}</v-tab>
          </v-tabs>
        </v-card>
        <v-tabs-items v-model="tabs" style="padding-bottom: 20px">
          <v-tab-item>
            <v-subheader>{{ $t('roles') }}</v-subheader>
            <permission-module-role-list/>
          </v-tab-item>
          <v-tab-item>
            <v-subheader>{{ $t('users') }}</v-subheader>
            <permission-module-user-list/>
          </v-tab-item>
        </v-tabs-items>
      </v-flex>
    </v-layout>

    <v-dialog
      :value="dialog.show"
      @input="setDialog({ show: $event })"
      :max-width="dialog.type === 'delete' ? '500px' : '1200px'"
      scrollable
      persistent
      :fullscreen="$vuetify.breakpoint.smAndDown"
    >
      <permission-module-edit v-if="dialog.type === 'edit'"/>
      <permission-module-delete v-if="dialog.type === 'delete'"/>
      <permission-module-grant-revoke v-else-if="dialog.type === 'grant'"/>
      <permission-module-grant-revoke v-else-if="dialog.type === 'revoke'"/>
    </v-dialog>
  </v-container>
</template>

<script>
import PermissionModuleRoleList from '@/components/PermissionModuleRoleList'
import PermissionModuleUserList from '@/components/PermissionModuleUserList'
import PermissionModuleGrantRevoke from '@/components/PermissionModuleGrantRevoke'
import PermissionModuleEdit from '@/components/PermissionModuleEdit'
import PermissionModuleDelete from '@/components/PermissionModuleDelete'
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'PermissionModule',
  components: {
    PermissionModuleRoleList,
    PermissionModuleUserList,
    PermissionModuleGrantRevoke,
    PermissionModuleEdit,
    PermissionModuleDelete
  },
  data () {
    return {
      tabs: 0
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('permissions', ['dialog'])
  },
  methods: {
    ...mapMutations('permissions', ['setDialog'])
  },
  created () {
    this.$store.dispatch('permissions/loadLists')
    this.$store.dispatch('groups/loadLists')
    this.$store.dispatch('users/loadData')
  }
}
</script>

<style scoped>

</style>
