<script>
	import Alert from "$lib/components/Alert.svelte";
	import Banner from "$lib/components/AdBanner.svelte";
	import { goto } from "$app/navigation";

	/** @type {import('./$types').LayoutData} */
	export let data;

	async function logout() {
		const response = await fetch("/logout", { method: "GET" });
		await goto("/landing");
	}
</script>

<div class="navbar scrolling-background text-lg py-1 text-white">
	<div class="container flex items-center justify-end">
		<a href="/">
			<img class="w-40 mr-6" src="/img/banner.png" alt="" />
		</a>
		<a class="mr-7" href="/games">Games</a>
		<a class="mr-7" href="/catalog">Catalog</a>
		<a class="mr-7" href="https://discord.gg/3wRpA5bzU9">Discord</a>
		<input class="rounded px-2 border-2 border-grey-300 text-black flex-grow mr-10" type="text" name="search" id="search" placeholder="Search" />
		<a class="mr-1 px-2 py-1 flex items-center rounded bg-gradient-to-tr from-blue-700 to-blue-600 outline outline-blue-800 outline-1 shadow-md hover:shadow-xl" href="/my/money">
			<img class="h-6 mr-1.5" src="/img/rowbux.png" alt="" />
			100
		</a>
		<div class="pl-1.5 ml-1 relative inline-block dropdown">
			<button class="hover:text-zinc-200 truncate" href="/my/profile"
				>{data.user?.username}
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline-block">
					<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
				</svg>
			</button>
			<div class="absolute bg-white text-center text-black w-36 right-0 origin-top-right rounded border border-gray-300 divide-y shadow-lg hidden dropdown-content">
				<div>
					<a class="block px-4 py-0.5 text-gray-700" href="/users/{data.user?._id}/profile">Profile</a>
					<a class="block px-4 py-0.5 text-gray-700" href="/my/settings">Settings</a>
				</div>
				<span class="block px-4 py-0.5 text-red-700 hover:cursor-pointer" on:click={logout}>Logout</span>
			</div>
		</div>
	</div>
</div>

<div class="navbar bg-gray-800 text-base py-0.5 text-white">
	<div class="container flex items-center">
		<a class="mr-6" href="/my/avatar">Avatar</a>
		<a class="mr-6" href="/my/friends">Friends</a>
		<a class="mr-6" href="/my/money">Money</a>
		<a class="mr-6" href="/groups">Groups</a>
		<a class="mr-6" href="/people">People</a>
		<a class="mr-6" href="/blogs">Blogs</a>
		<a class="mr-6" href="/my/invites">Invites</a>
	</div>
</div>

<div class="mobile-compatible scrolling-background text-lg py-1 text-white">
	<div class="container flex items-center">
		<p>"I'm racist" -calones -row</p>
	</div>
</div>

<div class="text-black container mt-4 min-h-[100vh]">
	<Alert />
	<!--<Banner />-->
	<slot />
</div>

<div class="flex text-white items-center justify-start scrolling-background mt-4">
	<div class="container">
		<div class="flex text-center py-2 border-b border-blue-500">
			<a class="text-lg flex-auto" href="/about/tos">Terms of Service</a>
			<a class="text-lg flex-auto" href="/about/rules">Rules</a>
			<a class="text-lg flex-auto" href="/about/privacy">Privacy Policy</a>
			<a class="text-lg flex-auto" href="/about/credits">Credits</a>
		</div>
		<div class="p-2">
			<img class="w-72 mr-6 justify-start inline saturate-150" src="/img/banner.png" alt="" />
			<h1 class="justify-end inline">©{new Date().getFullYear()} Rowblox Corporation. Rest in peace popbob 🙏🙏🙏</h1>
		</div>
	</div>
</div>
