<script>
	import {
		heading,
		title,
		subtitle,
		content,
		date,
		newdate,
		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 <strong>'{$title}'</strong> en {$city}.
			</p>
			<p>Como siempre, la entrada es gratuita hasta completar aforo.</p>
			<ul>
				<li>
					<p style="white-space: pre-wrap;">
						<strong>Lugar</strong>:<br />{$address}<br /><em>{$city}</em>
					</p>
				</li>
				<li>
					<p><strong>Fecha</strong>:<br />{$newdate}<br />{$time}</p>
				</li>
			</ul>
			<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: 1rem 0;
	}
	label {
		color: #333;
	}
	li {
		margin: 1rem 0;
	}
</style>
