<div class={{or @wrapperClass @options.wrapperClass}}>
    <div class="fleet-vehicle-listing" ...attributes>
        <div class="mb-3 flex items-center justify-between">
            <div class="flex items-center">
                <div class="fleet-vehicle-listing-search">
                    <Input
                        @type="text"
                        {{on "input" this.onInput}}
                        placeholder={{t "fleet-ops.component.fleet-panel.vehicle-listing.search-vehicle"}}
                        class="w-64 form-input form-input-sm"
                    />
                </div>
                {{#if this.search.isRunning}}
                    <div class="mx-2">
                        <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
                    </div>
                {{/if}}
            </div>
            <div class="w-56">
                <ModelSelect
                    @modelName="vehicle"
                    @selectedModel={{this.selectedVehicle}}
                    @placeholder={{t "fleet-ops.component.fleet-panel.vehicle-listing.add-vehicle"}}
                    @triggerClass="form-select form-input form-select-sm form-input-sm"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{this.onAddVehicle}}
                    as |model|
                >
                    {{model.displayName}}
                </ModelSelect>
            </div>
        </div>
        <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900 text-xs">
            <div class="w-full">
                <div class="grid grid-cols-12 text-xs p-3 font-bold text-gray-800 dark:text-gray-100 border-b border-gray-200 dark:border-gray-900 shadow">
                    {{#if this.selectable}}
                        <div></div>
                    {{/if}}
                    <div class="col-span-4 flex items-center">{{t "fleet-ops.common.vehicle"}}</div>
                    <div class="col-span-7 flex items-center"></div>
                </div>
            </div>
            <div class="h-48 overflow-y-scroll">
                {{#if this.search.isRunning}}
                    <div class="flex items-center justify-center p-4 dark:text-gray-100">
                        <div class="mr-2">
                            <Spinner @iconClass="text-sky-500" />
                        </div>
                        <span>{{t "fleet-ops.component.fleet-panel.vehicle-listing.loading-vehicle"}}</span>
                    </div>
                {{/if}}
                {{#each this.vehicles as |vehicle|}}
                    <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
                        <div class="flex flex-row items-center">
                            {{#if this.selectable}}
                                <div class="flex items-center mr-2">
                                    <Checkbox @value={{includes vehicle this.selected}} @onToggle={{fn this.onSelect vehicle}} />
                                </div>
                            {{/if}}
                            <div class="flex items-center">
                                <div class="flex flex-row items-start">
                                    <div class="mr-2">
                                        <div class="relative">
                                            <Image src={{vehicle.photo_url}} alt={{vehicle.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.vehicleImage"}} />
                                            <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if vehicle.online 'text-green-500' 'text-yellow-200'}}" />
                                        </div>
                                    </div>
                                    <div>
                                        <div class="font-semibold">{{vehicle.displayName}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center justify-end">
                            <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemoveVehicle vehicle)}}>
                                <FaIcon @icon="times" @prefix="fas" class="mr-1" />
                                <span>{{t "fleet-ops.common.remove"}}</span>
                            </a>
                        </div>
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
</div>