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

	/** @type {string} */ let newdate;

	$: if ($date !== '') {
		newdate = convertDate($date);
	}
</script>

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

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