<div ...attributes>
    <div class="ember-power-select-search">
        <PowerSelect
            @search={{perform this.search.searchTask}}
            @onChange={{this.openSelected}}
            @onClose={{this.onClose}}
            @placeholder="Search site"
            @searchEnabled={{false}}
            @triggerComponent={{component "gh-input-with-select/trigger"}}
            @renderInPlace={{true}}
            @loadingMessage="Loading"
            @extra={{hash
                autofocus=true
                inputType="search"
                inputIcon="search"
                inputIconClass="gh-nav-search-icon"
            }}
            as |name select|
        >
            <div class="gh-nav-search-option">
                <div>{{highlighted-text name.title select.searchText}}</div>
                {{#if (or (eq name.status "draft") (eq name.status "scheduled"))}}
                    <div class="gh-nav-search-label {{if (eq name.status "draft") "draft"}} {{if (eq name.status "scheduled") "scheduled"}}">{{capitalize name.status}}</div>
                {{/if}}
            </div>
        </PowerSelect>
    </div>
</div>