{{ define "main" }}
<main class="main-content search-results">
  <header><h1>Search Results</h1></header>
  <div id="search-results"><p>Please type a query in the nav above and press Enter.</p></div>
</main>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const params = new URLSearchParams(location.search);
  const q = (params.get("q") || "").trim().toLowerCase();
  const resultsDiv = document.getElementById("search-results");
  if (!q) return;
  fetch("{{ "index.json" | relURL }}")
    .then(r => r.json())
    .then(posts => {
      const hits = posts.filter(p =>
        p.title.toLowerCase().includes(q) ||
        p.summary.toLowerCase().includes(q) ||
        p.content.toLowerCase().includes(q)
      );
      if (!hits.length) {
        resultsDiv.innerHTML = `<p>No results found for “${q}”</p>`;
        return;
      }
      resultsDiv.innerHTML = `<ul class="post-list">` +
        hits.map(item => {
          const snippetSource = item.summary + "\n" + item.content;
          const idx = snippetSource.toLowerCase().indexOf(q);
          const start = Math.max(0, idx - 50);
          let snippet = snippetSource.substring(start, start + 200);
          snippet = snippet.replace(new RegExp(q, "gi"), match => `<mark>${match}</mark>`);
          return `<li>
            <h2 class="post-title"><a href="${item.relPermalink}">${item.title}</a></h2>
            <div class="post-meta">${item.date ? new Date(item.date).toLocaleDateString("en-US", { year: 'numeric', month: 'short', day: 'numeric' }) : ""}</div>
            <p>${snippet}…</p>
          </li>`;
        }).join("") +
        `</ul>`;
    });
});
</script>
{{ end }}