// Delete Project Functionality
// Copy below into javascript:
  deleteProjectBtn.addEventListener("click", () => {
    const selectedProject = projectDropdown.value;
    if (!selectedProject) {
      alert("Please select a project to delete first.");
      return;
    }

    if (confirm(`Are you sure you want to delete project "${selectedProject}"? This cannot be undone.`)) {
      deleteProject(currentUser.uid, selectedProject);
    }
  });

  async function deleteProject(uid, projectName) {
    try {
      const projectRef = db.collection("users").doc(uid)
        .collection("projects").doc(projectName);

      await projectRef.delete();

      alert(`Project "${projectName}" deleted successfully.`);

      // Refresh the dropdown
      populateProjectDropdown(uid);

      // Hide navigation buttons since project was deleted
      document.getElementById("highlightRandomBtn").classList.add("hidden");
      document.getElementById("prevHighlightBtn").classList.add("hidden");
      document.getElementById("nextHighlightBtn").classList.add("hidden");

    } catch (err) {
      console.error("Error deleting project:", err);
      alert("Failed to delete project: " + err.message);
    }
  }

// Copy below into CSS
 #deleteProjectBtn {
      background-color: #f44336;
      color: white;
      margin-top: 10px;
    }

    #deleteProjectBtn:hover {
      background-color: #d32f2f;
    }

// Copy below into HTML
<button id="deleteProjectBtn">Delete Project</button>