<script lang="ts">
	import { ListGroup, ListGroupItem } from "@sveltestrap/sveltestrap";
	import type { PageData } from "./$types";

	export let data: PageData;

	$: joinedGuilds = data.guilds.filter((g) => g.bot_in_guild);
	$: unjoinedGuilds = data.guilds.filter((g) => !g.bot_in_guild);
</script>

<svelte:head>
	<title>Catalogger - Dashboard</title>
</svelte:head>

<h1>Manage your servers</h1>

<div class="row">
	{#if joinedGuilds.length > 0}
		<div class="col-lg">
			<h2>Servers you can manage</h2>
			<ListGroup>
				{#each joinedGuilds as guild (guild.id)}
					<ListGroupItem tag="a" href="/dash/{guild.id}">
						<img
							src={guild.icon_url}
							alt="Icon for {guild.name}"
							style="border-radius: 0.75em; height: 1.5em;"
						/>
						{guild.name}
					</ListGroupItem>
				{/each}
			</ListGroup>
		</div>
	{/if}
	{#if unjoinedGuilds.length > 0}
		<div class="col-lg">
			<h2>Servers you can add Catalogger to</h2>
			<ListGroup>
				{#each unjoinedGuilds as guild (guild.id)}
					<ListGroupItem tag="a" href="/api/add-guild/{guild.id}">
						<img
							src={guild.icon_url}
							alt="Icon for {guild.name}"
							style="border-radius: 0.75em; height: 1.5em;"
						/>
						{guild.name}
					</ListGroupItem>
				{/each}
			</ListGroup>
		</div>
	{/if}
</div>
