<script>
	import { templates } from '$lib/templates/templates';
	/**
	 * @typedef {{
	 * slug: string;
	 * templateIndex: number;
	 * templateImage: string;
	 * }}
	 * LoadFunctionData
	 */

	/** @type LoadFunctionData */ export let data;
	import Form from '$lib/form/Form.svelte';
	import Preview from '$lib/preview/Preview.svelte';

	const slug = data.slug;
	const templateIndex = data.templateIndex;
	const templateImage = data.templateImage;
</script>

<svelte:head>
	<title>Carteles DMD - Plantilla {data.slug}</title>
</svelte:head>

<div class="main">
	<section class="form"><Form /></section>

	{#if templateIndex !== undefined}
		<section class="preview">
			<Preview {templateIndex} {templateImage} />
		</section>
	{/if}
</div>

<style>
	.main {
		display: grid;
		grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
		grid-gap: 0.5rem;
		min-height: calc(100vh - 5rem);
	}

	.form {
		grid-column: 1/2;
		background-color: rgb(230, 240, 240);
	}

	.preview {
		grid-column: 2/3;
		min-height: 200px;
		background-color: rgb(240, 238, 240);
	}
</style>
