<script lang="ts">
	import ControlButton    from '$lib/components/ControlButton.svelte';
	import EnvelopeControl  from '$lib/components/EnvelopeControl.svelte';
	import ConversationView from '$lib/components/ConversationView.svelte';
	import MessageBar       from '$lib/components/MessageBar.svelte';
	import searchIcon   from '$lib/assets/icons/search.svg?raw';
	import contactIcon  from '$lib/assets/icons/contact.svg?raw';
	import attachIcon   from '$lib/assets/icons/attach.svg?raw';
	import sendmailIcon from '$lib/assets/icons/sendmail.svg?raw';

	import { GetUserContact } from "$lib/wailsjs/go/main/App";
	import { global } from "$lib/global.svelte.js";
	
	const userContact = await GetUserContact();
</script>

<section class="flex flex-col w-full h-full">
	<section class="bg-header w-full p-2 flex justify-between">
		<EnvelopeControl fromContact={userContact}
						 toContact={global.contact} />
		<div class="flex gap-2">
			<ControlButton icon={searchIcon} />
			<ControlButton icon={contactIcon} />
		</div>
	</section>
	<ConversationView />
	<section class="flex p-2 gap-2 items-end">
		<ControlButton icon={attachIcon} />
		<MessageBar />
		<ControlButton icon={sendmailIcon} />
	</section>
</section>