{#if step < 4} Email Oven

Chip Choc

Cookie-cutter emails made easy.

{#if step >= 1}

Step 1

{/if} {#if step == 0} {/if} {#if step >= 1}

Compose your email below, leaving [TK stuff] to be replaced in the table. Make sure each TK is a single word: no spaces allowed!

<p>
				<strong>Detected fields:</strong>
				{#each tkList as tk (tk)}
					<span class="tag">{tk}</span>
				{/each}
			</p>
		</div>
		{/if}

{#if step >= 2}
		<h3 class="mt-3">Step 2</h3>
		<div class="instructions">
			<p>Now, fill in the fields for each user. (You can also copy-paste rows and columns directly from Air, if the ordering is right!)</p>
		</div>
		{/if}

{#if step == 1}
		<button on:click={showSheet}>Next</button>
		{/if}

{#if step > 1}
		<button on:click={refreshSheet}>Refresh</button>
		{/if}

{#if step >= 2 && !!cookiePreviewData}
		<h4 class="mt-3">Preview</h4>

<div class="cookie-preview">
			<div class="preview-header">
				<p>From: {fromEmail || '[NOBODY!!!]'}</p>
				<p>To: {cookiePreviewData.email || '[NOBODY!!!]'}</p>
				<p>Subject: {subject || '[NO SUBJECT #notgood]'}</p>
				<hr />
			</div>
			{@html converter.makeHtml(cookiePreviewData.text)}
		</div>
		<button on:click={decrementPreviewRow}>< Prev</button>
		<button on:click={incrementPreviewRow}>Next ></button>

{#if step == 2}
			<div class="instructions">
				<p>If everything looks okay, then we're done! Click on the button below to put the cutter in action.</p>
			</div>
			<button on:click={next}>Yup, send 'em out!</button>
			{/if}

{#if step == 3}
			<div class="instructions">
				<p>Are you <strong>sure</strong> you want to send them out?</p>
				<p>Are you ready?</p>
				<p>Did you look through all the previews?</p>
				<p>Have you double-checked the names and email IDs to make sure they match?</p>
			</div>
			<button on:click={hitSend}>Hit send!</button> <button on:click={prev}>Ummmm..</button>
			{/if}

{/if}
	{/if}

{#if step == 4}
	<img src="assets/email-baking.png" class="main-pic" alt="Email Oven with cookies inside"/>
	<h1><span class={emailsSoFar % 2 == 0 ? 'highlight' : ''}>Chip</span> <span class={emailsSoFar % 2 == 0 ? '' : 'highlight'}>Choc</span></h1>
	<h2>Your cookies are being cut...</h2>
	<progress value={emailsSoFar} max={emailsToSend}>{emailsToSend ? emailsSoFar/emailsToSend*100 : 0} %</progress>

{#if !!nowSending }
	<div class="cookie-preview">
		<div class="preview-header">
			<p>From: {nowSending.from || '[NOBODY!!!]'}</p>
			<p>To: {nowSending.to || '[NOBODY!!!]'}</p>
			<p>Subject: {subject || '[NO SUBJECT #notgood]'}</p>
			<hr />
			{@html nowSending.html}
		</div>
	</div>
	{/if}
	{/if}

{#if step == 5}
	<img src="assets/cookies.png" class="main-pic" alt="A Pile of Cookies"/>
	<h1>Wheee<span class="highlight">!</span></h1>
	<h2>All emails sent successfully.</h2>
	<button on:click={stepTwo}>Back to Draft</button>
	<button on:click={stepOne}>Start Over</button>
	{/if}

</main>

h1 {
		margin-bottom: 0;
	}

h1 + h2 {
		margin-top: 0;
	}

.main-pic {
		max-width: 100%;
	}

@media (min-width: 640px) {
		main {
			max-width: none;
		}

.main-pic {
			max-width: 240px;
		}
	}

.instructions {
		max-width: 640px;
		margin: 0 auto;
	}

.email-content {
		margin: 4em auto;
	}

.email-content .header {
		max-width: 640px;
		text-align: left;
		margin: auto;
	}

.email-content .form-group {
		display: flex;
		align-items: center;
	}

.email-content .form-group input {
		margin-left: 1em;
		width: 100%;
		border: 0
	}

.email-content textarea {
		width: 100%;
		max-width: 640px;
		font-family: inherit;
		min-height: 15em;
	}

.tag {
		margin: 0.2em;
		padding: 0.5em 1em 0.5em 1em;
		background: #ffe3ff;
		border-radius: 1em;
	}

.cookie-preview {
		text-align: left;
		max-width: 640px;
		margin: auto;
		padding: 1em;
		border: 1px solid black;
	}

progress {
		width: 100%;
		max-width: 640px;
		margin: 1em;
		color: #800020;
	}

progress::-moz-progress-bar,
	progress::-webkit-progress-value {
		background-color: #800020;
	}
</style>