{% extends "base.html" %}

{% block content %}
<div class="col-lg-10 mx-auto mt-5">
  <div class="input-group mb-3">
    <input type="text" class="form-control" id="search-input" placeholder="Search blog posts..." aria-label="Search">
    <div class="input-group-append">
      <span class="input-group-text"><i class="fas fa-search"></i></span>
    </div>
  </div>
  <div id="search-results"></div>

  <div class="card-group mt-2">
    {% for post in section.pages %}
      {% include "macros/post-card.html" %}
    {% endfor %}
  </div>
</div>

<script>
  // Simple search using Zola's search index
  const searchInput = document.getElementById('search-input');
  const resultsContainer = document.getElementById('search-results');

  async function initSearch() {
    const response = await fetch('{{ get_url(path="search_index.en.json") }}');
    const searchIndex = await response.json();

    searchInput.addEventListener('input', function(e) {
      const query = e.target.value.toLowerCase();
      if (query.length < 2) {
        resultsContainer.innerHTML = '';
        return;
      }

      const results = searchIndex.filter(item => {
        const title = (item.title || '').toLowerCase();
        const body = (item.body || '').toLowerCase();
        return title.includes(query) || body.includes(query);
      }).slice(0, 10);

      if (results.length === 0) {
        resultsContainer.innerHTML = '<p class="text-muted">No results found.</p>';
        return;
      }

      const html = results.map(r => `
        <div class="mb-2">
          <a href="${r.url}">${r.title}</a>
        </div>
      `).join('');
      resultsContainer.innerHTML = html;
    });
  }

  initSearch();
</script>
{% endblock %}