{{ template "base.html" . }}

{{ define "extrahead" }}
<script src="{{ static "js/templates.js" }}"></script>
{{ end }}

{{ define "content" }}

{{/*
<div class="mb3 ph3 ph0-ns">
    <style>
        #hms-banner {
			height: 10rem;
            background-color: #0b0243;
            color: white !important;
            text-align: center;
			position: relative;
			overflow: hidden;
        }

		#hms-banner::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('{{ static "hms/banner.jpg" }}');
			background-size: auto 100%;
			z-index: 0;
			opacity: 0.4;
		}

        #hms-banner h3 {
            font-family: 'MohaveHMN', sans-serif;
            font-weight: normal;
            font-size: 2.6rem;
            line-height: 0.8;
            margin: 0;
            text-transform: uppercase;
        }

        #hms-details {
            font-family: 'MohaveHMN', sans-serif;
            font-variant: small-caps;
            font-size: 1.3rem;
            line-height: 0.8;
            margin-top: 0.6rem;
            letter-spacing: 0.02rem;
        }

        #hms-learn-more {
            font-size: 1rem;
        }

        @media screen and (min-width: 30rem) {
            #hms-banner {
				height: 12rem;
                text-align: left;
				color: #0b0243 !important;
            }

			#hms-banner::before {
				opacity: 1;
			}

			#hms-title-container {
                padding-left: 13.4rem;
            }
        }

		@media screen and (min-width: 60em) {
			#hms-banner {
				height: 15rem;
                text-align: left;
				color: #0b0243 !important;
            }

			#hms-title-container {
                padding-left: 16rem;
            }

			#hms-banner h3 {
				font-size: 3rem;
			}

			#hms-details {
				font-size: 1.5rem;
			}
		}
    </style>
	<a id="hms-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="https://guide.handmade-seattle.com/c/2022/" target="_blank">
        <div id="hms-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns z-1">
            <h3 id="hms-title">Handmade Seattle</h3>
            <div id="hms-details">November 16 - 18. In person and online.</div>
        </div>
        <div class="flex-grow-1"></div>
        <div id="hms-learn-more" class="z-1">
            {{ if gt .HMSDaysUntilEnd 0 }}
				{{ if eq .HMSDaysUntilStart 0 }}
					Watch live
				{{ else }}
					Get tickets
				{{ end }}
			{{ else }}
				Catch up
			{{ end }}
            <div class="dib svgicon">{{ svg "chevron-right" }}</div>
        </div>
    </a>
</div>
*/}}

<div class="mb3 ph3 ph0-ns">
	<style>
        #jam-banner {
            background: linear-gradient(174deg, #23CE76, #299CE0);
            color: white !important;
            text-align: center;
        }

        #jam-banner h3 {
            font-family: 'MohaveHMN', sans-serif;
            font-weight: normal;
            font-size: 2.2rem;
            line-height: 0.8;
            margin: 0;
            text-transform: uppercase;
        }

        #jam-details {
            font-family: 'MohaveHMN', sans-serif;
            font-variant: small-caps;
            font-size: 1.2rem;
            line-height: 0.8;
            margin-top: 0.6rem;
            letter-spacing: 0.02rem;
        }

        #jam-learn-more {
            font-size: 1rem;
        }

        @media screen and (min-width: 30rem) {
            #jam-banner {
                text-align: left;
            }

            #jam-title-container {
                padding-top: 0.2rem;
            }
        }
    </style>
	<a id="jam-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="{{ .JamUrl }}">
		<img class="h3" src="{{ static "wheeljam2023/logo.svg" }}">
		<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
			<h3 id="jam-title">Wheel Reinvention Jam</h3>
			<div id="jam-details">
				September 25 - October 1.
				{{ if gt .JamDaysUntilEnd 0 }}
					{{ if eq .JamDaysUntilStart 0 }}
						<b>Happening now.</b>
					{{ else if eq .JamDaysUntilStart 1 }}
						<b>Starting tomorrow.</b>
					{{ else }}
						<b>In {{ .JamDaysUntilStart }} days.</b>
					{{ end }}
				{{ else }}
					<b>See the results.</b>
				{{ end }}
			</div>
		</div>
		<div class="flex-grow-1"></div>
		<div id="jam-learn-more">
			Learn more
			<div class="dib svgicon">{{ svg "chevron-right" }}</div>
		</div>
	</a>
