const table = document.getElementById("table");

fetch("./cms.json")
	.then((response) => {
		return response.json();
	})
	.then((data) => populateContents(data));

function populateContents(data) {
	data.projects.reverse().forEach((project) => addRow(project));
}

function addRow(project) {
	let row = document.createElement("tr");

	let title = document.createElement("td");
	title.classList.add("title");
	row.appendChild(title);

	let titleUrl = document.createElement("a");
	titleUrl.href = project.url;
	titleUrl.innerHTML = project.title;
	title.appendChild(titleUrl);

	let links = document.createElement("td");
	links.classList.add("links");
	if (project.pad) {
		let padLink = document.createElement("a");
		padLink.href = project.pad;
		padLink.innerHTML = "pad";
		links.appendChild(padLink);
	}
	if (project.git) {
		let gitLink = document.createElement("a");
		gitLink.href = project.git;
		gitLink.innerHTML = "git";
		links.appendChild(gitLink);
	}
	if (project.links.length) {
		project.links.forEach((url) => {
			let link = document.createElement("a");
			link.href = url.url;
			link.innerHTML = url.title;
			links.appendChild(link);
		});
	}
	row.appendChild(links);

	let categories = document.createElement("td");
	categories.classList.add("categories");
	project.categories.forEach((tag) => {
		let category = document.createElement("span");
		category.classList.add("tag");
		category.innerHTML = tag;
		categories.appendChild(category);
	});
	row.appendChild(categories);

	let date = document.createElement("td");
	date.classList.add("date");
	date.innerHTML = project.date;
	row.appendChild(date);

	table.appendChild(row);
}