<template>
  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>

  <div class="q-pa-md">
    <div class="q-gutter-y-md">
      <q-card>
        <q-tabs
          v-model="tab"
          dense
          class="taxt-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab name="users" no-caps :label="$t('users')" />
          <q-tab name="roles" no-caps :label="$t('roles')" />
        </q-tabs>
        <q-separator />

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="users">
            <UserTable />
          </q-tab-panel>
          <q-tab-panel name="roles">
            <RoleTable />
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UserTable from 'src/vueLib/tables/users/UserTable.vue';
import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';

const tab = ref('users');
</script>
