<template>
  <q-page v-if="canUpdateUser" class="perm-gateway flex flex-center column">
    <div class="text-h5 text-primary q-mb-xl">
      Rol + Departman Yetkileri
    </div>

    <div class="row q-gutter-lg q-mt-md">
      <q-btn
        color="secondary"
        icon="folder_open"
        label="MEVCUT YETKİLERİ GÖSTER"
        @click="goList"
      />

      <q-btn
        color="primary"
        icon="add_circle"
        label="YETKİ EKLE / GÜNCELLE"
        @click="goEditor"
      />
    </div>
  </q-page>

  <q-page v-else class="q-pa-md flex flex-center">
    <div class="text-negative text-subtitle1">
      Bu modüle erişim yetkiniz yok.
    </div>
  </q-page>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { usePermission } from 'src/composables/usePermission'

const router = useRouter()
const { canUpdate } = usePermission()
const canUpdateUser = canUpdate('user')

function goList () {
  router.push({ name: 'role-dept-permissions-list' })
}

function goEditor () {
  router.push({
    name: 'role-dept-permissions-editor',
    query: { mode: 'new' }
  })
}
</script>

<style scoped>
.perm-gateway {
  padding: 24px;
}
</style>
