function populateServerSelectionList() {
	const servers = localstorage_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(server.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(client) {
		const {teams, channels, unread} = await client.channelStore.get();
		const users = await client.getUsers();

		let nodes = [];

		let sortedChannels = Object.values(channels).sort((a, b) =>
			b["last_post_at"] - a["last_post_at"]
		);

		for (const channel of sortedChannels) {
			const team = teams[channel["team_id"]];

			const chanUnread = unread[channel.id].unread;
			const chanMentions = unread[channel.id].mentions;

			const li = document.createElement("li");
			const a = document.createElement("a");
			a.href = "javascript:void(0)";
			const titleAndElements = channelNameElements(team, channel, client.me["id"], users);
			if (!titleAndElements) continue;
			a.title = titleAndElements[0];
			a.append(...titleAndElements[1]);

			a.append(document.createTextNode(" "));
			const msgCountGem = document.createElement("span");
			msgCountGem.className = "msg_count_gem";
			msgCountGem.innerText = chanMentions;
			if (chanMentions > 0) msgCountGem.style.display = "inline-block";
			a.append(msgCountGem);

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

			li.appendChild(a);
			li.dataset["id"] = channel.id;
			li.dataset["server"] = client.endpoint;

			const curChan = currentChannel();
			if (curChan.endpoint === client.endpoint && curChan.channel_id === channel.id) {
				li.className = "active";
			}
			if (chanUnread > 0) {
				li.className += " unread";
			}

			nodes.push(li);
		}
		byId("channel_list").append(...nodes);
	}

	byId("channel_list").innerHTML = "";
	const endpoints = localstorage_credentials.getServers().map(server => server.endpoint);
	for (let client of mm_client.getOrCreateMultiple(endpoints)) {
		addChannelItems(client);
	}
}

function updateUnreadCount(el, unread, mentions) {
	let msgCountGem = el.querySelector('.msg_count_gem');
	if (mentions > 0) {
		msgCountGem.style.display = "inline-block";
		msgCountGem.innerText = mentions;
	} else {
		msgCountGem.style.display = "none";
	}
	if (unread > 0) {
		addClass(el, "unread");
	} else {
		removeClass(el, "unread");
	}
}

pubsub.subscribe("CHANNEL_UNREAD_UPDATED", ({endpoint, channel_id, unread, mentions}) => {
	for (let el of byId("channel_list").childNodes) {
		if (el.dataset["server"] == endpoint && el.dataset["id"] == channel_id) {
			updateUnreadCount(el, unread, mentions);
		}
	}
});

pubsub.subscribe("CHANNELS_RELOADED", () => {
	populateChannelList();
});

pubsub.subscribe("CHANNEL_LAST_POST_TIME_UPDATED", () => {
	populateChannelList();
});