carteles/src/lib/preview/Preview.svelte

<script>
	/** @type {number} */ export let templateIndex;
	/** @type {string} */ export let templateImage;

	import { organizedBy, colabs, canvas, multiplier } from '$lib/stores/store';

	import Heading from '$lib/components/Heading.svelte';
	import Title from '$lib/components/Title.svelte';
	import Subtitle from '$lib/components/Subtitle.svelte';
	import Content from '$lib/components/Content.svelte';
	import Time from '$lib/components/Time.svelte';
	import Date from '$lib/components/Date.svelte';
	import Weekday from '$lib/components/Weekday.svelte';
	import Address from '$lib/components/Address.svelte';
	import Text from '$lib/components/Text.svelte';
	import City from '$lib/components/City.svelte';
</script>

<div class="preview">
	<div class="result" bind:this={$canvas} style="background-image: url('/{templateImage}');">
		{#if templateIndex >= 0}
			<Heading {templateIndex} />
			<Title {templateIndex} />
			<Subtitle {templateIndex} />
			<Content {templateIndex} />
			<Date {templateIndex} />
			<Time {templateIndex} />
			<Weekday {templateIndex} />
			<Address {templateIndex} />
			<City {templateIndex} />
		{/if}

		{#if $organizedBy[0] && $colabs[0]}
			<div class="orgcolab">
				<div class="org">Organiza:</div>
				<div class="colab">Colabora:</div>
				<div class="orgmixed">
					{#each $organizedBy as organization}
						<div class="organization">
							<img src={organization.image} alt={organization.text} />
							<div class="caption">{organization.text}</div>
						</div>
					{/each}
				</div>
				<div class="colabmixed">
					{#each $colabs as organization}
						<div class="organization">
							<img src={organization.image} alt={organization.text} />
							<div class="caption">{organization.text}</div>
						</div>
					{/each}
				</div>
			</div>
		{/if}

		{#if $organizedBy[0] && !$colabs[0]}
			<div class="imagetitle">Organiza:</div>
			<div class="organized-by">
				{#each $organizedBy as organization}
					<div class="organization">
						<img src={organization.image} alt={organization.text} />
						<div class="caption">{organization.text}</div>
					</div>
				{/each}
			</div>
		{/if}

		{#if $colabs[0] && !$organizedBy[0]}
			<div class="imagetitle">Colabora:</div>
			<div class="organized-by">
				{#each $colabs as organization}
					<div class="organization">
						<img src={organization.image} alt={organization.text} />
						<div class="caption">{organization.text}</div>
					</div>
				{/each}
			</div>
		{/if}
	</div>
	<div class="text">
		<Text />
	</div>
</div>

<style>
	.preview {
		padding: 8px;
		/* display: grid; */
		/* justify-content: center; */
		/* grid-template-columns: 1fr; */
		/* align-items: start; */
	}

	.result {
		display: block;
		width: 600px;
		/* height: 8px; */
		aspect-ratio: 1/1.4142;
		/* min-height: 842px; */
		/* align-self: center; */
		/* width: auto; */
		background-size: cover;
		position: relative;
		/* padding: 1rem; */
	}

	.imagetitle {
		position: absolute;
		top: 725px;
		left: 16px;
		font-size: 0.8rem;
		color: #444;
		text-transform: uppercase;
	}

	.organized-by {
		position: absolute;
		top: 745px;
		left: 1rem;
		right: 1rem;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
		grid-template-rows: min-content;
		grid-auto-rows: auto;
		justify-content: center;
		align-items: center;
	}

	.organization {
		margin: 0 1rem;
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	.organization img {
		max-height: 64px;
		max-width: 128px;
		margin: 0 auto;
		opacity: 100%;
	}

	.caption {
		margin: 0.5rem 0;
		font-size: 0.7rem;
		font-family: sans-serif;
		text-transform: uppercase;
		color: #666;
	}

	.orgcolab {
		position: absolute;
		top: 725px;
		height: 7rem;
		overflow: hidden;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content 1fr;
		grid-gap: 0.25rem;
		justify-content: start;
		align-items: center;
		width: 100%;
	}

	.org {
		grid-row: 1/2;
		grid-column: 1/2;
		font-size: 0.8rem;
		text-transform: uppercase;
	}

	.colab {
		font-size: 0.8rem;
		grid-row: 1/2;
		grid-column: 2/3;
		text-transform: uppercase;
	}

	.orgmixed {
		grid-row: 2/3;
		grid-column: 1/2;
		display: flex;
	}

	.colabmixed {
		grid-row: 2/3;
		grid-column: 2/3;
		display: flex;
	}
</style>