{{ define "main" }}
<h1>Search Results</h1>

<!-- Spinner -->
<div id="loading-spinner" style="text-align:center;margin: 2em 0;">
  <div style="border: 4px solid #ccc; border-top: 4px solid #0095d5; border-radius: 50%; width: 36px; height: 36px; animation: spin 1s linear infinite; margin: 0 auto;"></div>
  <div>Searching...</div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<ul id="results">

</ul>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const spinner = document.getElementById("loading-spinner");
    const results = document.getElementById("results");

    const observer = new MutationObserver((mutationsList, observer) => {
      console.log("Mutation observed. Hiding spinner.");
      if (spinner) {
        spinner.style.display = "none";
      }
      observer.disconnect(); // only once
    });

    if (results) {
      observer.observe(results, { childList: true, subtree: true });
      console.log("Started observing #results...");
    }
  });
</script>


{{ end }}