document.addEventListener("DOMContentLoaded", () => {
  const rows = Array.from(document.querySelectorAll(".inbox-row"));
  const subject = document.querySelector("[data-reader-subject]");
  const from = document.querySelector("[data-reader-from]");
  const date = document.querySelector("[data-reader-date]");
  const body = document.querySelector("[data-reader-body]");

  if (!rows.length || !subject || !from || !date || !body) return;

  const selectRow = (row) => {
    rows.forEach((item) => item.classList.remove("active"));
    row.classList.add("active");
    subject.textContent = row.dataset.subject || "(no subject)";
    from.textContent = row.dataset.from || "Unknown sender";
    date.textContent = row.dataset.date || "";
    body.textContent = row.dataset.body || "";
  };

  rows.forEach((row) => {
    row.addEventListener("click", () => selectRow(row));
  });

  selectRow(rows[0]);
});

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".password-toggle").forEach((button) => {
    button.addEventListener("click", () => {
      const input = button.parentElement?.querySelector("input");
      if (!input) return;
      const hidden = input.type === "password";
      input.type = hidden ? "text" : "password";
      button.textContent = hidden ? button.dataset.hide : button.dataset.show;
    });
  });
});