{% extends "base.html" %}

{% from "chirpui/hero.html" import page_hero %}
{% from "chirpui/layout.html" import container %}
{% from "chirpui/surface.html" import surface %}

{% block title %}Search - {{ config?.title ?? 'Site' }}{% end %}

{% block content %}
{% let site_pages = site?.pages ?? [] %}
{% let page_count = site_pages | length %}

{% call container(max_width='84rem', cls='chirp-theme-search') %}
  <div class="search-page chirp-theme-search__spine" data-chirp-theme-surface="search">
    {% call page_hero(title='Search', subtitle='Find documentation, release notes, patterns, and theme guidance.', variant='minimal', background='solid', cls='chirp-theme-search__hero') %}
      {% slot eyebrow %}{{ page_count }} pages indexed{% end %}
    {% end %}

    {% call surface(variant='default', cls='chirp-theme-search__panel') %}
    <div class="search-page__container">
      <div class="search-page__input-section">
        <div class="search-page__input-wrapper">
          {{ icon('magnifying-glass', size=20, css_class='search-page__icon') }}
          <input type="search" id="search-input" class="search-page__input"
                 placeholder="Search documentation..."
                 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                 role="combobox" aria-expanded="false"
                 aria-label="Search" aria-describedby="search-status"
                 aria-controls="search-results-list" aria-autocomplete="list" autofocus>
          <div class="search-page__loading hidden" id="search-loading-indicator">
            <div class="search-page__spinner"></div>
          </div>
          <button type="button" class="search-page__clear hidden" id="search-clear"
                  aria-label="Clear search">
            {{ icon('x', size=16) }}
          </button>
        </div>
        <div class="search-page__hints">
          <span class="search-page__hint"><kbd>↑</kbd><kbd>↓</kbd><span>Navigate</span></span>
          <span class="search-page__hint"><kbd>↵</kbd><span>Open</span></span>
          <span class="search-page__hint"><kbd>ESC</kbd><span>Clear</span></span>
        </div>
      </div>

      <div id="search-status" class="sr-only" role="status" aria-live="polite"></div>

      <div class="search-page__results-area">
        <section class="search-page__results hidden" id="search-results" aria-label="Search results">
          <div class="search-page__results-header">
            <span id="search-results-count" class="search-page__results-count"></span>
            <button type="button" class="search-page__filters-toggle" id="filters-toggle" aria-expanded="false">
              {{ icon('funnel', size=16) }}
              <span>Filters</span>
            </button>
          </div>
          <div class="search-page__filters hidden" id="search-filters">
            <div class="search-page__filters-grid">
              <div class="search-page__filter-group">
                <label for="filter-section">Section</label>
                <select id="filter-section" class="search-page__filter-select">
                  <option value="">All Sections</option>
                </select>
              </div>
              <div class="search-page__filter-group">
                <label for="filter-type">Type</label>
                <select id="filter-type" class="search-page__filter-select">
                  <option value="">All Types</option>
                </select>
              </div>
              <button type="button" class="search-page__filter-clear" id="clear-filters">
                {{ icon('x', size=14) }}
                Clear
              </button>
            </div>
          </div>
          <div id="search-results-list" class="search-page__results-list" role="listbox"></div>
          <div class="search-page__no-results hidden" id="search-no-results">
            {{ icon('magnifying-glass', size=48) }}
            <p class="search-page__no-results-text">No results for "<span id="search-no-results-query"></span>"</p>
            <p class="search-page__no-results-hint">Try different keywords or check your spelling</p>
          </div>
        </section>

        <div class="search-page__empty" id="search-empty">
          <div class="search-page__empty-content">
            {{ icon('magnifying-glass', size=56, css_class='search-page__empty-icon') }}
            <p class="search-page__empty-title">Start typing to search</p>
            <p class="search-page__empty-hint">Search across documentation, marketing pages, and posts.</p>
            {% let suggestions = ['button', 'card', 'modal', 'tabs', 'theming', 'layout'] %}
            <div class="search-page__suggestions">
              <span class="search-page__suggestions-label" id="search-suggestions-label">Popular searches</span>
              <div class="search-page__suggestion-pills" role="group" aria-labelledby="search-suggestions-label">
                {% for term in suggestions %}
                <button type="button" class="search-page__suggestion" data-query="{{ term }}">{{ term }}</button>
                {% end %}
              </div>
            </div>
          </div>
        </div>

        <div class="search-page__loading-state hidden" id="search-loading">
          <div class="search-page__spinner search-page__spinner--large"></div>
          <p>Loading search index...</p>
        </div>

        <div class="search-page__error hidden" id="search-error">
          <p>Failed to load search index. Please try refreshing the page.</p>
        </div>

        {# Server-side fallback: interactive search needs JavaScript, but every
           indexed page is still reachable here without it. Grouped by section. #}
        <noscript>
          <div class="search-page__noscript prose">
            <p>Interactive search needs JavaScript. Browse the indexed pages below.</p>
            {% let _sections = site?.sections ?? [] %}
            {% if _sections | length > 0 %}
            {% for _section in _sections %}
            {% let _section_pages = _section?.regular_pages ?? _section?.pages ?? [] %}
            {% if _section_pages | length > 0 %}
            <section class="search-page__noscript-group">
              <h2 class="search-page__noscript-heading">{{ _section?.title ?? _section?.name ?? 'Pages' }}</h2>
              <ul class="search-page__noscript-list">
                {% for _p in _section_pages %}
                <li><a href="{{ (_p?.href ?? _p?._path ?? '#') | absolute_url }}">{{ _p?.title ?? 'Untitled' }}</a></li>
                {% end %}
              </ul>
            </section>
            {% end %}
            {% end %}
            {% else %}
            {% let _all_pages = site?.regular_pages ?? site?.pages ?? [] %}
            <ul class="search-page__noscript-list">
              {% for _p in _all_pages %}
              <li><a href="{{ (_p?.href ?? _p?._path ?? '#') | absolute_url }}">{{ _p?.title ?? 'Untitled' }}</a></li>
              {% end %}
            </ul>
            {% end %}
          </div>
        </noscript>
      </div>
    </div>
    {% end %}
  </div>
{% end %}
{% end %}