{{ template "base.html" . }}

{{ define "extrahead" }}
<style type="text/css">
    .queryContainer {
        width: 80%;
        margin: 15px auto 20px auto;
        display: flex;
        flex-direction: horizontal;
    }

    .queryContainer input {
        height:3em;
    }

    .queryContainer #query {
        flex-grow: 1;
    }

    .queryContainer #submit_button {
        flex-grow: 0;
        flex-shrink: 0;
        padding:0px 10px;
        vertical-align:middle;
        margin:0px;
    }
    #annotationContainer {
        left: -10px;
        margin: 0px;
        margin-left: -20px;
        padding: 0px;
        width: 100%;
        height: 100%;
        border: 0px transparent none;
    }
</style>
<link rel="stylesheet" type="text/css" href="{{ static "annotations/cinera.css" }}">
<link rel="stylesheet" type="text/css" href="{{ static (strjoin "annotations/cinera__" .Project.Subdomain ".css") }}">
<link rel="stylesheet" type="text/css" href="{{ static "annotations/cinera_topics.css" }}">
<script type="text/javascript" src="{{ static "annotations/cinera_pre.js" }}"></script>
<script type="text/javascript" src="{{ static "annotations/cinera_post.js" }}" defer></script>
{{ end }}

{{ define "content" }}
<div class="flex flex-column flex-row-l">
    <div class="flex-grow-1 overflow-hidden">
		<h2>Annotations for the topic: {{ .CurrentTopic }}</h2>
		{{ .Content }}
    </div>
    <div class="sidebar flex-shrink-0 mw6 w-30-l self-center self-start-l mh3 mh0-ns ml3-l overflow-hidden">
		<div class="content-block box logo">
			<img alt="{{ .Project.Name }}" src="{{ .Project.Logo }}">
		</div>
		<div class="content-block subprojects">
			<strong>Also have a look at these {{ .Project.Name }} annotations:</strong>
			<ul>
				{{ range .Topics }}
					{{ if .Url }}
						<li class="ttc">
							<a href="{{ .Url }}">{{ .LinkText }}</a>
						</li>
					{{ else }}
						<li class="ttc"><strong>{{ .LinkText }}</strong></li>
					{{ end }}
				{{ end }}
			</ul>
		</div>
		{{ if eq .Project.Subdomain "hero" }}
			<div class="content-block donate">
				<br/>
				<strong>Preorder the Game, Get the Source!</strong>
				<p>Visit <a target="_blank" href="https://handmadehero.org">https://handmadehero.org</a> for more information about Handmade Hero</p>
				<br/>
				<strong>Support the Episode Guide</strong>
				<p><strong><a href="https://handmade.network/m/Miblo">Miblo</a></strong> is currently the sole maintainer of this episode guide. You can see him working live on
				<a class="external" href="http://www.twitch.tv/miblo" target="_blank">Twitch</a>.</p>
			</div>
			<div class="content-block">
				<br/>
				<p><strong>Credits</strong></p>
				<p style="text-align: left; ">
					The detailed episode guides linked to on this page would also not have been possible without the generous historical contributions of time and energy from:
					<ul style="text-align: left;">
						<li>Jace Bennett (<a href="https://twitter.com/jacebennett" target="_blank">@jacebennett</a>),</li>
						<li>Abner Coimbre (<a href="https://twitter.com/AbnerCoimbre" target="_blank">@AbnerCoimbre</a>),</li>
						<li>Matthew VanDevander (<a href="https://twitter.com/mvandevander" target="_blank">@mvandevander</a></li>
						<li>Gustavo Ch&aacute;vez (<a href="https://twitter.com/gusChvz" target="_blank">@gusChvz</a>),</li>
						<li>Kasper Sauramo (<a href="https://twitter.com/KMSchme" target="_blank">@KMSchme</a>),</li>
						<li>Ben Craddock (<a href="https://twitter.com/theinternetftw" target="_blank">@theinternetftw</a>),</li>
						<li>Dustin Specht (<a href="https://twitter.com/Dustin_Specht" target="_blank">@Dustin_Specht</a>),</li>
						<li>Jacob Pike (<a href="https://twitter.com/pikejd" target="_blank">@pikejd</a>),</li>
						<li>Matt Mascarenhas (<a href="https://twitter.com/miblo_" target="_blank">@miblo_</a>),</li>
						<li>Miguel Lech&oacute;n (<a href="https://twitter.com/debiatan" target="_blank">@debiatan</a>),</li>
						<li>Cory Henderlite (<a href="https://twitter.com/effect0r" target="_blank">@effect0r</a>),</li>
						<li>Insofaras (<a href="https://twitter.com/insofaras_" target="_blank">@insofaras_</a>),</li>
						<li>Clay Murray (<a href="https://twitter.com/powerc9000" target="_blank">@powerc9000</a>) and</li>
						<li>Tim Liou (<a href="https://twitter.com/wdliou" target="_blank">@wdliou</a>).</li>
					</ul>
				</p>
				<p>Please take a moment to thank our contributors if you happen to see them on The Twitters!</p>
			</div>
		{{ else if eq .Project.Subdomain "riscy" }}
			<div class="content-block donate">
				<strong>Support the Episode Guide</strong>
				<p><strong><a href="https://handmade.network/m/Miblo">Miblo</a></strong> is currently the sole maintainer of this episode guide. You can see him working live on
				<a class="external" href="http://www.twitch.tv/miblo" target="_blank">Twitch</a>.</p>
			</div>
		{{ end }}
	</div>
</div>
{{ end }}