document.addEventListener("DOMContentLoaded", () => {
    const title = document.querySelector("[data-alert-detail-title]");
    const description = document.querySelector("[data-alert-detail-description]");
    const metadata = document.querySelector("[data-alert-detail-metadata]");

    document.querySelectorAll("[data-alert-row]").forEach((row) => {
        row.addEventListener("click", (event) => {
            if (event.target.closest("button, input, a")) return;
            document.querySelectorAll("[data-alert-row].is-selected").forEach((item) => item.classList.remove("is-selected"));
            row.classList.add("is-selected");
            if (title) title.textContent = row.dataset.alertTitle || "";
            if (description) description.textContent = row.dataset.alertDescription || "";
            if (metadata) metadata.textContent = row.dataset.alertMetadata || "{}";
        });
    });
});