function populateServerSelectionList() {
	const servers = credentials.getServers();

	let nodes = [];
	for (let server of servers) {
		const li = document.createElement("li");
		const endpoint = humanReadableEndpoint(server.endpoint);
		li.innerText = `${server.login_id}@${endpoint} `;

		const logoutButton = document.createElement("button");
		logoutButton.className = "logout";
		logoutButton.innerText = "Log out";
		logoutButton.addEventListener("click", e => logOut(endpoint, e.currentTarget));

		li.appendChild(logoutButton);
		nodes.push(li);
	}
	byId("server_selection_list").innerHTML = "";
	byId("server_selection_list").append(...nodes);
}

function populateChannelList() {
	async function addChannelItems(endpoint) {
		const client = createClient(endpoint);

		const teams = await client.myTeams();
		console.log(teams);

		for (let team of teams) {
			let nodes = [];
			const channels = await client.myChannels(team.id);
			console.log(channels);
			for (let channel of channels) {
				const li = document.createElement("li");
				const a = document.createElement("a");
				a.href = "javascript:void(0)";
				const titleAndElements = channelNameElements(team, channel);
				if (!titleAndElements) continue;
				a.title = titleAndElements[0];
				a.append(...titleAndElements[1]);

				a.addEventListener("click", () => switchToChannel(client, team, channel));

				li.appendChild(a);
				li.dataset["id"] = channel.id;
				nodes.push(li);
			}
			byId("channel_list").append(...nodes);
		}
	}

	const servers = credentials.getServers();

	byId("channel_list").innerHTML = "";
	for (let server of servers) {
		addChannelItems(server.endpoint);
	}
}


function populateChannelContents(contents) {
	byId("channel_contents").innerHTML = "";

	let nodes = [];
	for (let id of contents.order) {
		const post = contents.posts[id];

		const isThreadReply = !!post.parent_id;

		const messageDiv = document.createElement("div");
		messageDiv.className = "message";
		messageDiv.innerText = post.message;

		const createAt = new Date(post.create_at);
		const createAtDiv = document.createElement("time");
		createAtDiv.className = "create_at";
		createAtDiv.innerText = createAt.toLocaleString("nl-BE");
		createAtDiv.dateTime = createAt.toISOString();

		const authorDiv = document.createElement("div");
		authorDiv.className = "author";
		authorDiv.innerText = `Auteur: ${post.user_id}`;

		const postDiv = document.createElement("div");
		postDiv.className = "post";
		postDiv.dataset["id"] = id;
		postDiv.appendChild(authorDiv);
		postDiv.appendChild(createAtDiv);
		postDiv.appendChild(messageDiv);

		nodes.unshift(postDiv);
	}

	byId("channel_contents").append(...nodes);
	checkScrolledToBottom();
}


function updateComposeHeight() {
	byId("compose").style.height = "";
	byId("compose").style.height = (byId("compose").scrollHeight + 1) + "px";
}
byId("compose").addEventListener("input", updateComposeHeight);

function checkScrolledToBottom() {
	const el = byId("channel_contents_wrapper");

	const scrolledTo = el.clientHeight + el.scrollTop;
	const scrollHeight = el.scrollHeight
	const atBottom = scrolledTo >= scrollHeight;
	el.className = atBottom ? "" : "not-at-bottom";
}
byId("channel_contents_wrapper").addEventListener("scroll", checkScrolledToBottom);