package web

templ HelloForm() {
	@Base() {
		<div id="search-container">
			<input class="bg-gray-200 text-black p-2 border border-gray-400 rounded-lg" id="search_term" name="search_term" type="text" hx-post="/find" hx-trigger="keyup changed delay:0.25s" hx-target="#games-container"/>
			<button type="button" class="bg-orange-500 hover:bg-orange-700 text-white py-2 px-4 rounded" id="clear" name="clear">Clear</button>
		</div>
		<div id="games-container"></div>
		<script>
			document.addEventListener('readystatechange', () => {    
				if (document.readyState == 'complete') {
					htmx.ajax('POST', '/find', '#games-container');
					document.getElementById("search_term").focus();
				}
			});
			document.getElementById("clear").addEventListener("click", function (event) {
				document.getElementById("search_term").value = "";
				htmx.ajax('POST', '/find', '#games-container');
				document.getElementById("search_term").focus();
			});
		</script>
	}
}

templ FoundGames(games []string) {
	for _, game := range games {
		<div class="bg-green-100 p-4 shadow-md rounded-lg mt-6">
			<p>{ game }</p>
		</div>
	}
}