<template>
  <div>
    <v-toolbar light>
      <v-toolbar-title>
        Manage Users
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn color="primary" to="/main/admin/users/create">Create User</v-btn>
    </v-toolbar>
    <v-data-table :headers="headers" :items="users">
      
      <template v-slot:item.is_active="{ item }">
        <v-icon v-if=item.columns.is_active icon="check"/>
      </template>
      <template v-slot:item.is_superuser="{ item }">
        <v-icon v-if=item.columns.is_superuser icon="check"/>
      </template>
      <template v-slot:item.id="{ item }">
        <v-btn flat :to="{name: 'main-admin-users-edit', params: {id: item.columns.id}}">
          <v-icon icon="edit"/>
          <v-tooltip location="top" activator="parent">Edit</v-tooltip>
        </v-btn>
      </template>
    </v-data-table>
  </div>
</template>

<script setup lang="ts">
import { useAdminStore } from '@/stores/admin';
import { storeToRefs} from 'pinia';
import { onMounted } from 'vue';

const adminStore = useAdminStore();
const adminStoreRef = storeToRefs(adminStore);

const users = adminStoreRef.readAdminUsers;

const headers = [
  {
    title: 'Name',
    sortable: true,
    key: 'name',
    align: 'left',
  },
  {
    title: 'Email',
    sortable: true,
    key: 'email',
    align: 'left',
  },
  {
    title: 'Full Name',
    sortable: true,
    key: 'full_name',
    align: 'left',
  },
  {
    title: 'Is Active',
    sortable: true,
    key: 'is_active',
    align: 'left',
  },
  {
    title: 'Is Superuser',
    sortable: true,
    key: 'is_superuser',
    align: 'left',
  },
  {
    title: 'Actions',
    key: 'id',
  },
];

onMounted(async ()=>{
  await adminStore.actionGetUsers();
})
</script>