hmn/src/templates/src/user_profile.html

{{ template "base.html" . }}

{{ 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">
			<img class="br3" alt="{{ .ProfileUser.Name }}'s Avatar" src="{{ .ProfileUser.AvatarUrl }}">
		</div>
		<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l flex flex-column items-start overflow-hidden">
			{{ with or .ProfileUser.Bio .ProfileUser.Blurb }}
				<div class="mb3">{{ . }}</div>
			{{ end }}
			<div class="w-100 w-auto-ns w-100-l">
				{{ if .ProfileUser.Email }}
					<div class="pair flex">
						<div class="key flex-auto flex-shrink-0 mr2">Email</div>
						<div class="value projectlink truncate">{{ .ProfileUser.Email }}</div>
					</div>
				{{ end }}
				{{ range .ProfileUserLinks }}
					<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 class="pair flex">
					<div class="key flex-auto flex-shrink-0 mr2">Member since</div>
					<div class="value projectlink truncate">{{ absoluteshortdate .ProfileUser.DateJoined }}</div>
				</div>
			</div>
		</div>
	</div>
    <div class="flex-grow-1 overflow-hidden">
		{{ with .ProfileUserProjects }}
			<div class="content-block ph3 ph0-ns">
				<h2>Projects</h2>
				{{ range . }}
					<div class="mv3">
						{{ template "project_card.html" projectcarddata . "" }}
					</div>
				{{ end }}
			</div>
		{{ end }}
		{{ if gt (len .TimelineItems) 0 }}
			<div class="content-block timeline-container ph3 ph0-ns">
				<h2>Recent Activity</h2>
				<div class="timeline-filters mb2">
					{{/*
					{{ if gt .NumForums 0 }}
						<div class="dib filter forums mr2"><input data-type="forums" class="v-mid mr1" type="checkbox" id="timeline-checkbox-forums" checked /><label class="v-mid" for="timeline-checkbox-forums">Forums (<span class="count">{{ .NumForums }}</span>)</label></div>
					{{ end }}
					{{ if gt .NumBlogs 0 }}
						<div class="dib filter blogs mr2"><input data-type="blogs" class="v-mid mr1" type="checkbox" id="timeline-checkbox-blogs" checked /><label class="v-mid" for="timeline-checkbox-blogs">Blogs (<span class="count">{{ .NumBlogs }}</span>)</label></div>
					{{ end }}
					{{ if gt .NumSnippets 0 }}
						<div class="dib filter snippets mr2"><input data-type="snippets" class="v-mid mr1" type="checkbox" id="timeline-checkbox-snippets" checked /><label class="v-mid" for="timeline-checkbox-snippets">Snippets (<span class="count">{{ .NumSnippets }}</span>)</label></div>
					{{ end }}
					*/}}
				</div>
				<div class="timeline">
					{{ range .TimelineItems }}
						{{ template "timeline_item.html" . }}
					{{ end }}
				</div>
			</div>
		{{ end }}
	</div>
</div>
<script>
	const filterTitles = [];
	for (const item of document.querySelectorAll('.timeline-item')) {
		const title = item.getAttribute('data-filter-title');
		if (title && !filterTitles.includes(title)) {
			filterTitles.push(title);
		}
	}
	filterTitles.sort();

	function itemsForFilterTitle(title) {
		return document.querySelectorAll(`.timeline-item[data-filter-title="${title}"]`);
	}

	const filters = document.querySelector('.timeline-filters');

	for (const title of filterTitles) {
		const container = document.createElement("div");
		container.className = "dib filter mr2";

		const id = `timeline-checkbox-${title.replaceAll(/\s/g, '-')}`;

		const input = document.createElement("input");
		input.className = "v-mid mr1";
		input.type = "checkbox";
		input.id = id;
		input.checked = true;
		input.addEventListener("change", e => {
			for (const item of itemsForFilterTitle(title)) {
				if (e.target.checked) {
					item.style.removeProperty("display");
				} else {
					item.style.setProperty("display", "none")
				}
			}
		});
		container.appendChild(input);

		const label = document.createElement("label");
		label.className = "v-mid";
		label.htmlFor = id;
		label.innerText = `${title} (${itemsForFilterTitle(title).length})`;
		container.appendChild(label);

		filters.appendChild(container);
	}
</script>
{{ end }}