<template>
<div class="mt-20 mb-10">
<h1 class="text-5xl font-bold">Select a server</h1>
<h2 class="text-xl text-muted-foreground mb-5">You manage <span class="text-primary">{{ user?.guilds.length }}</span> servers</h2>
<Button variant="outline" @click="refreshGuilds">
<Icon icon="radix-icons:reload" class="mr-2 h-5 w-5" />
<span class="text-base">Refresh</span>
</Button>
<div class="mx-1 h-px bg-muted my-10" />
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-9">
<Card v-for="(guild, i) in guilds" :key="i" class="flex flex-col justify-between flex-grow">
<CardHeader>
<img :src="`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`" alt="icon" height="70" width="70" class="rounded-full">
<CardTitle class="pt-3 text-lg break-words">{{ guild.name }}</CardTitle>
<CardDescription class="text-base">{{ guild.owner ? 'Owner' : 'Server Manager' }}</CardDescription>
</CardHeader>
<CardFooter>
<Button :variant="guild.botInGuild ? 'default' : 'outline'" class="w-full text-base">
<RouterLink :external="guild.botInGuild ? false : true" :to="guild.botInGuild ? `/dashboard/${guild.id}/member-screening` : `https://discord.com/oauth2/authorize?client_id=${runtimeConfig.public.url}&guild_id=${guild.id}&redirect_uri=${encodeURIComponent(`${runtimeConfig.public.url}/dashboard`)}&response_type=code&permissions=8&scope=bot`">
{{ guild.botInGuild ? 'Configure' : 'Add Bot' }}
</RouterLink>
</Button>
</CardFooter>
</Card>
</div>
</template>
<script setup lang="ts">
import { Icon } from "@iconify/vue";
import { useToast } from "@/components/ui/toast/use-toast";
const { toast } = useToast();
const runtimeConfig = useRuntimeConfig();
const user = useUser();
const { data: guilds } = useFetch("/api/discord/guilds");
async function refreshGuilds() { // TODO: ratelimit
if(!user) return toast({ title: "Uh oh! Something went wrong.", description: "If this issue persists, please contact the site manager." });
// TODO
}
</script>