<script lang="ts">
	import 'normalize.css/normalize.css';
	import '@fontsource/b612';
	import '@fontsource/b612/700.css';
	import '@tabler/icons-webfont/tabler-icons.css';
	import '../index.css';
	import TestCard from '$lib/TestCard.svelte';
	import { page } from '$app/stores';
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';

	let idleTimeout: NodeJS.Timeout | undefined;
	onMount(() => {
		window.addEventListener('mousemove', () => {
			clearTimeout(idleTimeout);
			document.body.classList.remove('idle');
			idleTimeout = setTimeout(() => {
				document.body.classList.add('idle');
			}, 3000);
		});
	});

	$: onlyCard = $page.url.pathname === '/card';
</script>

<TestCard full={onlyCard} on:focus={() => goto('/card')} />
<main class:content={!onlyCard} class:sub={$page.url.pathname !== '/' && !onlyCard}>
	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />Back</a>
	<slot />
</main>

<style>
	main.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0.8);
		border-radius: 0.5rem;
		border: 1px solid white;

		padding: 1rem;

		display: flex;
		flex-direction: column;
	}

	main.sub {
		height: 90vh;
		width: 90vw;
	}

	.button-back {
		position: absolute;
		top: 1rem;
		right: 1rem;

		opacity: 0.66;
		transition: opacity 0.3s;
		&:hover {
			opacity: 1;
		}
	}

	main:not(.sub) .button-back {
		display: none;
	}

	:global(.hide-idle) {
		transition: opacity 1s;
		opacity: 1;
	}

	:global(body.idle .hide-idle) {
		opacity: 0;
	}
</style>
