{#
================================================================================
Search Inline Component (Kida-Native)
================================================================================

A compact, embeddable search component that matches the modal design language.
Can be included on any page for inline search functionality.

KIDA FEATURES:
- {% let %} for template-scoped variables and nil-resilient defaults
- Optional chaining (?.) for null-safe config access
- Null coalescing (??) for smart defaults
- {% match %} for variant-based rendering
- {% spaceless %} for clean HTML output
- {% capture %} for buffered content
- t() for full i18n support

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

Usage:
  {% include 'partials/search.html' %}
  {% include 'partials/search.html' with variant='compact' %}
  {% include 'partials/search.html' with show_filters=true %}
================================================================================
#}

{# ============================================================================
   Configuration & Defaults (nil-resilient)
   ============================================================================ #}
{% let search_config = config?.search ?? {} %}
{% let ui_config = search_config?.ui ?? {} %}
{% let variant = variant ?? ui_config?.inline_variant ?? 'default' %}
{% let show_filters = show_filters ?? ui_config?.show_filters ?? true %}
{% let show_shortcuts = show_shortcuts ?? ui_config?.show_shortcuts ?? true %}
{% let placeholder = placeholder ?? ui_config?.placeholder ?? t('search.placeholder', default='Search documentation...') %}
{% let autofocus = autofocus ?? false %}

{# ============================================================================
   Variant Configuration
   ============================================================================ #}
{% let VARIANT_CONFIG = {
  'default': {'show_header': true, 'max_results': 10, 'collapsed_api': true},
  'compact': {'show_header': false, 'max_results': 5, 'collapsed_api': true},
  'full': {'show_header': true, 'max_results': 20, 'collapsed_api': false}
} %}
{% let active_config = VARIANT_CONFIG[variant] ?? VARIANT_CONFIG['default'] %}

{# ============================================================================
   Main Component
   ============================================================================ #}
<div class="search-inline"
     id="search-container"
     data-variant="{{ variant }}"
     data-max-results="{{ active_config.max_results }}"
     data-collapsed-api="{{ active_config.collapsed_api | lower }}">

  {# --------------------------------------------------------------------
     Search Input Section
     -------------------------------------------------------------------- #}
  <div class="search-inline__input-wrapper">
    {{ icon('magnifying-glass', size=18, css_class='search-inline__icon') }}

    <input type="search"
           id="search-input"
           name="search"
           class="search-inline__input"
           placeholder="{{ placeholder }}"
           autocomplete="off"
           autocorrect="off"
           autocapitalize="off"
           spellcheck="false"
           aria-label="{{ t('search.aria_label', default='Search') }}"
           aria-describedby="search-status"
           aria-controls="search-results"
           aria-autocomplete="list"
           {% if autofocus %}autofocus{% end %}>

    {# Keyboard shortcut hint (hideable) #}
    {% if show_shortcuts %}
    {% spaceless %}
    <div class="search-inline__shortcut" aria-hidden="true">
      <kbd>⌘</kbd><kbd>K</kbd>
    </div>
    {% endspaceless %}
    {% end %}

    {# Loading indicator #}
    <div class="search-inline__loading hidden" id="search-loading-inline">
      <div class="search-inline__spinner"></div>
    </div>

    {# Clear button #}
    <button type="button"
            class="search-inline__clear hidden"
            id="search-clear"
            aria-label="{{ t('search.clear', default='Clear search') }}">
      {{ icon('x-mark', size=14) }}
    </button>
  </div>

  {# --------------------------------------------------------------------
     Screen Reader Status
     -------------------------------------------------------------------- #}
  <div id="search-status"
       class="sr-only"
       role="status"
       aria-live="polite"
       aria-atomic="true">
  </div>

  {# --------------------------------------------------------------------
     Filters Section (optional)
     -------------------------------------------------------------------- #}
  {% if show_filters %}
  <div class="search-inline__filters hidden" id="search-filters">
    <button type="button"
            class="search-inline__filters-toggle"
            aria-expanded="false"
            aria-controls="search-filters-content">
      {{ icon('funnel', size=14) }}
      <span>{{ t('search.filters', default='Filters') }}</span>
    </button>

    <div class="search-inline__filters-content hidden" id="search-filters-content">
      <div class="search-inline__filter-group">
        <label for="filter-section">{{ t('search.filter_section', default='Section:') }}</label>
        <select id="filter-section" class="search-inline__filter-select">
          <option value="">{{ t('search.all_sections', default='All Sections') }}</option>
          {# Options populated by JavaScript from search index #}
        </select>
      </div>

      <div class="search-inline__filter-group">
        <label for="filter-type">{{ t('search.filter_type', default='Type:') }}</label>
        <select id="filter-type" class="search-inline__filter-select">
          <option value="">{{ t('search.all_types', default='All Types') }}</option>
          {# Options populated by JavaScript from search index #}
        </select>
      </div>

      <button type="button" class="search-inline__filter-clear" id="clear-filters">
        {{ t('search.clear_filters', default='Clear') }}
      </button>
    </div>
  </div>
  {% end %}

  {# --------------------------------------------------------------------
     Search Results Container
     -------------------------------------------------------------------- #}
  <div id="search-results"
       role="region"
       aria-label="{{ t('search.results_aria_label', default='Search results') }}"
       class="search-inline__results hidden">

    {% if active_config.show_header %}
    <div class="search-inline__results-header">
      <span id="search-results-count" class="search-inline__results-count"></span>
    </div>
    {% end %}

    <div id="search-results-list" class="search-inline__results-list" role="listbox">
      {# Results populated by JavaScript #}
    </div>

    {# No results state #}
    <div id="search-no-results" class="search-inline__no-results hidden">
      {{ icon('magnifying-glass', size=40) }}
      <p class="search-inline__no-results-text">
        {{ t('search.no_results', default='No results for') }} "<span id="search-no-results-query"></span>"
      </p>
      <p class="search-inline__no-results-hint">
        {{ t('search.no_results_hint', default='Try different keywords or clear your filters') }}
      </p>
    </div>
  </div>

  {# --------------------------------------------------------------------
     Loading State
     -------------------------------------------------------------------- #}
  <div id="search-loading" class="search-inline__loading-state hidden">
    <div class="search-inline__spinner search-inline__spinner--large"></div>
    <p>{{ t('search.loading_index', default='Loading search index...') }}</p>
  </div>

  {# --------------------------------------------------------------------
     Error State
     -------------------------------------------------------------------- #}
  <div id="search-error" class="search-inline__error hidden">
    <p>{{ t('search.error', default='Failed to load search index. Please try refreshing.') }}</p>
  </div>
</div>

{# ============================================================================
   Component Initialization
   ============================================================================

   The search functionality is handled by /assets/js/core/search.js
   which provides the BengalSearch module. The inline component uses the
   same search engine as the modal and search page for consistency.

   CSS is loaded from /assets/css/components/search.css
   ============================================================================ #}