<script>
	import {
		heading,
		title,
		subtitle,
		content,
		date,
		time,
		weekday,
		address,
		city
	} from '$lib/stores/store';

	import { convertDate } from '$lib/convertDate';

	/** @type {string} */ let textDate = '';
	/** @type {boolean} */ let checked = false;

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

<div class="text-container">
	<input type="checkbox" bind:checked />
	<label for="checked">Mostrar texto</label>

	{#if checked}
		<div class="text" contenteditable="true">
			<p>Estimada/o amiga/o:</p>
			<p>El {$weekday.toLowerCase()}, {textDate}, celebramos el acto '{$title}' en {$city}.</p>
			<p>Como siempre, la entrada es gratuita hasta completar aforo.</p>
			<p>El acto comienza a las {$time}.</p>
			<p>{@html $content}</p>
		</div>
	{/if}
</div>

<style>
	.text-container {
		margin: 1rem auto;
	}
	.text {
		margin: 1rem auto;
		padding: 1rem;
		border: 1px solid lightgrey;
		background-color: #fff;
	}
	p {
		margin-bottom: 1rem;
	}
	label {
		color: #333;
	}
</style>
