{{ 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, #C8217E, #6E2C6B);
            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 "visjam2023/logo.svg" }}">
		<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
			<h3 id="jam-title">Visibility Jam</h3>
			<div id="jam-details">
				April 14 - 16.
				{{ 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 }}
						<b>In {{ .HMBostonDaysUntilStart }} days.</b>
					{{ end }}
				{{ else }}
					<b>See the results.</b>
				{{ 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 }}
						<b>In {{ .HMSDaysUntilStart }} days.</b>
					{{ end }}
				{{ else }}
					<b>See the results.</b>
				{{ 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 a community of programmers producing quality software through deeper understanding.</p>
				<p>Originally inspired by Casey Muratori's <a href="https://handmadehero.org/" target="_blank">Handmade Hero</a>, we have grown into a thriving community focused on building truly high-quality software. We're not low-level in the typical sense. Instead we realize that to write great software, you need to understand things on a deeper level.</p>
				<p>Modern software is a mess. The status quo needs to change. But we're optimistic that we can change it.</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.
	*/}}

	{{/* NOTE(ben): I am just removing news posts for now. They are always stale and detract from the events we announce.
	{{ 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 }}