document.addEventListener("DOMContentLoaded", (event) => {
	document.querySelector(".filters .row div").remove();

	const charFilters = document.querySelectorAll(
		'input[type="radio"][name="charFilter"]',
	);

	const detailsField = document.getElementById("finisher-details");

	charFilters[0].checked = true;
	charFilters.forEach(function (item, _) {
		item.addEventListener("input", function () {
			showSelectedFinishers(this);
			detailsField.innerText = "---";
		});
	});

	showSelectedFinishers(charFilters[0]);

	document.querySelectorAll(".finisher").forEach(function (item, _) {
		item.addEventListener("click", function () {
			const goal = item.dataset["goal"];
			detailsField.innerText = goal;
		});
	});
});

function showSelectedFinishers(elem) {
	let name = "";
	if (elem.value === "A") {
		name = "Aqua";
	} else if (elem.value === "V") {
		name = "Ventus";
	} else if (elem.value === "T") {
		name = "Terra";
	}

	document.querySelectorAll("tbody").forEach(function (list, _) {
		list.style.display = "none";
	});

	document.getElementById("finishers" + name).style.display = "contents";
}