</div>

{{/*
<div class="mb3 ph3 ph0-ns">
	<style>
        #cities-banner {
            background: url("{{ static "cities/banner.png" }}");
            background-repeat: no-repeat;
            color: white !important;
            text-align: center;
            background-size: contain;
            background-position: bottom;
            background-color: black;
        }

        #cities-banner h3 {
            font-family: 'MohaveHMN', sans-serif;
            font-weight: normal;
            font-size: 2.2rem;
            line-height: 0.8;
            margin: 0;
            text-transform: uppercase;
        }

       .cities-details {
            font-family: 'MohaveHMN', sans-serif;
            font-variant: small-caps;
            font-size: 1.2rem;
            line-height: 0.8;
            margin-top: 0.6rem;
            letter-spacing: 0.02rem;
        }

        #cities-learn-more {
            font-size: 1rem;
        }

        #cities-title-container{
          padding-left: 8.5rem;
        }

        @media screen and (min-width: 30rem) {
            #cities-banner {
                text-align: left;
            }

            #cities-title-container {
                padding-top: 0.2rem;
            }
        }

        @media screen and (max-width: 960px) {
            #cities-title-container {
                padding-left: 7.5rem;
            }

            #cities-banner{
                background-size: 200%;
                background-position: 0 100%;
            }
        }


       @media screen and (max-width: 560px) {
            #cities-banner {
                text-align: left;
            }

            #cities-title-container {
                padding-top: 0.2rem;
                padding-left: 0;
                text-align: center;
            }
        }

    </style>
	<a id="cities-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="https://handmadecities.com/tickets">
		<div id="cities-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
			<h3 id="cities-title">Handmade cities</h3>
			<div class="cities-details">
				Boston - Aug 3-4 2023.
				{{ if gt .HMBostonDaysUntilEnd 0 }}
					{{ if eq .HMBostonDaysUntilStart 0 }}
						<b>Happening now.</b>
					{{ else if eq .HMBostonDaysUntilStart 1 }}
						<b>Starting tomorrow.</b>
					{{ else if lt .HMBostonDaysUntilStart 31 }}
						<b>In {{ .HMBostonDaysUntilStart }} days.</b>
					{{ end }}
				{{ end }}
			</div>
      <div class="cities-details">
				Seattle - Nov 15-17 2023.
				{{ if gt .HMSDaysUntilEnd 0 }}
					{{ if eq .HMSDaysUntilStart 0 }}
						<b>Happening now.</b>
					{{ else if eq .HMSDaysUntilStart 1 }}
						<b>Starting tomorrow.</b>
					{{ else if lt .HMSDaysUntilStart 31 }}
						<b>In {{ .HMSDaysUntilStart }} days.</b>
					{{ end }}
				{{ end }}
			</div>

		</div>
		<div class="flex-grow-1"></div>
		<div id="cities-learn-more">
			Tickets available now
			<div class="dib svgicon">{{ svg "chevron-right" }}</div>
		</div>
	</a>
</div>
*/}}

