<i18n>
{
  "en": {
    "delete-are-you-sure": "Are you sure you want to delete this role? | Are you sure you want to delete these {0} roles?",
    "roleDeleteSuccess": "Role deleted successfully | Roles deleted successfully",
    "title": "Delete role | Delete roles"
  },
  "de": {
    "delete-are-you-sure": "Sind Sie sicher, dass Sie diese Rolle löschen wollen? | Sind Sie sicher, dass Sie diese {0} Rollen löschen wollen?",
    "roleDeleteSuccess": "Rolle erfolgreich gelöscht | Rollen erfolgreich gelöscht",
    "title": "Rolle löschen | Rollen löschen"
  }
}
</i18n>

<template>
  <v-card>
    <v-card-title class="elevation-3">
      <div class="headline">{{ $tc('title', dialog.info.length) }}</div>
    </v-card-title>
    <v-card-text>
      {{ $tc('delete-are-you-sure', dialog.info.length, [dialog.info.length]) }}
      <template v-for="item in dialog.info">
        <div class="grey--text" :key="item.id">{{ item.name }} ({{ item.descr }})</div>
      </template>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn text="flat" @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
      <v-btn color="error" @click="deleteRoles">{{ $t('delete') }}</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'PermissionModuleDelete',
  data () {
    return {
    }
  },
  computed: {
    ...mapState('permissions', ['dialog'])
  },
  methods: {
    ...mapMutations('permissions', ['setDialog', 'loadRoles']),
    async deleteRoles () {
      var deleteIds = []
      for (let i = 0; i < this.dialog.info.length; i++) {
        deleteIds.push(this.dialog.info[i].id)
      }
      await this.$http.post('/api/roles?delete', { ids: deleteIds })
      this.setDialog({ show: false })
      this.$snackbar({ color: 'success', text: this.$tc('roleDeleteSuccess', [deleteIds.length]) })
      this.$store.dispatch('permissions/loadRoles')
    }
  }
}
</script>

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

</style>
