document.querySelectorAll('nav ul li a').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    const target = e.target.id.replace('nav-', '') + '-section';
    document.querySelectorAll('main section').forEach(sec => sec.classList.add('hidden'));
    const section = document.getElementById(target);
    if (section) section.classList.remove('hidden');
    if (target == 'project-section') load_card();
  });
});

document.getElementById('login-form')?.addEventListener('submit', function(e) {
  e.preventDefault();
  const username = document.getElementById('username').value;
  alert(`Logging in as ${username}...`);
  // TODO: call backend API for authentication
});

function load_card() {

	const docslist = document.getElementById("docs-list");
	docslist.innerHTML = "";
	const docsitem = document.createElement("div");
	docsitem.innerHTML = `
	<a class="card-body" href="html/SterlingLang.html" target="_blank">
	<h2 class="card-title">Sterling Lang</h2>
	<p class="card-description">Sterling Programming Langage</p>
	</a>
	<a class="card-body" href="html/SterlingOsDesign.html" target="_blank">
	<h2 class="card-title">SterlingOs</h2>
	<p class="card-description">Sterling Operating System Design Documents</p>
	</a>`;
	docslist.appendChild(docsitem);

	fetch("/gitea-repos/")
	.then(res => res.json())
	.then(repos => {
		const list = document.getElementById("repo-list");
		list.innerHTML = ""; // Clear "Loading..."
		repos.forEach(function(repo) {
			const item = document.createElement("");
			item.innerHTML = `
			<strong><a class="card-body" href="${repo.html_url}" target="_blank">
			<h2 class="card-title">${repo.name}</h2>
			<p class="card-description">${repo.description || "No description"}</p>
			</a>`;
			list.appendChild(item);
		});
	})
	.catch(err => console.error("Error fetching repos: ", err));
}

/*
onload
*/

document.addEventListener("DOMContentLoaded", function() {
	const loadingScreen = document.getElementById('loading-screen');

	loadingScreen.addEventListener('click', function() {
		loadingScreen.style.display = 'none';
		const container = document.querySelector(".foreground-container");
		container.classList.remove("hidden");
		container.classList.add("fade-in");
		const footer = document.querySelector(".footer-container")
		footer.classList.remove("hidden");
		footer.classList.add("fade-in");
	});
});