<div class="myorders-autocomplete-input relative {{@wrapperClass}}">
    <div class="relative">
        <Input @type="text" name="geocoder-autocomplete-search" @value={{@value}} class="form-input" {{on "input" this.onInput}} {{on "blur" this.onBlur}} {{on "focus" this.onFocus}} autocomplete="nope" autofill="nope" ...attributes />
        {{#if this.isLoading}}
            <div class="absolute inset-y-0 right-0 h-full w-10 pr-1 flex items-center justify-center">
                <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
            </div>
        {{/if}}
    </div>

    <div class="myorders-autocomplete-input--results absolute w-full mt-1 rounded-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm {{if this.hideResults "hidden"}}">
        {{#if this.isLoading}}
            <div class="myorders-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark-hover:bg-gray-700 hover:bg-gray-50">
                <div class="flex text-center items-center justify-center">
                    <Spinner @iconClass="text-sky-500 fa-spin-800ms" class="mr-2" />
                    <span class="text-sky-500">Loading...</span>
                </div>
            </div>
        {{/if}}
        {{#each this.results as |result index|}}
            <a href="javascript:;" {{on "click" (fn this.selectResult result)}} class="{{if (eq index 0) 'rounded-t'}} {{if (eq (add index 1) this.results.length) 'rounded-b border-b-0' 'border-b'}} myorders-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark:hover:bg-gray-700 hover:bg-gray-50 border-gray-200 dark:border-gray-700">
                {{yield result this.value}}
            </a>
        {{/each}}
    </div>
</div>