<script lang="ts">
	import { Router, Link, Route } from "svelte-routing";
	import { onMount } from "svelte";
	import Menu from "./components/Menu.svelte";
	import FrontPage from "./pages/FrontPage.svelte";
	import ProjectPage from "./pages/ProjectPage.svelte";
	import ModalRoute from "./components/ModalRoute.svelte";
	import LogAddForm from "./forms/LogAddForm.svelte";
	import LogsPage from "./pages/LogsPage.svelte";
	import LogEditForm from "./forms/LogEditForm.svelte";
	import LogDeleteForm from "./forms/LogDeleteForm.svelte";
	import TaskAddForm from "./forms/TaskAddForm.svelte";
	import TaskEditForm from "./forms/TaskEditForm.svelte";
	import TaskDeleteForm from "./forms/TaskDeleteForm.svelte";
	import ProjectAddForm from "./forms/ProjectAddForm.svelte";
	import ProjectEditForm from "./forms/ProjectEditForm.svelte";
	import ProjectDeleteForm from "./forms/ProjectDeleteForm.svelte";
	import GroupPage from "./pages/GroupPage.svelte";
	import ItemAddForm from "./forms/ItemAddForm.svelte";
	import ItemEditForm from "./forms/ItemEditForm.svelte";
	import ItemDeleteForm from "./forms/ItemDeleteForm.svelte";
	import GroupForm from "./forms/GroupForm.svelte";
	import GoalPage from "./pages/GoalPage.svelte";
	import GoalForm from "./forms/GoalForm.svelte";
	import LoginForm from "./forms/LoginForm.svelte";
	import authStore from "./stores/auth";

	onMount(() => {
		authStore.check()
	});
</script>

{#if $authStore.checked}
	{#if $authStore.loggedIn}
		<Router>
			<Menu />
			<main>
				<Route path="/" component={FrontPage} />
				<Route path="/goals/" component={GoalPage} />
				<Route path="/projects/" component={ProjectPage} />
				<Route path="/logs/" component={LogsPage} />
				<Route path="/items/" component={GroupPage} />
			</main>
		</Router>
		<ModalRoute name="log.add"> <LogAddForm/> </ModalRoute>
		<ModalRoute name="log.edit"> <LogEditForm/> </ModalRoute>
		<ModalRoute name="log.delete"> <LogDeleteForm/> </ModalRoute>
		<ModalRoute name="task.add"> <TaskAddForm/> </ModalRoute>
		<ModalRoute name="task.edit"> <TaskEditForm/> </ModalRoute>
		<ModalRoute name="task.delete"> <TaskDeleteForm/> </ModalRoute>
		<ModalRoute name="project.add"> <ProjectAddForm/> </ModalRoute>
		<ModalRoute name="project.edit"> <ProjectEditForm/> </ModalRoute>
		<ModalRoute name="project.delete"> <ProjectDeleteForm/> </ModalRoute>
		<ModalRoute name="item.add"> <ItemAddForm/> </ModalRoute>
		<ModalRoute name="item.edit"> <ItemEditForm/> </ModalRoute>
		<ModalRoute name="item.delete"> <ItemDeleteForm/> </ModalRoute>
		<ModalRoute name="group.add"> <GroupForm creation/> </ModalRoute>
		<ModalRoute name="group.edit"> <GroupForm/> </ModalRoute>
		<ModalRoute name="group.delete"> <GroupForm deletion/> </ModalRoute>
		<ModalRoute name="goal.add"> <GoalForm creation/> </ModalRoute>
		<ModalRoute name="goal.edit"> <GoalForm/> </ModalRoute>
		<ModalRoute name="goal.delete"> <GoalForm deletion/> </ModalRoute>
	{:else}
		<LoginForm />
	{/if}
{/if}

<style>
	main {
		text-align: left;
		max-width: 99.5%;
		width: 920px;
		margin: 1em auto;
		padding-bottom: 4em;
	}

</style>