{{--
    Live-suggest dropdown for the Protera header search input.

    Rendered INSIDE an Alpine x-data="searchSuggest()" form (see
    site-header.blade.php — the desktop and mobile search boxes both
    include this partial). Consumes the controller from
    packages/va-themes/protera/Resources/assets/js/search-suggest.js
    (bundled into web.js — task-116b).

    Test selectors (see tests/e2e/search-suggest.spec.ts):
      - data-testid="search-suggest-dropdown"  dropdown wrapper
      - data-testid="search-suggest-empty"     "no results" state
      - data-testid="search-suggest-group"     each group
      - data-testid="search-suggest-row"       each clickable result
      - mark.search-suggest-mark               highlighted match substrings

    XSS posture: titles and subtitles are inserted via x-text — Alpine
    sets textContent (not innerHTML), so the only HTML we ever introduce
    is the <mark> wrapper built by renderTitle() in JS via createElement.
--}}
<div class="search-suggest-dropdown"
     x-show="open"
     x-cloak
     x-transition.opacity.duration.150ms
     data-testid="search-suggest-dropdown"
     @mousedown.prevent>{{-- prevent input blur on row click --}}

    {{-- Loading indicator (only while the first request is pending and
         we have nothing to show yet — once we have results, we keep
         them on screen and just refetch behind the scenes). --}}
    <template x-if="loading && groups.length === 0">
        <div class="search-suggest-loading"
             data-testid="search-suggest-loading"
             x-text="labels.loading">
        </div>
    </template>

    {{-- Empty state — query was long enough to fetch but server
         returned zero matches. --}}
    <template x-if="!loading && groups.length === 0 && q.trim().length >= minLength">
        <div class="search-suggest-empty"
             data-testid="search-suggest-empty"
             x-text="labels.noResults">
        </div>
    </template>

    {{-- Result groups — KATEGORIJOS first, then PREKĖS (server order). --}}
    <template x-for="(group, gi) in groups" :key="group.id">
        <section class="search-suggest-group"
                 :data-testid="'search-suggest-group-' + group.id"
                 :data-group-id="group.id">

            <h3 class="search-suggest-group-label" x-text="group.label"></h3>

            <template x-for="(item, ii) in group.items" :key="item.type + '-' + item.id">
                <a class="search-suggest-row"
                   :class="{ 'is-highlighted': isHighlighted(gi, ii) }"
                   :href="item.url"
                   data-testid="search-suggest-row"
                   :data-row-type="item.type"
                   :data-row-id="item.id"
                   @click.prevent="selectItem(item)"
                   @mouseenter="setHighlight(gi, ii)">

                    {{-- Thumbnail OR fallback icon. --}}
                    <span class="search-suggest-thumb">
                        <template x-if="item.thumbnail">
                            <img :src="item.thumbnail" :alt="item.title" loading="lazy">
                        </template>
                        <template x-if="!item.thumbnail && item.icon">
                            <i class="bi" :class="item.icon"></i>
                        </template>
                    </span>

                    <span class="search-suggest-body">
                        {{-- Title with <mark>-wrapped match ranges; rendered
                             via x-init that calls renderTitle($el, ...). The
                             :data-rerender attribute changes whenever q
                             changes, so Alpine re-evaluates x-effect and we
                             re-render the highlighted span. --}}
                        <span class="search-suggest-title"
                              :data-rerender="q + '|' + (item.highlight_ranges?.length || 0)"
                              x-effect="renderTitle($el, item.title, item.highlight_ranges)">
                        </span>

                        <template x-if="item.subtitle">
                            <span class="search-suggest-subtitle" x-text="item.subtitle"></span>
                        </template>
                    </span>

                    {{-- Right meta column — count badge / date / etc. --}}
                    <template x-if="item.meta_right">
                        <span class="search-suggest-meta" x-text="item.meta_right"></span>
                    </template>
                </a>
            </template>
        </section>
    </template>
</div>
