<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 those 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 class="tabs-wrapper" xl10 offset-xl1 lg12>
      <v-card>
        <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
          centered
          v-model="tab"
        >
          <v-tab>{{ $t('roles') }}</v-tab>
          <v-tab>{{ $t('users') }}</v-tab>
        </v-tabs>
      </v-card>
      <v-tabs-items v-model="tab">
        <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>

    <!--- Put Dialogs here (delete Dialog, edit Dialog, revoke Dialog, grant Dialog -->
    <v-dialog
      :value="$store.state.permissions.dialog"
      @input="$store.commit('permissions/setDialog', $event )"
      max-width="500px"
      scrollable
    >
      <v-card>
        <v-card-title primary-title class="elevation-3">
          <div>
            <div class="headline">{{ $tc('delete-role', selectedRoles.length, [selectedRoles.length]) }}</div>
          </div>
        </v-card-title>
        <v-card-text>
          {{ $tc('delete-are-you-sure', selectedRoles.length) }}
          <template v-for="item in selectedRoles">
            <div class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.descr }})</div>
          </template>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat="flat" @click="$store.commit('permissions/setDialog', false )">{{ $t('cancel') }}</v-btn>
          <v-btn color="error" @click="$store.commit('permissions/setDialog', false ); $store.dispatch('permissions/deleteSelectedRoles')">{{ $t('delete') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <permission-module-grant-revoke :grant="$store.state.permissions.grant"/>
    <permission-module-edit :roleId="$store.state.permissions.roleId"/>

  </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 { mapState, mapGetters } from 'vuex'

export default {
  name: 'PermissionModule',
  components: {
    PermissionModuleRoleList,
    PermissionModuleUserList,
    PermissionModuleGrantRevoke,
    PermissionModuleEdit
  },
  data () {
    return {
      components: ['PermissionModuleRoleList', 'PermissionModuleUserList'],
      tab: 0
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('permissions', ['selectedRoles', 'selectedUsers'])
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
