<template>
  <SiteTitle :title="$t('userSettings')" />
  <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" style="padding: 0px">
          <UserTable />
        </q-tab-panel>
        <q-tab-panel name="roles" style="padding: 0px">
          <RoleTable />
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </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';
import SiteTitle from 'src/vueLib/general/SiteTitle.vue';

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