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

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

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

<style>
	.address {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		white-space: pre-wrap;
	}
</style>
