{{ template "base.html" . }}

{{ define "extrahead" }}
	{{ range .Screenshots }}
		<link rel="preload" href="{{ . }}" as="image">
	{{ end }}
{{ end }}

{{ define "content" }}
<div class="flex flex-column flex-row-l">
    <div class="
		sidebar flex-shrink-0 self-start-l
		flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
		mw5-l mh3 ml0-ns mb3 overflow-hidden
	">
		<div class="w-100 w5-ns flex-shrink-0 flex justify-center br3 overflow-hidden">
			{{ if .Project.Logo }}
				<img alt="{{ .Project.Name }}" src="{{ .Project.Logo }}">
			{{ else }}
				<div class="bg--dim w-100 aspect-ratio--1x1 relative">
					<div class="aspect-ratio--object flex justify-center items-center f3 b c--dimmest">{{ .Project.Name }}</div>
				</div>
			{{ end }}
		</div>
		<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l overflow-hidden">
			<div class="mb3">
				{{ range $i, $owner := .Owners }}
					<div class="flex mb3 items-center">
						<img class="avatar-icon mr2" src="{{ $owner.AvatarUrl }}" />
						<a class="user-link" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
					</div>
				{{ end }}
			</div>
			<div class="w-100 w-auto-ns w-100-l">
				{{ range .ProjectLinks }}
					<div class="pair flex">
						<div class="key flex-auto flex-shrink-0 mr2">{{ .Name }}</div>
						<div class="value projectlink truncate"><a class="external" href="{{ .Url }}" ><span class="icon-{{ .Icon }}"></span> {{ .LinkText }}</a></div>
					</div>
				{{ end }}
			</div>
		</div>
	</div>
	<div class="flex-grow-1 overflow-hidden">
		{{ with .Screenshots }}
			<div class="carousel-container mw-100 mb3">
				<div class="carousel aspect-ratio aspect-ratio--16x9 overflow-hidden bg--dim br2-ns">
					<div class="dn db-l">
						{{ range $index, $screenshot := . }}
							<div class="carousel-item aspect-ratio--object bg--dim {{ if eq $index 0 }}active{{ end }}">
								<div class="w-100 h-100" style="background:url('{{ $screenshot }}') no-repeat center / contain"></div>
							</div>
						{{ end }}
					</div>
					<div class="db dn-l">
						{{ range $index, $screenshot := . }}
							<div class="carousel-item-small aspect-ratio--object {{ if eq $index 0 }}active{{ end }}">
								<div class="w-100 h-100" style="background:url('{{ $screenshot }}') no-repeat center / contain"></div>
							</div>
						{{ end }}
					</div>
				</div>
				<div class="flex justify-center pv2">
					{{ range $index, $screenshot := . }}
						<div class="carousel-button br-pill w1 h1 mh2 {{ if eq $index 0 }}active{{ end }}" onclick="carouselButtonClick({{ $index }})"></div>
					{{ end }}
				</div>
			</div>
		{{ end }}
		<div class="description ph3 ph0-ns">
			{{ .Project.ParsedDescription }}
		</div>
		{{ with .RecentActivity }}
			<div class="content-block timeline-container ph3 ph0-ns mv4">
				<h2>Recent Activity</h2>
				<div class="timeline">
					{{ range . }}
						{{ template "timeline_item.html" . }}
					{{ end }}
				</div>
			</div>
		{{ end }}
	</div>
</div>
<script>
	const numCarouselItems = {{ len .Screenshots }};

	function activateCarouselItem(i) {
		const items = document.querySelectorAll('.carousel-item');
		items.forEach(item => item.classList.remove('active'));
		items[i].classList.add('active');

		const smallItems = document.querySelectorAll('.carousel-item-small');
		smallItems.forEach(item => item.classList.remove('active'));
		smallItems[i].classList.add('active');

		const buttons = document.querySelectorAll('.carousel-button');
		buttons.forEach(button => button.classList.remove('active'));
		buttons[i].classList.add('active');
	}

	let carouselTimerCurrent = 0;
	const carouselTimer = setInterval(() => {
		if (numCarouselItems === 0) {
			return;
		}

		const next = (carouselTimerCurrent + 1) % numCarouselItems;
		activateCarouselItem(next);
		carouselTimerCurrent = next;
	}, 10000);

	function carouselButtonClick(i) {
		activateCarouselItem(i);
		clearInterval(carouselTimer);
	}
</script>
{{ end }}