{{ template "base.html" . }}

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

{{ define "all_projects" }}
	<div>
		{{ with .OfficialProjects }}
			<div class="carousel-container project-carousel mw-100 mv2 mv3-ns margin-center dn db-ns">
				<div class="carousel pa3 h5 overflow-hidden bg--dim br2-ns">
					{{ range $index, $project := . }}
						<div class="carousel-item flex pv3 pl3 w-100 h-100 bg--dim items-center {{ if eq $index 0 }}active{{ end }}">
							<div class="flex-grow-1 pr3 relative flex flex-column h-100 justify-center">
								<a href="{{ $project.Url }}">
									<h3>{{ $project.Name }}</h3>
								</a>
								<div class="carousel-description">
									{{ $project.ParsedDescription }}
								</div>
								<div class="carousel-fade"></div>
							</div>
							<div class="flex-shrink-0 order-0 order-1-ns">
								<a href="{{ $project.Url }}">
									<div class="image bg-center cover w5 h5 br2" style="background-image:url({{ $project.Logo }})" ></div>
								</a>
							</div>
						</div>
					{{ end }}
				</div>
				<div class="carousel-buttons pv2"></div>
			</div>
		{{ end }}
		<div class="flex flex-column g3">
			{{ if .OfficialProjects }}
				<div class="ph3 pt3 bg--dim br2 flex flex-column">
					<h2>Official Projects</h2>
					<p>These projects are boop boop hahahaa:</p>
					<div class="grid grid-1 grid-2-ns g3">
						{{ range .OfficialProjects }}
							{{ template "project_card.html" projectcarddata . "" }}
						{{ end }}
					</div>
					<a href="{{ .OfficialProjectsLink }}" class="pa3 tc">See more »</a>
				</div>
			{{ end }}
			{{ if .PersonalProjects }}
				<div class="ph3 pt3 bg--dim br2 flex flex-column">
					<h2>Personal Projects</h2>
					<p>Many community members have projects of their own. Here's a few:</p>
					<div class="grid grid-1 grid-2-ns g3">
						{{ range .PersonalProjects }}
							{{ template "project_card.html" projectcarddata . "" }}
						{{ end }}
					</div>
					<a href="{{ .PersonalProjectsLink }}" class="pa3 tc">See more »</a>
				</div>
			{{ end }}
			{{ if .CurrentJamProjects }}
				<div class="ph3 pt3 bg--dim br2 flex flex-column">
					<h2>JAM! NOWS!</h2>
					<p>wowowowow</p>
					<div class="grid grid-1 grid-2-ns g3">
						{{ range .CurrentJamProjects }}
							{{ template "project_card.html" projectcarddata . "" }}
						{{ end }}
					</div>
					<a href="{{ .CurrentJamLink }}" class="pa3 tc">See more »</a>
				</div>
			{{ end }}
			{{ if .PreviousJamProjects }}
				<div class="ph3 pt3 bg--dim br2 flex flex-column">
					<h2>JAM! THENS!</h2>
					<p>nonononoono</p>
					<div class="grid grid-1 grid-2-ns g3">
						{{ range .PreviousJamProjects }}
							{{ template "project_card.html" projectcarddata . "" }}
						{{ end }}
					</div>
					<a href="{{ .PreviousJamLink }}" class="pa3 tc">See more »</a>
				</div>
			{{ end }}
		</div>
	</div>

	<script>
		initCarousel(document.querySelector('.project-carousel'), {
			durationMS: 10000,
		});
	</script>
{{ end }}

{{ define "single_category" }}
	<div class="bg--dim-ns br2">
		<div class="clear"></div>
		<div class="optionbar pv2 ph3">
			<div class="options"></div>
			<div class="options">
				{{ template "pagination.html" .Pagination }}
			</div>
		</div>

		<div class="projectlist pa3 grid grid-1 grid-2-ns g3">
			{{ range .PageProjects }}
				{{ template "project_card.html" projectcarddata . "" }}
			{{ end }}
		</div>

		<div class="optionbar bottom pv2 ph3">
			<div class="options order-1"></div>
			<div class="options order-0 order-last-ns">{{ template "pagination.html" .Pagination }}</div>
		</div>
	</div>
{{ end }}

{{ define "content" }}
	{{ if .AllProjects }}
		{{ template "all_projects" . }}
	{{ else }}
		{{ template "single_category" . }}
	{{ end }}
{{ end }}