<script>
	import { templates } from '$lib/templates/templates';

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

{#if $heading && templates[templateIndex].heading}
	<div
		class="heading"
		style="
  top: {templates[templateIndex].heading.top}px;
  height: {templates[templateIndex].heading.height}px;
  left: {templates[templateIndex].heading.left}px;
  right: {templates[templateIndex].heading.right}px;
  color: {templates[templateIndex].heading.color};
  font-size: {templates[templateIndex].heading.fontSize * $multiplier}px;
  font-family: {templates[templateIndex].heading.fontFamily};
	text-align: {templates[templateIndex].heading.textAlign};
	font-weight: {templates[templateIndex].heading.fontWeight};
	line-height: {templates[templateIndex].heading.lineHeight}px;
  "
	>
		{$heading}
	</div>
{/if}

<style>
	.heading {
		position: absolute;
		overflow: hidden;
		text-transform: uppercase;
	}
</style>
