{{/*
This is a copy-paste from base.html because we want to preserve the unique
style of this page no matter what future changes we make to the base.
*/}}
<!DOCTYPE html>
<html lang="en-US" {{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" sizes="16x16" href="{{ static "favicon-16x16.png" }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ static "favicon-32x32.png" }}">

    {{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
    {{ range .OpenGraphItems }}
        {{ if .Property }}
            <meta property="{{ .Property }}" content="{{ .Value }}" />
        {{ else }}
            <meta name="{{ .Name }}" content="{{ .Value }}" />
        {{ end }}
    {{ end }}
    {{ if .Title }}
        <title>{{ .Title }} | Handmade Network</title>
    {{ else }}
        <title>Handmade Network</title>
    {{ end }}
    <meta name="theme-color" content="#232426">

    <!-- <script src="{{ static "js/templates.js" }}"></script> -->

    <link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
    <link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">

	<style>
		:root {
			--theme-gradient-dark: linear-gradient(to bottom right, #232426, #BFB6BE);
			--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #5899FF);
			--white: #fff;
			--bg-button: rgba(255, 255, 255, 0);
			--bg-button-hover: rgba(255, 255, 255, 0.1);
			--charcoal: #2F2F2F;
			--gray: #CBCBCB;
			--rich-gray: #494949;

			--spacing-0: 0;
			--spacing-1: .25rem;
			--spacing-2: .5rem;
			--spacing-3: 1rem;
			--spacing-4: 2rem;
			--spacing-5: 4rem;
			--spacing-6: 8rem;
			--spacing-7: 16rem;
			--border-radius-2: 0.25rem;

			--link-color: white;
		}

		body {
			font-family: "Inter", "Fira Sans", sans-serif;
			font-size: 1rem; /* remove this override when base stylesheet is less dumb */
		}

		h1, h2, h3, h4, h5, h6 {
			font-weight: 700;
		}

		.w2-5 {
			width: 3rem;
		}

		.link--white {
			--link-color: var(--white);
		}

		.post-content p {
			/* stupid override, should be done by .post-content instead of .content */
			margin: 0.6rem 0;
		}

		.bg--theme-gradient-dark {
			background: var(--theme-gradient-dark);
            /* background: linear-gradient(to bottom right, #333, #BBB); */
		}

		.bg--theme-gradient-light {
			background: var(--theme-gradient-light);
		}

		.bg--charcoal {
			background: var(--charcoal);
		}

		.bg--rich-gray {
			background: var(--rich-gray);
		}

		.bg--gray {
			background: var(--gray);
		}

		.b--charcoal {
			border-color: var(--charcoal);
		}

		.b--rich-gray {
			border-color: var(--rich-gray);
		}

		.c--theme-gradient-dark {
			background: var(--theme-gradient-dark);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}

		.c--theme-gradient-light {
			background: var(--theme-gradient-light);
			background-clip: text;
			-webkit-background-clip: text;
		}

		.c--theme-gradient-light {
			color: transparent;
		}

		.c--gray {
			color: var(--gray);
		}

		.input--jam {
			border: 1px solid var(--white);
			border-radius: var(--border-radius-2) !important;
			padding: var(--spacing-2) !important;
		}

		.btn--jam {
			border: 1px solid var(--white);
			border-radius: var(--border-radius-2);
			padding: var(--spacing-2) var(--spacing-3);

			background-color: var(--bg-button);
		}

		.btn--jam.small {
			padding: var(--spacing-1) var(--spacing-2);
		}

		.btn--jam:hover {
			background-color: var(--bg-button-hover);
		}

		.button-simple {
			background: var(--bg-button);
			border: 1px solid var(--white);
		}

		.button-simple:hover {
			background: var(--bg-button-hover);
		}

		.c-white {
			color: var(--white);
		}

		.invisible {
			visibility: hidden;
		}

		.svg-mask {
			mask: var(--mask-url);
			-webkit-mask: var(--mask-url);
		}

		.fill-current {
			fill: currentColor;
		}

		.square {
			aspect-ratio: 1 / 1;
		}

		.wide-screen {
			aspect-ratio: 16 / 9;
		}

		.iframe-fill iframe {
			flex-grow: 1;
		}

		.hmn-logo {
			font-family: 'MohaveHMN', sans-serif;
			text-transform: uppercase;
			font-size: 1.6rem;
			padding: 0.2rem 0.8rem;
		}

		.header-nav {
			padding-right: 0.6rem;
		}

		.user-avatar {
			border-radius: 999px;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.user-avatar.header {
			width: 1.8rem;
		}

		.jam-logo {
			max-width: 18rem;
		}

		.jam-logo-small {
			max-width: 8rem;
		}

		.jam-title {
			font-size: 2.5rem;
			font-weight: 700;
			/* align the bounding box with the visible text */
			margin-left: -0.06em;
			margin-right: -0.03em;
		}

		.w-headline {
			width: 20.3rem;
		}

		/* not small */
		@media screen and (min-width: 35em) {
			.w-headline {
				width: 44.67rem;
			}

			.jam-title {
				font-size: 5.53rem;
			}
		}
	</style>
</head>

<body class="bg--theme-gradient-dark c-white flex flex-column">
    <div class="bg-black-20 flex flex-row items-center link--white">
        <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
            Handmade
        </a>
        <div class="flex-grow-1 flex-shrink-1"></div>
        <div class="header-nav flex flex-row items-center g3 lh-solid f6">
            <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
            <a href="{{ .Header.JamsUrl }}">Jams</a>
            <a class="db" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
                <img class="user-avatar header" src="{{ .UserAvatarUrl }}">
            </a>
        </div>
    </div>
    <div class="tc flex-grow-1 flex justify-center items-center-ns g5 pv5">
		<div class="w-headline flex flex-column">
			<div class="jam-title mb4 lh-solid">Handmade Jams</div>
			<div class="flex flex-column flex-row-ns justify-between-ns g4 g0-ns lh-solid">
				<div>
					<div class="fw7 f3 f2-ns">Visibility Jam</div>
					<div class="fw3 f4 mt1">July 19-21, 2024</div>
					<div class="fw6 f5 pt3">
						<a href="{{ .Visibility2023Url }}" class="db">
							Last year's jam<div class="dib svgicon f8 ml1">{{ svg "chevron-right" }}</div>
						</a>
					</div>
				</div>
				<div>
					<div class="fw7 f3 f2-ns">Wheel Reinvention Jam</div>
					<div class="fw3 f4 mt1">September 23-29, 2024</div>
					<div class="fw6 f5 pt3">
						<a href="{{ .WRJ2023Url }}" class="db">
							Last year's jam<div class="dib svgicon f8 ml1">{{ svg "chevron-right" }}</div>
						</a>
					</div>
				</div>
			</div>
			<div class="tl tj-ns mt4 post-content">
				<p>The Handmade community runs multiple programming jams every year. If you've participated in a game jam before, the idea is similar—an event where participants build something from scratch in a short period of time. Unlike a game jam, though, we don't declare winners (although we do celebrate our favorite results). <a class="fw6" href="{{ .JamsUrl }}">See all our prior jams here.</a></p>
				<p>To participate in the next one, <a class="fw6" href="https://discord.gg/hmn">join our Discord</a>, or sign up for our mailing list:</p>
			</div>
			<form id="newsletter-form" class="mt4 flex flex-column g1">
				<div class="flex g2 justify-center">
					<input id="newsletter-email" type="email" class="input--jam flex-grow-1 flex-grow-0-ns" placeholder="me@example.com">
					<button id="newsletter-button" class="btn--jam">Sign up</button>
				</div>
				<div id="newsletter-message" class="f7">
					&nbsp;
				</div>
			</form>
		</div>
    </div>

	<script>
		const form = document.querySelector("#newsletter-form");
		const emailField = document.querySelector("#newsletter-email");
		const button = document.querySelector("#newsletter-button");
		const message = document.querySelector("#newsletter-message");

		form.addEventListener("submit", async e => {
			e.preventDefault();
			button.disabled = true;

			try {
				const res = await fetch("{{ .NewsletterSignupUrl }}", {
					method: "POST",
					headers: {
						"Content-Type": "application/json",
					},
					body: JSON.stringify({
						"email": emailField.value,
					}),
				});
				if (res.status >= 400) {
					throw new Error("bad request");
				}

				message.innerText = "Signed up successfully!";
			} catch (err) {
				message.innerText = "There was an error signing up.";
			}

			button.disabled = false;
		});
	</script>
</body>

</html>
