{{ template "jam_2024_learning_base.html" . }}

{{ define "content-top" }}
<div class="mw7 margin-center">
    <div class="flex flex-column pv4 tc">
		<img class="jam-logo margin-center" src="{{ static "learningjam2024/logo.svg" }}">
		<div class="margin-center mt3 mt4-ns mb4">
			<div class="jam-title mb3">Learning Jam</div>
			<div class="flex flex-column flex-row-ns justify-between lh-solid g3 g0-ns">
				<div>
					<div class="fw7 f3 mb1">Learn</div>
					<div class="fw3 f4">March 15-17, 2024</div>
				</div>
				<div>
					<div class="fw7 f3 mb1">Share</div>
					<div class="fw3 f4">March 22-24, 2024</div>
				</div>
			</div>
		</div>
		<div class="flex g3 justify-center">
			{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }}
				{{ if .SubmittedProjectUrl }}
					<a class="btn--jam" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
				{{ else }}
					<a class="btn--jam" href="{{ .ProjectSubmissionUrl }}">Create your project</a>
				{{ end }}
			{{ end }}
			<a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a>
		</div>
	</div>
</div>
{{ end }}

{{ define "content" }}
<div class="mw7 margin-center flex flex-column">
	<div class="ph3 pv4 bb b--rich-gray">
		<h2 class="c--theme-gradient-light">Recent activity</h2>
		<div class="flex flex-column g2">
			{{ if .TimelineItems }}
				{{ range .TimelineItems }}
					<div class="flex flex-column g2 bg--rich-gray pa3">
						<div class="flex flex-row g2">
							{{ if .OwnerAvatarUrl }}
								<a class="flex flex-shrink-0 br-100 square items-center justify-center overflow-hidden bg--gray" href="{{ .OwnerUrl }}">
									<img class="w2" src="{{ .OwnerAvatarUrl }}" />
								</a>
							{{ end }}
							<div class="flex flex-column">
								<div class="fw6">{{ .OwnerName }}</div>
								<div class="f7">{{ timehtml (relativedate .Date) .Date }}</div>
							</div>
						</div>
						{{ if .Description }}
							<div>{{ trim .Description }}</div>
						{{ end }}
						{{ range .EmbedMedia }}
							<div class="flex flex-column {{ if eq .Type mediaembed }}wide-screen{{ end }} justify-stretch iframe-fill">
								{{ if eq .Type mediaimage }}
									<img src="{{ .AssetUrl }}">
								{{ else if eq .Type mediavideo }}
									{{ if .ThumbnailUrl }}
										<video src="{{ .AssetUrl }}" poster="{{ .ThumbnailUrl }}" preload="none" controls>
									{{ else }}
										<video src="{{ .AssetUrl }}" preload="metadata" controls>
									{{ end }}
								{{ else if eq .Type mediaaudio }}
									<audio src="{{ .AssetUrl }}" controls>
								{{ else if eq .Type mediaembed }}
									{{ .EmbedHTML }}
								{{ else }}
									<div class="">
										<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>
									</div>
								{{ end }}
							</div>
						{{ end }}
					</div>
				{{ end }}
			{{ else }}
				Be the first!
			{{ end }}
		</div>
	</div>
	<div>
		<div class="mv5 h3 fill-current">
			<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
		</div>
	</div>
</div>
{{ end }}