<div class="fleetbase-model-select fleetbase-power-select ember-model-select" {{did-update this.selectedModelChanged @selectedModel}}>
    <PowerSelect
        @afterOptionsComponent={{@afterOptionsComponent}}
        @allowClear={{@allowClear}}
        @animationEnabled={{@animationEnabled}}
        @ariaDescribedBy={{@ariaDescribedBy}}
        @ariaInvalid={{@ariaInvalid}}
        @ariaLabel={{@ariaLabel}}
        @ariaLabelledBy={{@ariaLabelledBy}}
        @beforeOptionsComponent={{@beforeOptionsComponent}}
        @buildSelection={{@buildSelection}}
        @calculatePosition={{@calculatePosition}}
        @closeOnSelect={{@closeOnSelect}}
        @defaultHighlighted={{@defaultHighlighted}}
        @destination={{@destination}}
        @disabled={{@disabled}}
        @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
        @extra={{@extra}}
        @groupComponent={{@groupComponent}}
        @highlightOnHover={{@highlightOnHover}}
        @horizontalPosition={{@horizontalPosition}}
        @initiallyOpened={{@initiallyOpened}}
        @loadingMessage={{@loadingMessage}}
        @eventType={{@eventType}}
        @matcher={{@matcher}}
        @matchTriggerWidth={{@matchTriggerWidth}}
        @noMatchesMessage={{@noMatchesMessage}}
        @onBlur={{@onBlur}}
        @onChange={{this.change}}
        @onClose={{this.onClose}}
        @onFocus={{@onFocus}}
        @onInput={{this.onInput}}
        @onKeydown={{@onKeydown}}
        @onOpen={{this.onOpen}}
        @options={{this._options}}
        @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}}
        @placeholder={{@placeholder}}
        @placeholderComponent={{@placeholderComponent}}
        @preventScroll={{@preventScroll}}
        @renderInPlace={{@renderInPlace}}
        @scrollTo={{@scrollTo}}
        @search={{perform this.searchModels}}
        @searchEnabled={{get-default-value @searchEnabled true}}
        @searchField={{@searchField}}
        @searchMessage={{@searchMessage}}
        @searchPlaceholder={{@searchPlaceholder}}
        @selected={{this.selectedModel}}
        @selectedItemComponent={{@selectedItemComponent}}
        @tabindex={{@tabindex}}
        @triggerClass={{@triggerClass}}
        @triggerComponent={{@triggerComponent}}
        @triggerId={{@triggerId}}
        @triggerRole={{@triggerRole}}
        @typeAheadMatcher={{@typeAheadMatcher}}
        @verticalPosition={{@verticalPosition}}
        @withCreate={{@withCreate}}
        ...attributes
        as |model|
    >
        {{#if (has-block)}}
            {{yield model}}
        {{else}}
            {{get model @optionLabel}}
        {{/if}}
    </PowerSelect>

    {{#if this.loadModels.isRunning}}
        <div class="ember-model-select__loading">
            <ModelSelect::Spinner />
        </div>
    {{/if}}
</div>