<script lang="ts">
	import { Button, Nav, NavItem, NavLink } from "@sveltestrap/sveltestrap";
	import type { LayoutData } from "./$types";
	import { page } from "$app/stores";

	export let data: LayoutData;
</script>

<svelte:head>
	<title>Catalogger - Managing {data.guild.name}</title>
</svelte:head>

<div class="d-flex flex-column flex-lg-row justify-content-lg-between">
	<Nav pills={true} class="flex-column flex-lg-row mb-2">
		<NavLink href="#" disabled>Managing {data.guild.name}</NavLink>
		<NavLink
			href="/dash/{data.guild.id}"
			active={$page.url.pathname === `/dash/${data.guild.id}`}
		>
			Log channels
		</NavLink>
		<NavLink
			href="/dash/{data.guild.id}/redirects"
			active={$page.url.pathname === `/dash/${data.guild.id}/redirects`}
		>
			Redirects
		</NavLink>
		<NavLink
			href="/dash/{data.guild.id}/ignored-messages"
			active={$page.url.pathname === `/dash/${data.guild.id}/ignored-messages`}
		>
			Ignored messages
		</NavLink>
		<NavLink
			href="/dash/{data.guild.id}/ignored-entities"
			active={$page.url.pathname === `/dash/${data.guild.id}/ignored-entities`}
		>
			Ignored channels/roles
		</NavLink>
		<NavLink
			href="/dash/{data.guild.id}/key-roles"
			active={$page.url.pathname === `/dash/${data.guild.id}/key-roles`}
		>
			Key roles
		</NavLink>
		<NavLink
			href="/dash/{data.guild.id}/import"
			active={$page.url.pathname === `/dash/${data.guild.id}/import`}
		>
			Import/export settings
		</NavLink>
		<NavLink
			href="/dash/{data.guild.id}/delete"
			active={$page.url.pathname === `/dash/${data.guild.id}/delete`}
		>
			Delete all data
		</NavLink>
	</Nav>
</div>

<slot />
