<script>
	import { templates } from '$lib/templates/templates';
	/** @type number */ export let templateIndex;
	import { title } from '$lib/stores/store';
</script>

{#if templates[templateIndex] && $title}
	<div
		class="title"
		style="
    top: {templates[templateIndex].title.top}px;
    height: {templates[templateIndex].title.height}rem;
    left: {templates[templateIndex].title.left}rem;
    right: {templates[templateIndex].title.right}rem;
    color: {templates[templateIndex].title.color};
    font-size: {templates[templateIndex].title.fontSize}rem;
    font-family: {templates[templateIndex].title.fontFamily};
    "
	>
		{$title}
	</div>
{/if}

<style>
	.title {
		position: absolute;
		font-variant: small-caps;
		line-height: 2.5rem;
		color: firebrick;
		font-weight: 600;
		height: 5rem;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: end;
		text-align: center;
	}
</style>
