const reference = document.getElementById("reference");
const contributionsList = document.getElementById("contributions");

const pagedjs = document.createElement('script')
pagedjs.src = 'https://unpkg.com/pagedjs/dist/paged.polyfill.js'


window.addEventListener('load',()=>{
	fetchContents()
	document.getElementsByTagName('head')[0].appendChild(pagedjs)
})



function fetchContents(){
	 fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions")
		.then((response) => response.json())
		.then((data) => populateContributions(data));
}

function populateContributions(contributions) {
	contributions.forEach((contribution) => {
		contributionsList.appendChild(createSection(contribution));
	});
}

function createSection(contribution) {
	let section = reference.cloneNode(true);
	section.id = contribution.moment;
	section.querySelector(".moment").innerHTML = contribution.moment;
	section.querySelector(".title").innerHTML = contribution.title;
	section.querySelector(".author").innerHTML = contribution.author;
	section.querySelector(".description").innerHTML = contribution.description;
	section.querySelector(".content").innerHTML = contribution.content_html;
	return section;
}