{{!
    Layout::Header::SmartNavMenu::Dropdown
    Phase 2: multi-column card grid with search filter.

    Shortcuts are already registered as first-class items in the universe
    registry by menu-service.registerHeaderMenuItem(), so @items already
    contains both parent extension items and their shortcut siblings.
    No client-side expansion is needed.

    Args:
      @items            - Array of MenuItem objects to display
      @top              - Fixed-position top offset (px, from JS)
      @left             - Fixed-position left offset (px, from JS)
      @onClose          - Action to close this dropdown
      @onOpenCustomizer - Action to open the customiser panel
      @onQuickPin       - Action to pin an item directly from the dropdown
      @atPinnedLimit    - Boolean: true when the bar is full (pin button hidden)

    Click-area pattern:
      Each card is wrapped in a `snm-dropdown-card-wrap` div (position: relative).
      The card itself is the <LinkToExternal> (or <a> for onClick items), making
      the entire card surface clickable.  The pin button is a sibling of the card
      inside the wrapper, absolutely positioned in the top-right corner so it
      sits above the card link and receives its own clicks without violating the
      no-nested-interactive rule.
}}
<div
    class="snm-dropdown snm-dropdown--wide"
    style={{this.positionStyle}}
    role="dialog"
    aria-label="More extensions"
>
    {{! ── Header: title + close ────────────────────────────────────────────── }}
    <div class="snm-dropdown-header">
        <span class="snm-dropdown-title">Extensions</span>
        <button
            type="button"
            class="snm-dropdown-close"
            aria-label="Close"
            {{on "click" @onClose}}
        >
            <FaIcon @icon="xmark" @size="sm" />
        </button>
    </div>

    {{! ── Search bar ──────────────────────────────────────────────────────── }}
    <div class="snm-dropdown-search-bar">
        <span class="snm-dropdown-search-icon" aria-hidden="true">
            <FaIcon @icon="magnifying-glass" @size="xs" />
        </span>
        <input
            type="text"
            class="snm-dropdown-search-input"
            placeholder="Search extensions..."
            value={{this.searchQuery}}
            aria-label="Search extensions"
            {{on "input" this.updateSearch}}
        />
        {{#if this.searchQuery}}
            <button
                type="button"
                class="snm-dropdown-search-clear"
                aria-label="Clear search"
                {{on "click" this.clearSearch}}
            >
                <FaIcon @icon="xmark" @size="xs" />
            </button>
        {{/if}}
    </div>

    {{! ── Card grid ───────────────────────────────────────────────────────── }}
    <div class="snm-dropdown-grid" aria-label="Extension list">
        {{#if this.hasNoResults}}
            <div class="snm-dropdown-empty">
                <FaIcon @icon="magnifying-glass" @size="lg" class="snm-dropdown-empty-icon" />
                <p class="snm-dropdown-empty-text">
                    No extensions match
                    <strong>{{this.searchQuery}}</strong>
                </p>
            </div>
        {{else}}
            {{#each this.filteredItems as |item|}}
                {{#if item._isShortcut}}
                    {{! ── Shortcut card ───────────────────────────────────── }}
                    <div class="snm-dropdown-card-wrap">
                        <LinkToExternal
                            @route={{item.route}}
                            id={{concat (dasherize (or item.route item.id "sc")) "-dropdown-card"}}
                            class="snm-dropdown-card"
                            title={{item.title}}
                        >
                            <div class="snm-dropdown-card-header">
                                <span class="snm-dropdown-card-icon">
                                    {{#if item.iconComponent}}
                                        {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
                                    {{else}}
                                        <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
                                    {{/if}}
                                </span>
                                <span class="snm-dropdown-card-title-group">
                                    <span class="snm-dropdown-card-title">{{item.title}}</span>
                                    {{#if item._parentTitle}}
                                        <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
                                    {{/if}}
                                </span>
                            </div>
                            {{#if item.description}}
                                <p class="snm-dropdown-card-description">{{item.description}}</p>
                            {{else if item._parentTitle}}
                                <p class="snm-dropdown-card-description snm-dropdown-card-description--from"><em>from {{item._parentTitle}}</em></p>
                            {{/if}}
                        </LinkToExternal>
                        {{#unless @atPinnedLimit}}
                            <button
                                type="button"
                                class="snm-dropdown-pin-btn"
                                title="Pin to navigation bar"
                                aria-label="Pin {{item.title}} to navigation bar"
                                {{on "click" (fn @onQuickPin item)}}
                            >
                                <FaIcon @icon="thumbtack" @size="xs" />
                            </button>
                        {{/unless}}
                    </div>
                {{else}}
                    {{! ── Primary extension card ──────────────────────────── }}
                    <div class="snm-dropdown-card-wrap">
                        {{#if item.onClick}}
                            <a
                                href="javascript:;"
                                class="snm-dropdown-card"
                                title={{item.title}}
                                {{on "click" (fn this.handleItemClick item)}}
                            >
                                <div class="snm-dropdown-card-header">
                                    <span class="snm-dropdown-card-icon">
                                        {{#if item.iconComponent}}
                                            {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
                                        {{else}}
                                            <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
                                        {{/if}}
                                    </span>
                                    <span class="snm-dropdown-card-title-group">
                                        <span class="snm-dropdown-card-title">{{item.title}}</span>
                                        {{#if item._parentTitle}}
                                            <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
                                        {{/if}}
                                    </span>
                                </div>
                                {{#if item.description}}
                                    <p class="snm-dropdown-card-description">{{item.description}}</p>
                                {{/if}}
                            </a>
                        {{else}}
                            <LinkToExternal
                                @route={{item.route}}
                                id={{concat (dasherize (or item.route item.id "nav")) "-dropdown-card"}}
                                class="snm-dropdown-card"
                                title={{item.title}}
                            >
                                <div class="snm-dropdown-card-header">
                                    <span class="snm-dropdown-card-icon">
                                        {{#if item.iconComponent}}
                                            {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
                                        {{else}}
                                            <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
                                        {{/if}}
                                    </span>
                                    <span class="snm-dropdown-card-title-group">
                                        <span class="snm-dropdown-card-title">{{item.title}}</span>
                                        {{#if item._parentTitle}}
                                            <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
                                        {{/if}}
                                    </span>
                                </div>
                                {{#if item.description}}
                                    <p class="snm-dropdown-card-description">{{item.description}}</p>
                                {{/if}}
                            </LinkToExternal>
                        {{/if}}
                        {{#unless @atPinnedLimit}}
                            <button
                                type="button"
                                class="snm-dropdown-pin-btn"
                                title="Pin to navigation bar"
                                aria-label="Pin {{item.title}} to navigation bar"
                                {{on "click" (fn @onQuickPin item)}}
                            >
                                <FaIcon @icon="thumbtack" @size="xs" />
                            </button>
                        {{/unless}}
                    </div>
                {{/if}}
            {{/each}}
        {{/if}}
    </div>

    {{! ── Footer ──────────────────────────────────────────────────────────── }}
    <div class="snm-dropdown-footer">
        <button
            type="button"
            class="snm-dropdown-customise-link"
            {{on "click" @onOpenCustomizer}}
        >
            <FaIcon @icon="sliders" @size="xs" class="mr-1.5" />
            Customise navigation
        </button>
    </div>
</div>