{#
Search Modal Component (Cmd/Ctrl+K)

A command-palette style search modal for quick documentation access.

Features:
- Cmd/Ctrl+K keyboard shortcut to open
- Escape to close
- Recent searches (localStorage)
- Keyboard navigation (↑↓ to navigate, Enter to select)
- Focus trap for accessibility
- Lazy loads search index on first open

Dependencies:
- JavaScript: /assets/js/core/search.js (consolidated search module)
- CSS: /assets/css/components/search-modal.css
- Search: BengalSearch module (core/search.js)

Configuration:
search:
ui:
modal: true
recent_searches: 5

Usage:
{% include 'partials/search-modal.html' %}
#}

{# Only render if modal is enabled #}
{% let search_config = config?.search %}
{% let ui_config = search_config?.ui ?? {} %}
{% let modal_enabled = ui_config?.modal ?? false %}

{% if modal_enabled %}
<dialog id="search-modal" class="search-modal"
  aria-label="{{ t('search.aria_label', default='Search documentation') }}">
  {# Backdrop for clicking outside to close #}
  <div class="search-modal__backdrop" data-close-modal></div>

  {# Modal container — the native <dialog> opened via showModal() already
     carries modal semantics, so no nested role=dialog/aria-modal here. #}
  <div class="search-modal__container">
    {# Header with search input #}
    <header class="search-modal__header">
      <div class="search-modal__input-wrapper">
        {{ icon('magnifying-glass', size=20, css_class='search-modal__icon') }}

        <input type="search" id="search-modal-input" class="search-modal__input"
          placeholder="{{ ui_config.placeholder ?? t('search.placeholder', default='Search documentation...') }}"
          autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
          role="combobox" aria-expanded="false"
          aria-label="{{ t('search.aria_label', default='Search') }}" aria-describedby="search-modal-status"
          aria-controls="search-modal-results-list" aria-autocomplete="list">

        <div class="search-modal__loading hidden" id="search-modal-loading">
          <div class="search-modal__spinner"></div>
        </div>
      </div>

      <button type="button" class="search-modal__close" data-close-modal aria-label="Close search">
        <kbd>ESC</kbd>
      </button>
    </header>

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

    {# Scope chips — filter results to Docs / API / Releases. The active chip
       carries aria-pressed=true; "All" is the default. JS re-runs the current
       query on chip change (search.js). Mirrors the /search filter affordance. #}
    <div class="search-modal__scopes" id="search-modal-scopes" role="group"
      aria-label="{{ t('search.scopes_aria_label', default='Filter results by type') }}">
      <button type="button" class="search-modal__scope search-modal__scope--active"
        data-scope="all" aria-pressed="true">{{ t('search.scope_all', default='All') }}</button>
      <button type="button" class="search-modal__scope"
        data-scope="docs" aria-pressed="false">{{ t('search.scope_docs', default='Docs') }}</button>
      <button type="button" class="search-modal__scope"
        data-scope="api" aria-pressed="false">{{ t('search.scope_api', default='API') }}</button>
      <button type="button" class="search-modal__scope"
        data-scope="releases" aria-pressed="false">{{ t('search.scope_releases', default='Releases') }}</button>
    </div>

    {# Recent searches section #}
    <section class="search-modal__recent" id="search-modal-recent"
      aria-label="{{ t('search.recent_aria_label', default='Recent searches') }}">
      <div class="search-modal__section-header">
        <span class="search-modal__section-title">{{ t('search.recent', default='Recent') }}</span>
        <button type="button" class="search-modal__clear-recent" id="clear-recent-searches"
          title="{{ t('search.clear_recent', default='Clear recent searches') }}">
          {{ t('search.clear', default='Clear') }}
        </button>
      </div>
      <ul class="search-modal__recent-list" id="search-modal-recent-list" role="listbox">
        {# Recent searches populated by JS #}
      </ul>
    </section>

    {# Search results #}
    <section class="search-modal__results" id="search-modal-results"
      aria-label="{{ t('search.results_aria_label', default='Search results') }}">
      <div class="search-modal__results-list" id="search-modal-results-list" role="listbox">
        {# Results populated by JS #}
      </div>

      {# No results message #}
      <div class="search-modal__no-results hidden" id="search-modal-no-results">
        {{ icon('magnifying-glass', size=48) }}
        <p class="search-modal__no-results-text">{{ t('search.no_results', default='No results for') }} "<span
            id="search-modal-no-results-query"></span>"</p>
        <p class="search-modal__no-results-hint">{{ t('search.no_results_hint', default='Try different keywords or check
          your spelling') }}</p>
      </div>

      {# Empty state (before search) — first-open suggestions the JS binds. #}
      <div class="search-modal__empty" id="search-modal-empty">
        <p class="search-modal__empty-hint">{{ t('search.empty_hint', default='Start typing to search...') }}</p>
        {% let modal_suggestions = ui_config?.suggestions ?? ['button', 'card', 'modal', 'tabs', 'theming', 'layout'] %}
        <div class="search-page__suggestions">
          <span class="search-page__suggestions-label" id="search-modal-suggestions-label">{{ t('search.popular', default='Popular searches') }}</span>
          <div class="search-page__suggestion-pills" role="group" aria-labelledby="search-modal-suggestions-label">
            {% for term in modal_suggestions %}
            <button type="button" class="search-page__suggestion search-modal__suggestion" data-query="{{ term }}">{{ term }}</button>
            {% end %}
          </div>
        </div>
      </div>
    </section>

    {# Footer with keyboard hints #}
    <footer class="search-modal__footer">
      <div class="search-modal__hints">
        <span class="search-modal__hint">
          <kbd>↑</kbd><kbd>↓</kbd>
          <span>{{ t('search.hint_navigate', default='Navigate') }}</span>
        </span>
        <span class="search-modal__hint">
          <kbd>↵</kbd>
          <span>{{ t('search.hint_open', default='Open') }}</span>
        </span>
        <span class="search-modal__hint">
          <kbd>ESC</kbd>
          <span>{{ t('search.hint_close', default='Close') }}</span>
        </span>
      </div>
      <div class="search-modal__powered-by">
        <span>{{ t('search.powered_by', default='Powered by') }}</span>
        <a href="https://lunrjs.com/" target="_blank" rel="noopener">Lunr</a>
      </div>
    </footer>
  </div>
</dialog>

{# The Cmd/Ctrl+K palette is JS-driven; without JS, point to the full
   search page, which renders a server-side list of every indexed page. #}
<noscript>
  <a class="search-modal__noscript-link" href="{{ '/search/' | absolute_url }}">
    {{ t('search.noscript_link', default='Browse all pages') }}
  </a>
</noscript>

{% end %}