content.js

const rows = document.querySelectorAll("tr");

rows.forEach(row => {
    if (row.querySelector("td.course_header")) {
        return;
    }

    const uniqueCell = row.querySelector('td[data-th="Unique"] a');
    if (!uniqueCell) {
        return;
    }
    const btn = document.createElement("button");
    btn.textContent = "+";
    btn.className = "watchlist-add-btn";
    btn.style.display = "flex";
    btn.style.justifyContent = "center";  
    btn.style.alignItems = "center";

    const btnContainer = document.createElement("td");
    btnContainer.appendChild(btn);
    row.appendChild(btnContainer);

    btn.addEventListener("click", () => {
        const course = {
            unique: uniqueCell.textContent.trim(),
            days: row.querySelector('td[data-th="Days"]')?.innerText.trim(),
            hours: row.querySelector('td[data-th="Hour"]')?.innerText.trim(),
            room: row.querySelector('td[data-th="Room"]')?.innerText.trim(),
            instructor: row.querySelector('td[data-th="Instructor"]')?.innerText.trim(),
            status: row.querySelector('td[data-th="Status"]')?.innerText.trim(),
            url: window.location.href
        };

        if (btn.textContent === "+") {
            chrome.runtime.sendMessage({action: "AddToWatchlist", course: course});
            btn.textContent = "-";
        }
        else {
            chrome.runtime.sendMessage({action: "RmvFromWatchlist", course: course});
            btn.textContent = "+";
        }
    })
})