document.addEventListener("DOMContentLoaded", () => {
	// The search widget should only be visible if we're in the options page. Else, we
	// want it hidden.
	if (window.location.pathname.endsWith("options.html")) {
		const searchBar = document.createElement("div");
		searchBar.id = "search-bar";
		searchBar.innerHTML = `
      <input type="text" id="search-input" placeholder="Search options by ID..." />
      <div id="search-results"></div>
    `;

		document.body.prepend(searchBar);

		const dtElements = document.querySelectorAll("dt");
		const ddElements = document.querySelectorAll("dd");

		if (dtElements.length === 0 || ddElements.length === 0) {
			console.warn(
				"No <dt> or <dd> elements found. Ensure your HTML contains the correct structure.",
			);
		}

		// handle input and filter visible options
		document
			.getElementById("search-input")
			.addEventListener("input", (event) => {
				const query = event.target.value.toLowerCase();
				dtElements.forEach((dt, index) => {
					const optionId =
						dt.querySelector("a")?.id.toLowerCase() || "";
					const isMatch = optionId.includes(query);

					// toggle visibility based on the query match
					dt.classList.toggle("hidden", !isMatch);
					ddElements[index]?.classList.toggle("hidden", !isMatch);
				});
			});
	}
});