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>Disk Space</h1><br>`;

	// Генерация таблицы для каждого диска
	for (const [disk, info] of Object.entries(data)) {
		if (disk === "summary") continue; // Пропустить сводку

		html += `
			<div style="margin-bottom: 20px;">
				<h3>${disk}</h3>
				<table border="1" cellspacing="0" cellpadding="5" style="width: 100%; text-align: left;">
					<tr><th>Status</th><td>${info.status}</td></tr>
					<tr><th>Total Space</th><td>${info.total}</td></tr>
					<tr><th>Used Space</th><td>${info.used}</td></tr>
					<tr><th>Available Space</th><td>${info.available}</td></tr>
					<tr><th>Used Percentage</th><td>${info.usedPercentage}</td></tr>
				</table>
			</div>
		`;
	}

	// Добавление сводки
	if (data.summary) {
		html += `
			<div style="margin-top: 20px; padding: 10px; border-top: 2px solid #000;">
				<h3>Summary</h3>
				<p>Total Available Space: <strong>${data.summary.totalAvailable}</strong></p>
			</div>
		`;
	}

	return html;
}