{{--
  Site-wide search overlay.

  Opened by the header search trigger (data-search-open). The form posts
  to home_url with `s=` + `post_type=product` as a fallback for users
  without JS — they hit the standard WP search results page.

  With JS enabled (see app.js, "Search overlay"), typing in the input
  fires debounced GETs to /wp-json/elit-gastro/v1/search?q=… and renders
  live results in three groups (products / categories / blog posts).

  The empty state shows recent searches (from localStorage) and the four
  homepage product categories as suggestions.

  Included from layouts/app.blade.php so it's available globally.
--}}
<div
  class="search-overlay"
  data-search-overlay
  data-search-endpoint="{{ rest_url('elit-gastro/v1/search') }}"
  data-search-action="{{ home_url('/') }}"
  {{-- i18n strings consumed by resources/js/app.js. Carried as data
       attributes so the JS bundle can stay 100% static — works for both
       Vite and the dev fallback enqueue path without wp_localize_script. --}}
  data-i18n-loading="{{ __('Pretražujem…', 'elit-gastro') }}"
  data-i18n-error="{{ __('Greška pri pretrazi. Pokušajte ponovno.', 'elit-gastro') }}"
  data-i18n-empty="{{ __('Nema rezultata za %s. Pokušajte s drugim pojmom.', 'elit-gastro') }}"
  data-i18n-view-all="{{ __('Prikaži sve rezultate za %s →', 'elit-gastro') }}"
  data-i18n-group-products="{{ __('Proizvodi', 'elit-gastro') }}"
  data-i18n-group-categories="{{ __('Kategorije', 'elit-gastro') }}"
  data-i18n-group-posts="{{ __('Članci', 'elit-gastro') }}"
  data-i18n-clear-history="{{ __('Očisti povijest', 'elit-gastro') }}"
  aria-hidden="true"
  role="dialog"
  aria-modal="true"
  aria-label="{{ __('Pretraga', 'elit-gastro') }}"
>
  <div class="search-overlay__backdrop" data-search-close aria-hidden="true"></div>

  <div class="search-overlay__panel" role="document">
    <button
      type="button"
      class="search-overlay__close"
      data-search-close
      aria-label="{{ __('Zatvori pretragu', 'elit-gastro') }}"
    >
      <x-icon.x width="20" height="20" />
    </button>

    <form
      class="search-overlay__form"
      role="search"
      method="get"
      action="{{ home_url('/') }}"
    >
      <span class="search-overlay__input-icon" aria-hidden="true">
        <x-icon.search width="22" height="22" />
      </span>
      <input
        type="search"
        name="s"
        class="search-overlay__input"
        placeholder="{{ __('Pretraži proizvode, kategorije, članke…', 'elit-gastro') }}"
        autocomplete="off"
        spellcheck="false"
        data-search-input
        aria-label="{{ __('Pojam pretrage', 'elit-gastro') }}"
        aria-controls="search-overlay-results"
        aria-autocomplete="list"
      />
      <input type="hidden" name="post_type" value="product" />
      <button type="submit" class="search-overlay__submit">
        {{ __('Pretraži', 'elit-gastro') }}
      </button>
    </form>

    <div
      class="search-overlay__results"
      id="search-overlay-results"
      data-search-results
      role="listbox"
    >
      {{-- JS renders content here. Empty state below is the initial render. --}}
      <div class="search-overlay__empty" data-search-empty>
        <div class="search-overlay__empty-recent" data-search-recent hidden>
          <h3 class="search-overlay__empty-title">{{ __('Nedavno pretraženo', 'elit-gastro') }}</h3>
          <ul class="search-overlay__recent-list" data-search-recent-list></ul>
        </div>

        <div class="search-overlay__empty-hint">
          <h3 class="search-overlay__empty-title">{{ __('Popularne kategorije', 'elit-gastro') }}</h3>
          <ul class="search-overlay__suggestions">
            @php
              $suggested = [];
              if (taxonomy_exists('product_cat')) {
                  $tops = get_terms([
                      'taxonomy'   => 'product_cat',
                      'parent'     => 0,
                      'hide_empty' => false,
                      'number'     => 6,
                      'orderby'    => 'menu_order',
                      'exclude'    => [(int) get_option('default_product_cat')],
                  ]);
                  if (! is_wp_error($tops) && ! empty($tops)) {
                      $suggested = $tops;
                  }
              }
            @endphp

            @if (! empty($suggested))
              @foreach ($suggested as $cat)
                <li>
                  <a href="{{ get_term_link($cat) }}" class="search-overlay__suggestion">{{ $cat->name }}</a>
                </li>
              @endforeach
            @else
              <li><a href="#" class="search-overlay__suggestion">{{ __('Termička oprema', 'elit-gastro') }}</a></li>
              <li><a href="#" class="search-overlay__suggestion">{{ __('Rashladna oprema', 'elit-gastro') }}</a></li>
              <li><a href="#" class="search-overlay__suggestion">{{ __('Perilice suđa', 'elit-gastro') }}</a></li>
              <li><a href="#" class="search-overlay__suggestion">{{ __('Ledomati Scotsman', 'elit-gastro') }}</a></li>
            @endif
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>