<script lang="ts">
	import "./layout.css";
	let { children } = $props();
</script>

<svelte:head>
	<title>SimLink</title>
	<meta name="description" content="SimLink" />
</svelte:head>

<div class="content">
	<main>
		{@render children()}
	</main>
</div>

<footer class="app-footer">
	<p>Sim-Link for Gazebo Simulations</p>
	<p><a href="https://github.com/RDC-GMU">GMU RDC TEAM</a></p>
</footer>

<style>
	.content {
		min-height: calc(100vh - 90px); /* Leave room for footer */
	}

	main {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 10px;
	}

	.app-footer {
		text-align: center;
		padding: 20px 10px;
		border-top: 2px solid #000;
		margin-top: 20px;
		font-family: "JetBrains Mono", Courier, monospace;
		font-size: 14px;
		background-color: #f0f0f0;
		position: sticky;
		bottom: 0;
		z-index: 100;
	}
</style>
