function getClass(type) {
	switch (type) {
		case "error":
			return ["bg-amber-900", "text-white"];
		case "warning":
			return ["bg-yellow-200", "text-gray-800"];
		case "success":
			return ["bg-green-900", "text-white"];
		default:
			return ["bg-gray-800", "text-white"];
	}
}

htmx.on("toast", (e) => {
	const values = e.detail.value.split("|");
	const type = values[0];
	const message = values[1];

	const template = document.getElementById("toast");
	const toast = template.cloneNode(true);
	const list = document.getElementById("toasts");

	toast.id = ""
	toast.classList.remove("hidden");
	toast.classList.add(...getClass(type));
	toast.innerText = message;

	list.appendChild(toast);
	setTimeout(() => {
		toast.classList.remove("opacity-0");
	}, 0);

	setTimeout(() => {
		toast.classList.add("opacity-0");
		setTimeout(() => {
			list.removeChild(toast);
		}, 250);
	}, 5000);
});