{{ template "base.html" . }}

{{ define "content" }}
	<div class="content-block no-bg-image">
		{{ with .CarouselProjects }}
			<div class="carousel-container mw-100 mv2 mv3-ns margin-center">
				<div class="carousel pa3 h5 overflow-hidden bg--dim br2-ns">
					<div class="dn db-l"> <!-- desktop carousel -->
						{{ range $index, $project := . }}
							<div class="carousel-item flex pa3 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="db dn-l"> <!-- mobile/tablet carousel -->
						{{ range $index, $project := . }}
							<div class="carousel-item-small {{ if eq $index 0 }}active{{ end }}">
								{{ template "project_card.html" projectcarddata $project "h-100" }}
							</div>
						{{ end }}
					</div>
				</div>
				<div class="flex justify-center pv2">
					{{ range $index, $project := . }}
						<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="flex flex-column flex-row-l mv3 items-start">
			<div class="bg--dim-ns br2">
				<div class="clear"></div>
				<div class="optionbar pv2 ph3">
					<a href="{{ .ProjectAtomFeedUrl }}"><span class="icon big">4</span> RSS Feed &ndash; New Projects</span></a>
					{{ template "pagination.html" .Pagination }}
				</div>

				<div class="projectlist ph3">
					{{ range .Projects }}
						<div class="mv3">
							{{ template "project_card.html" projectcarddata . ""}}
						</div>
					{{ 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>
			<div class="w-100 w-40-l ph3 ph0-ns flex-shrink-0">
				<div class="ml3-l mt3 mt0-l pa3 bg--dim br2">
					{{ if not .UserPendingProject }}
						<div class="content-block new-project p-spaced">
							<h2>Project submissions are closed</h2>
							<p>
							We are reworking the way we approach projects on the network. In the meantime feel free to share your work on the <a href="{{ .WIPForumUrl }}">forums</a> or on our <a href="https://discord.gg/hxWxDee">Discord</a>.
							</p>
						</div>
					{{ else }}
						<div class="content-block single">
							<h2>Project pending</h2>
							<p>Thanks for considering us as a home for<br /><a href="{{ .UserPendingProject.Url }}">{{ .UserPendingProject.Name }}</a>!</p>
							<br />
							{{ if .UserPendingProjectUnderReview }}
								<p>We see it's ready for review by an administrator, great! We'll try and get back to you in a timely manner.</p>
							{{ else }}
								<p>When you're ready for us to review it, let us know using the checkbox on {{ .UserPendingProject.Name }}'s profile editor.</p>
							{{ end }}
						</div>
					{{ end }}
					{{ if .UserApprovedProjects }}
						<div class="content-block single projectlist">
							{{ if .UserPendingProject }}
								<h2>Your other projects</h2>
							{{ else }}
								<h2>Your projects</h2>
							{{ end }}
							{{ range .UserApprovedProjects }}
								<div class="mv3">
									{{ template "project_card.html" projectcarddata . "" }}
								</div>
							{{ end }}
						</div>
					{{ end }}
				</div>
			</div>
		</div>
	</div>

	<script>
		const numCarouselItems = {{ len .CarouselProjects }};

		function activateCarousel(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(() => {
			const next = (carouselTimerCurrent + 1) % numCarouselItems;
			activateCarousel(next);
			carouselTimerCurrent = next;
		}, 10000);

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