<script lang="ts">
	import './layout.css';
	import ControlButton       from '$lib/components/ControlButton.svelte';
	import SearchBar           from '$lib/components/SearchBar.svelte';
	import ConversationPreview from '$lib/components/ConversationPreview.svelte';
	import NoConversation      from '$lib/components/NoConversation.svelte';
	import settingsIcon from '$lib/assets/icons/settings.svg?raw';
	import newIcon      from '$lib/assets/icons/new.svg?raw';
	import { goto } from "$app/navigation";
	import { GetUserContact } from "$lib/wailsjs/go/main/App";
	import { global } from "$lib/global.svelte.js";

	let { children } = $props();
	let conversations = [];

	const userContact = await GetUserContact();
	global.contact = userContact;
	
</script>

<svelte:head>
</svelte:head>
<main class="flex w-[100vw] h-[100vh] text-primary">
	<nav class="bg-sidebar w-1/4 h-full">
		<section class="flex flex-col gap-2 p-2">
			<div class="flex justify-end gap-4">
				<ControlButton icon={settingsIcon}
							   onclick={() => goto("/settings")} />
				<ControlButton icon={newIcon}
							   onclick={() => goto("/")}/>
			</div>
			<SearchBar />
		</section>
		<ol class="p-2">
			{#each conversations as conversation}
				<li><ConversationPreview {conversation} /></li>
			{:else}
				<NoConversation />
			{/each}
		</ol>
	</nav>
	<section class="w-full h-full">
		{@render children()}
	</section>
</main>