function getClass(type) {
	switch (type) {
		case "error":
			return "alert-error";
		case "warning":
			return "alert-warning";
		case "success":
			return "alert-success";
		// case "info":
		default:
			return "alert-info";
	}
}

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 parent = document.getElementById("toasts");

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

	parent.appendChild(toast);

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