{% extends "base.html" %}

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

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

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

{% call container() %}
  <div class="search-page">
    <header class="search-page__header">
      <div class="search-page__title-row">
        <h1 class="search-page__title">
          {{ icon('magnifying-glass', size=24, css_class='search-page__title-icon') }}
          <span>Search</span>
        </h1>
        <span class="search-page__page-count">{{ page_count }} pages indexed</span>
      </div>
    </header>

    <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"
                 aria-label="Search" aria-describedby="search-status"
                 aria-controls="search-results" 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>
          </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>
      </div>
    </div>
  </div>
{% end %}
{% end %}