{#
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 #}
  <div class="search-modal__container" role="dialog" aria-modal="true">
    {# 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"
          aria-label="{{ t('search.aria_label', default='Search') }}" aria-describedby="search-modal-status"
          aria-controls="search-modal-results" 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>

    {# 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) #}
      <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>
      </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>

{% end %}