{{#if @visible}}
    <div class="next-map-search-bar-container {{if @visible 'is-visible'}}" {{did-insert this.setupComponent}}>
        <div class="next-map-search-bar">
            <FaIcon @icon="search" class="ml-4" />
            <Input @value={{@value}} {{on "input" this.search}} placeholder={{t "fleet-ops.component.global-search.search"}} />
            <div class="pr-4 flex items-center justify-center">
                {{#if this.isLoading}}
                    <Spinner class="text-sky-400" />
                {{/if}}
            </div>
        </div>
        <div class="next-map-search-results flex flex-col {{if this.results 'has-results'}}">
            {{#each this.results as |result|}}
                <a href="javascript:;" class="next-map-search-result" {{on "click" (fn this.onAction "onPressOrder" result)}}>
                    <div class="px-4">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex-1 truncate">
                                <h3 class="text-base font-semibold">{{result.public_id}}</h3>
                                <div class="flex flex-row items-center space-x-2">
                                    <Badge @hideStatusDot={{true}} @status="default">{{result.createdAt}}</Badge>
                                    <Badge @hideStatusDot={{true}} @status={{if result.has_driver_assigned "assigned" "default"}}>
                                        <div class="flex flex-row items-center {{if result.has_driver_assigned 'text-indigo-900' 'text-gray-900'}}">
                                            <FaIcon @icon="steering-wheel" @size="xs" class="mr-1" />
                                            {{if result.has_driver_assigned result.driver_name "Unassigned"}}
                                        </div>
                                    </Badge>
                                </div>
                            </div>
                            <div>
                                <Badge @status={{result.status}} />
                            </div>
                        </div>
                        <div class="text-xs">
                            <div class="order-route-list">
                                {{#if result.payload.pickup}}
                                    <div class="{{@itemClass}} order-route-stop">
                                        <div class="order-route-stop-index">
                                            <div class="index-count">1</div>
                                        </div>
                                        <div class="order-route-location dark:text-gray-100">
                                            {{result.payload.pickup.address}}
                                        </div>
                                    </div>
                                {{/if}}

                                {{#if result.payload.waypoints}}
                                    {{#each result.payload.waypoints as |waypoint index|}}
                                        <div class="{{@itemClass}} order-route-stop">
                                            <div class="order-route-stop-index">
                                                <div class="index-count">{{index}}</div>
                                            </div>
                                            <div class="order-route-location dark:text-gray-100">{{waypoint.address}}</div>
                                        </div>
                                    {{/each}}
                                {{/if}}

                                {{#if result.payload.dropoff}}
                                    <div class="{{@itemClass}} order-route-stop">
                                        <div class="order-route-stop-index">
                                            <div class="index-count">{{add result.payload.waypoints.length 2}}</div>
                                        </div>
                                        <div class="order-route-location dark:text-gray-100">{{result.payload.dropoff.address}}</div>
                                    </div>
                                {{/if}}
                            </div>
                            <div>
                                <div role="list" class="grid grid-cols-8 gap-2">
                                    {{#each result.payload.entities as |entity|}}
                                        <div role="listitem" title={{entity.name}}>
                                            <div class="mb-1.5">
                                                <img src={{entity.photo_url}} alt={{entity.name}} class="w-full" />
                                            </div>
                                            <div class="text-xs truncate">{{entity.name}}</div>
                                        </div>
                                    {{/each}}
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            {{/each}}
        </div>
    </div>
{{/if}}