{{ template "base-2024.html" . }}

{{ define "extrahead" }}
	<style>
		.led {
			aspect-ratio: 1;
			border-radius: 50%;
			border-style: solid;
			border-width: 1.5px;
			display: inline-block;
		}

		.led.yellow {
			background-color: #64501f;
			border-color: #4f3700;
		}

		.led.yellow.on {
			background-color: #fdf2d8;
			border-color: #f9ad04;
			box-shadow: 0 0 7px #ee9e06;
		}

		.admin .cover {
			background: repeating-linear-gradient( -45deg, #ff6c00, #ff6c00 12px, #000000 5px, #000000 25px );
		}
		
	</style>
	<script src="{{ static "js/templates.js" }}"></script>
{{ end }}

{{ define "content" }}
<div class="mw-site pt3 center flex flex-column flex-row-l g4 g3-ns">
	<div class="
		flex-shrink-0
		mw5-l ph3 ph0-l overflow-hidden
		flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
	">
		<div class="w-100 w5-ns flex-shrink-0 flex justify-center items-center ba" style="aspect-ratio: 1 / 1;">
			<img alt="{{ .ProfileUser.Name }}'s Avatar" src="{{ .ProfileUser.AvatarUrl }}">
		</div>
		<div class="f3 mt1 truncate">{{ .ProfileUser.Name }}</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 }}
			{{ if .FollowUrl }}
				<a id="follow_link" class="db" href="javascript:;">{{ if .Following }}Unfollow{{ else }}Follow{{ end }}</a>
				<script>
					const followLink = document.getElementById("follow_link");
					let following = {{ .Following }};
					followLink.addEventListener("click", async function() {
						followLink.disabled = true;

						let formData = new FormData();
						formData.set("csrf_token", "{{ .Session.CSRFToken }}");
						formData.set("user_id", "{{ .ProfileUser.ID }}");
						if (following) {
							formData.set("unfollow", "true");
						}
						let result = await fetch("{{ .FollowUrl }}", {
							method: "POST",
							body: formData,
							redirect: "error",
							credentials: "include",
						});
						if (result.ok) {
							following = !following;
							followLink.textContent = (following ? "Unfollow" : "Follow");
						}
						
						followLink.disabled = false;
					});
				</script>
			{{ 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> {{ .ServiceName }}</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">{{ absoluteshortdateabbrv .ProfileUser.DateJoined }}</div>
				</div>
			</div>
		</div>
		{{ if .User }}
			{{ if .User.IsStaff }}
				<div class="hmn-form mt3 mt0-ns mt3-l ml3-ns ml0-l flex flex-column g2 items-start bg1 pa2 admin">
					<div class="flex flex-row w-100 items-center">
						<b class="flex-grow-1">Admin actions</b>
						<div class="led yellow" style="height: 12px; margin: 3px;"></div>
						<a href="javascript:;" class="unlock">Unlock</a>
					</div>
					<div class="relative w-100">
						<div class="bg3 cover absolute w-100 h-100 br2"></div>
						<form id="admin_set_options_form" class="flex flex-column g3" method="POST" action="{{ .AdminSetOptionsUrl }}">
							{{ csrftoken .Session }}
							<input type="hidden" name="user_id" value="{{ .ProfileUser.ID }}" />
							<input type="hidden" name="username" value="{{ .ProfileUser.Username }}" />
							<div class="input-group">
								<label for="user_status">User status:</label>
								<select id="user_status" name="status">
									<option value="inactive" {{ if eq .ProfileUser.Status 1 }}selected{{ end }}>Brand new</option>
									<option value="confirmed" {{ if eq .ProfileUser.Status 2 }}selected{{ end }}>Email confirmed</option>
									<option value="approved" {{ if eq .ProfileUser.Status 3 }}selected{{ end }}>Admin approved</option>
									<option value="banned" {{ if eq .ProfileUser.Status 4 }}selected{{ end }}>Banned</option>
								</select>
								<div class="c--dim f7">Only sets status. Doesn't delete anything.</div>
							</div>
							<div class="input-group">
								<label for="edu_role">Education role:</label>
								<select id="edu_role" name="edu_role">
									<option value="none" {{ if not .ProfileUser.IsEduTester }}selected{{ end }}>None</option>
									<option value="beta" {{ if and .ProfileUser.IsEduTester (not .ProfileUser.IsEduAuthor) }}selected{{ end }}>Beta Tester</option>
									<option value="author" {{ if .ProfileUser.IsEduAuthor }}selected{{ end }}>Author</option>
								</select>
							</div>
							<div class="input-group">
								<div>
									<input id="featured" name="featured" type="checkbox" {{ if .ProfileUser.Featured }}checked{{ end }} />
									<label for="featured">Featured</label>
								</div>
							</div>
							<div class="input-group">
								<input class="btn-primary" type="submit" value="Save" />
							</div>
						</form>
						<div class="mt4 input-group">
							<label for="admin_nuke_form">Danger zone:</label>
							<form id="admin_nuke_form" method="POST" action="{{ .AdminNukeUrl }}">
								{{ csrftoken .Session }}
								<input type="hidden" name="user_id" value="{{ .ProfileUser.ID }}" />
								<input type="hidden" name="username" value="{{ .ProfileUser.Username }}" />
								<input type="submit" value="Nuke posts" />
							</form>
						</div>
					</div>
					<script>
						let unlockEl = document.querySelector(".admin .unlock");
						let adminUnlockLed = document.querySelector(".admin .led");
						let adminUnlocked = false;
						let panelEl = document.querySelector(".admin .cover");
						unlockEl.addEventListener("click", function() {
							adminUnlocked = true;
							adminUnlockLed.classList.add("on");
							panelEl.style.display = "none";
						});

						document.querySelector("#admin_set_options_form").addEventListener("submit", function(ev) {
							if (!adminUnlocked) {
								ev.preventDefault();
							}
						});

						document.querySelector("#admin_nuke_form").addEventListener("submit", function(ev) {
							if (!adminUnlocked) {
								ev.preventDefault();
							}
						});
					</script>
				</div>
			{{ end }}
		{{ end }}
	</div>
    <div class="flex-grow-1 overflow-hidden flex flex-column g3">
		{{ if or .OwnProfile .ProfileUserProjects }}
			<div class="ph3 ph0-l">
				<h2 class="mb2">{{ if .OwnProfile }}My {{ end }}Projects</h2>
				<div class="flex flex-column g2">
					{{ range .ProfileUserProjects }}
						{{ template "project_card.html" . }}
					{{ end }}
				</div>
				{{ if .OwnProfile }}
					{{ if .CanAddProject }}
						<a href="{{ .NewProjectUrl }}" class="button submit pv2 ph3">Add New Project</a>
					{{ else }}
						<span class="c--dim i">You have reached the maximum number of personal projects.</span>
					{{ end }}
				{{ end }}
			</div>
		{{ end }}
		{{ if or .OwnProfile (gt (len .TimelineItems) 0) }}
			<div class="timeline-container ph3 ph0-l flex flex-column g2">
				<div class="flex flex-column g1">
					<div class="flex flex-row items-center">
						<h2 id="recent">Recent Activity</h2>
						<div class="flex-grow-1"></div>
						{{ if .OwnProfile }}
							<a href="javascript:;" class="button submit create_snippet_link button">Add Snippet</a>
						{{ end }}
					</div>
					<div class="timeline-filters f6"></div>
				</div>
				<div class="timeline">
					{{ range .TimelineItems }}
						{{ template "timeline_item.html" . }}
					{{ end }}
				</div>
			</div>
		{{ end }}
	</div>
</div>

{{ if .User }}
	{{ template "snippet_edit.html" . }}
	<script>
		const userName  = "{{ .User.Name }}";
		const userAvatar = "{{ .User.AvatarUrl }}";
		const userUrl = "{{ .User.ProfileUrl }}";


		{{ if .OwnProfile }}
			document.querySelector(".create_snippet_link")?.addEventListener("click", function() {
				let snippetEdit = makeSnippetEdit(userName, userAvatar, userUrl, new Date(), "", null, [], null, null, null);
				document.querySelector(".timeline").insertBefore(snippetEdit.root, document.querySelector(".timeline").children[0]);
				document.querySelector(".create_snippet_link")?.remove();
			});
		{{ end }}

		document.querySelector(".timeline").addEventListener("click", function(ev) {
			if (ev.target.classList.contains("edit")) {
				let parent = ev.target.parentElement;
				while (parent && !parent.classList.contains("timeline-item")) {
					parent = parent.parentElement;
				}
				if (parent && parent.classList.contains("timeline-item")) {
					editTimelineSnippet(parent, null);
				}
			}
		});
	</script>
{{ end }}
<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 }}