{% extends "base.html" %}

{#
================================================================================
Search Results Page Template (Kida-Native)
================================================================================

Dedicated full-page search experience.

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults

JavaScript: All functionality is handled by /assets/js/core/search.js
CSS: /assets/css/components/search.css
================================================================================
#}

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

{% block content %}
{# Template-scoped variables #}
{% let site_pages = site?.pages ?? [] %}
{% let page_count = site_pages | length %}

<div class="container">
  <div class="search-page">
    {# Search Header #}
    <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>

    {# Main Search Interface #}
    <div class="search-page__container">
      {# Search Input #}
      <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-mark', size=16) }}
          </button>
        </div>

        {# Keyboard hints #}
        <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>

      {# Status for screen readers #}
      <div id="search-status" class="sr-only" role="status" aria-live="polite"></div>

      {# Search Results Area #}
      <div class="search-page__results-area">
        {# Results Container #}
        <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>

          {# Filters Panel #}
          <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-mark', size=14) }}
                Clear
              </button>
            </div>
          </div>

          {# Results list #}
          <div id="search-results-list" class="search-page__results-list" role="listbox"></div>

          {# No results message #}
          <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>

        {# Empty State (before searching) #}
        <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 through documentation, tutorials, API reference, and more</p>
          </div>

          {# Quick Search Suggestions #}
          <div class="search-page__suggestions">
            <span class="search-page__suggestions-label">Try searching for:</span>
            <div class="search-page__suggestion-pills">
              <button type="button" class="search-page__suggestion" data-query="getting started">Getting Started</button>
              <button type="button" class="search-page__suggestion" data-query="configuration">Configuration</button>
              <button type="button" class="search-page__suggestion" data-query="template">Templates</button>
              <button type="button" class="search-page__suggestion" data-query="markdown">Markdown</button>
              <button type="button" class="search-page__suggestion" data-query="api">API</button>
              <button type="button" class="search-page__suggestion" data-query="tutorial">Tutorials</button>
            </div>
          </div>

          {# Search Tips #}
          <div class="search-page__tips">
            <div class="search-page__tip">
              <span class="search-page__tip-label">Operators:</span>
              <code>+term</code> must include
              <code>-term</code> exclude
              <code>term~2</code> fuzzy
            </div>
          </div>
        </div>

        {# Loading State #}
        <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>

        {# Error State #}
        <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>
</div>
{% end %}