<!-- pages/admin/members.vue -->
<template>
  <UContainer>
    <UTable :columns="columns" :rows="members" :loading="pending">
      <template #actions-data="{ row }">
        <UDropdown :items="actions(row)">
          <UButton variant="ghost" icon="i-heroicons-ellipsis-horizontal" />
        </UDropdown>
      </template>
    </UTable>
  </UContainer>
</template>

<script setup>
const { data: members, pending } = await useFetch("/api/admin/members");

const columns = [
  { key: "name", label: "Name" },
  { key: "email", label: "Email" },
  { key: "circle", label: "Circle" },
  { key: "contributionTier", label: "Contribution" },
  { key: "slackInvited", label: "Slack" },
  { key: "actions" },
];

const actions = (row) => [
  [
    {
      label: "Send Slack Invite",
      click: () => sendSlackInvite(row),
    },
    {
      label: "View Details",
      click: () => navigateTo(`/admin/members/${row._id}`),
    },
  ],
];
</script>
