{# Sphinx Phoebe Theme — Search Results Page #}
{%- extends "layout.html" %}
{% set title = _('Search') %}

{%- block scripts %}
  {{ super() }}
  <script src="{{ pathto('_static/doctools.js', 1) }}"></script>
  <script src="{{ pathto('_static/searchtools.js', 1) }}"></script>
  <script src="{{ pathto('_static/language_data.js', 1) }}"></script>
{%- endblock %}

{% block extrahead %}
  <script src="{{ pathto('searchindex.js', 1) }}" defer></script>
  {{ super() }}
{% endblock %}

{%- block content %}
<div class="cl-search-page">
  <h1 id="search-documentation">{{ _('Search results') }}</h1>

  <div id="search-progress" class="cl-search-loading" style="padding-left: 10px;">
    Preparing search...
  </div>

  <div class="cl-search-layout">
    <div class="cl-search-results">
      <div id="search-results"></div>
    </div>
  </div>

  {# Empty state #}
  <div id="search-empty" class="cl-search-empty" style="display: none;">
    <svg class="cl-search-empty-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.35-4.35"></path>
    </svg>
    <h3>No results found</h3>
    <p>We couldn't find any matches for your search.</p>
    <div class="cl-search-empty-tips">
      <strong>Try:</strong>
      <ul>
        <li>Using different keywords</li>
        <li>Checking your spelling</li>
        <li>Using more general terms</li>
        <li>Browsing the <a href="index.html">documentation index</a></li>
      </ul>
    </div>
  </div>
</div>

<script>
// Enhanced search results display with card-based UI
(function() {
  'use strict';

  // Wait for search to initialize and complete
  function styleSearchResults() {
    var searchResults = document.getElementById('search-results');
    if (!searchResults) return;

    // Find the search list
    var list = searchResults.querySelector('ul');
    if (!list) return;

    // Add the 'search' class to the ul
    list.className = 'search';

    // Style each result item
    var items = list.querySelectorAll('li');
    items.forEach(function(item) {
      item.className = 'result_item';

      // Style the title link
      var link = item.querySelector('a');
      if (link) {
        link.className = 'result_title';
      }

      // Style the context paragraph
      var context = item.querySelector('.context');
      if (context) {
        // context already has the right class
      } else {
        // If no context class, look for any paragraph
        var paras = item.querySelectorAll('p');
        paras.forEach(function(p, idx) {
          if (idx === 0) {
            p.className = 'context';
          }
        });
      }
    });

    console.log('Styled', items.length, 'search result cards');
  }

  // Try to apply styling after search loads
  var attempts = 0;
  var maxAttempts = 20; // Try for 4 seconds

  var styleInterval = setInterval(function() {
    attempts++;

    var searchResults = document.getElementById('search-results');
    if (searchResults) {
      var list = searchResults.querySelector('ul');
      if (list && list.children.length > 0) {
        styleSearchResults();

        // Hide progress, show results
        var progress = document.getElementById('search-progress');
        if (progress) progress.style.display = 'none';

        var empty = document.getElementById('search-empty');
        if (empty) empty.style.display = 'none';

        clearInterval(styleInterval);
        return;
      }
    }

    if (attempts >= maxAttempts) {
      clearInterval(styleInterval);
      var progress = document.getElementById('search-progress');
      if (progress) progress.style.display = 'none';
    }
  }, 200);
})();
</script>
{%- endblock %}