{{ if not .User }}
	<div class="mb3 ph3 ph0-ns">
		<style>
			#welcome {
				background: linear-gradient(#753330, #823461); /* darker variant of jam color scheme */
				color: white;
			}

			#welcome-logo {
				font-family: 'MohaveHMN', sans-serif;
				font-weight: 400;
				font-size: 4rem;
				display: flex;
				justify-content: center;
			}

			#welcome-logo svg {
				height: 100%;
				fill: currentColor;
				opacity: 0.9;
			}
			
			#welcome-content a {
				color: white !important;
				text-decoration: underline;
				font-weight: bold;
			}

			#welcome-actions {
				margin-top: 1.5rem;
			}

			#welcome-actions a {
				color: white !important;
				text-decoration: none;
				line-height: 1.4;
				font-weight: 500;

				transition: background-color 50ms ease-in-out;
				background-color:rgba(255, 255, 255, 0.1);

				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}

			#welcome-actions a:hover {
				background-color: rgba(255, 255, 255, 0.2);
			}

			#welcome-actions a:active {
				background-color: rgba(255, 255, 255, 0.15);
			}
		</style>
		<div id="welcome" class="br3 pa3 pa4-ns bg--card f5">
			<div id="welcome-logo" class="h4 mb3 mb4-ns">
				{{ svg "hmn_circuit" }}
			</div>
			<div id="welcome-content" class="center-layout" style="max-width: 51rem">
				<p class="b">We are working to correct the course of the software industry.</p>
				<p>We are a community of low-level programmers with high-level goals. Originally inspired by Casey Muratori's <a href="https://handmadehero.org/" target="_blank">Handmade Hero</a>, we dig deep into our systems and learn how to do things from scratch. We're not satisfied by the latest popular language or the framework of the month. Instead we care about how computers <b>actually&nbsp;work.</b></p>
				<p>Software quality is declining, and modern development practices are making it worse. We need to change course. <b>Help us get the software industry back on track.</b></p>
			</div>
			<div id="welcome-actions" class="flex flex-column flex-row-ns justify-center">
				<a class="ba b--white br2 pa3 ph4-ns" href="{{ .ManifestoUrl }}">Read our manifesto</a>
				<a class="ba b--white br2 pa3 ph4-ns mt3 mt0-ns ml3-ns" href="{{ .Header.ProjectIndexUrl }}">View Handmade projects</a>
				<a class="ba b--white br2 pa3 ph4-ns mt3 mt0-ns ml3-ns" target="_blank" href="https://discord.gg/hmn">Join our Discord</a>
			</div>
		</div>
	</div>
{{ end }}

<div class="landing-layout ph3 ph0-ns">
	{{/*
		The order of the grid children should be as desired on mobile, then adapted to larger
		sizes using CSS grid properties.
	*/}}

	{{ with .NewsPost }}
		<div>
			<h2>Latest News</h2>
			{{ template "timeline_item.html" . }}
		</div>
	{{ end }}
	<div class="landing-right">
		<h2>Around the Network</h2>
		<div class="optionbar mb2">
			<div class="options">
				<a class="button" href="{{ .AtomFeedUrl }}"><span class="icon big pr1">4</span> RSS Feed</a>
				{{ if .User }}
					<form method="POST" action="{{ .MarkAllReadUrl }}">
						{{ csrftoken .Session }}
						<button type="submit"><span class="big pr1">&#x2713;</span> Mark all posts on site as read</button>
					</form>
				{{ end }}
			</div>
			<div class="options">
				{{ template "pagination.html" .Pagination }}
			</div>
		</div>
		{{ range .TimelineItems }}
			{{ template "timeline_item.html" . }}
		{{ end }}
		<div class="optionbar bottom mt2">
			<div class="options"></div>
			<div class="options">
				{{ template "pagination.html" .Pagination }}
			</div>
		</div>
	</div>
	{{ if .ShowcaseTimelineJson }}
		<div>
			{{ template "showcase_templates.html" }}
			<div>
				<h2>Community Showcase</h2>
				<div class="bg--card pa3 br3">
					<div class="mb3">
						This is a selection of recent work done by community members. Want to participate? <a href="https://discord.gg/hmn" target="_blank">Join us on Discord.</a>
					</div>
					<div id="showcase-container"></div>
					<div>
						<a class="db w-100 tc pa2" href="{{ .ShowcaseUrl }}">View all »</a>
					</div>
				</div>
			</div>
			<script>
				const showcaseItems = JSON.parse("{{ .ShowcaseTimelineJson }}");
				initShowcaseContainer(document.querySelector('#showcase-container'), showcaseItems, 200);
			</script>
		</div>
	{{ end }}
</div>
{{ end }}