document.addEventListener("DOMContentLoaded", e => {
	document.querySelector(".float-info-btn").addEventListener("click", e => {
		if(e.currentTarget.classList.contains("active")) {
			e.currentTarget.classList.remove("active");
			document.querySelector(".info-popup").style.display = "none";
		} else {
			e.currentTarget.classList.add("active");
			document.querySelector(".info-popup").style.display = "block";
		}
	});

	document.querySelector(".info-popup .content").innerHTML = generateHTML(disksSpaceInfo);

});

function generateHTML(data) {
	let html = `<h1 style="color:#7aa2f7;font-size:1rem;letter-spacing:0.08em;margin-bottom:24px;">// disk space</h1>`;

	for (const [disk, info] of Object.entries(data)) {
		if (disk === "summary") continue;

		const pct = parseFloat(info.usedPercentage);
		const barColor = pct > 85 ? "#f7768e" : pct > 60 ? "#e0af68" : "#9ece6a";

		html += `
			<div style="margin-bottom: 28px;">
				<div style="color:#7dcfff;margin-bottom:10px;font-size:0.875rem;">${disk}</div>
				<table border="1" cellspacing="0" cellpadding="0" style="width:100%;text-align:left;border-collapse:collapse;font-size:0.8rem;">
					<tr><th>status</th><td>${info.status}</td></tr>
					<tr><th>total</th><td>${info.total}</td></tr>
					<tr><th>used</th><td>${info.used}</td></tr>
					<tr><th>available</th><td>${info.available}</td></tr>
					<tr><th>used %</th><td style="color:${barColor}">${info.usedPercentage}</td></tr>
				</table>
			</div>
		`;
	}

	if (data.summary) {
		html += `
			<div style="margin-top:24px;padding-top:16px;border-top:1px solid #292e42;font-size:0.8rem;color:#565f89;">
				total available: <span style="color:#9ece6a">${data.summary.totalAvailable}</span>
			</div>
		`;
	}

	return html;
}