<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">
	<div class="col-lg">
		<h2>Servers you can configure</h2>
		{#if joinedGuilds.length > 0}
			<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>
		{:else}
			<p>None of the servers you manage have Catalogger added.</p>
		{/if}
	</div>

	<div class="col-lg">
		<h2>Servers you can add Catalogger to</h2>
		{#if unjoinedGuilds.length > 0}
			<ListGroup>
				{#each unjoinedGuilds as guild (guild.id)}
					<ListGroupItem
						tag="a"
						href="/api/add-guild/{guild.id}"
						target="_blank"
					>
						<img
							src={guild.icon_url}
							alt="Icon for {guild.name}"
							style="border-radius: 0.75em; height: 1.5em;"
						/>
						{guild.name}
					</ListGroupItem>
				{/each}
			</ListGroup>
		{:else}
			<p>All of the servers you manage already have Catalogger added.</p>
		{/if}
	</div>
</div>
