<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="grid grid-cols-2 gap-3 text-xs dark:text-gray-100">
            <InputGroup @name={{t "fleet-ops.common.internal-id"}} @value={{@options.order.internal_id}} @helpText={{t "fleet-ops.component.modals.order-form.id-text"}} />

            <div class="input-group">
                <InputLabel @labelText={{t "fleet-ops.common.schedule"}} @helpText={{t "fleet-ops.component.modals.order-form.schedule-text"}} />
                <DateTimeInput class="form-input" @value={{@options.order.scheduled_at}} @minDate={{format-date (now) "yyyy-MM-d"}} @minTime={{format-date (now) "HH:mm"}} @onUpdate={{@options.scheduleOrder}} @disabled={{@options.order.isIntegratedVendorOrder}} />
            </div>

            <InputGroup @name={{t "fleet-ops.component.modals.order-form.customer"}} @helpText={{t "fleet-ops.component.modals.order-form.customer-text"}}>
                <ModelSelect @modelName="customer" @selectedModel={{@options.order.customer}} @placeholder={{t "fleet-ops.component.modals.order-form.select-customer"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{@options.setOrderCustomer}} as |model|>
                    <div class="flex items-center">
                        <div class="w-7">
                            <FaIcon @icon={{if model.isVendor "warehouse" "user" }} />
                        </div>
                        <span class="uppercase">
                            {{model.name}}
                        </span>
                    </div>
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.modals.order-form.facilitator"}} @helpText={{t "fleet-ops.component.modals.order-form.facilitator-text"}}>
                <ModelSelect @modelName="facilitator" @selectedModel={{@options.order.facilitator}} @placeholder={{t "fleet-ops.component.modals.order-form.select-facilitator"}} @triggerClass="form-select form-input" @allowClear={{true}} @infiniteScroll={{false}} @renderInPlace={{true}} @disabled={{@options.order.isIntegratedVendorOrder}} @onChange={{@options.setOrderFacilitator}} as |model|>
                    <div class="flex items-center">
                        <div class="w-7">
                            {{#if model.isIntegratedVendor}}
                                <Image src={{model.photo_url}} alt={{model.name}} class="w-4 h-4" width="16" height="16" />
                            {{else}}
                                <FaIcon @icon={{if model.isVendor "warehouse" "user" }} />
                            {{/if}}
                        </div>
                        <span class="uppercase">
                            {{model.name}}
                        </span>
                    </div>
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.modals.order-form.assign-driver"}} @helpText={{t "fleet-ops.component.modals.order-form.assign-driver-text"}}>
                <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @query={{this.driversQuery}} @placeholder={{t "fleet-ops.component.modals.order-form.select-driver"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @disabled={{@options.order.isIntegratedVendorOrder}} @allowClear={{true}} @onChange={{@options.setDriver}} as |model|>
                    <div class="flex items-center">
                        <div class="w-7">
                            <FaIcon @icon="id-card-alt" />
                        </div>
                        <div class="flex-1 flex flex-row truncate">
                            <span class="uppercase mr-2">{{model.name}}</span>
                            <span class="uppercase">{{model.phone}}</span>
                        </div>
                        {{#if this.order.facilitator}}
                            <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
                                <span class="text-xs text-green-900">
                                    {{this.order.facilitator.name}}
                                </span>
                            </div>
                        {{/if}}
                    </div>
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.modals.order-form.assign-vehicle"}} @helpText={{t "fleet-ops.component.modals.order-form.assign-vehicle-text"}}>
                <ModelSelect @modelName="vehicle" @selectedModel={{@options.order.vehicle_assigned}} @query={{this.driversQuery}} @placeholder={{t "fleet-ops.component.modals.order-form.select-vehicle"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @disabled={{@options.order.isIntegratedVendorOrder}} @allowClear={{true}} @onChange={{@options.setVehicle}} as |model|>
                    <div class="flex items-center">
                        <div class="w-6">
                            <Image @src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4 shadow-sm rounded-md" />
                        </div>
                        <div class="flex-1 flex flex-row truncate">
                            <span class="uppercase">{{model.display_name}}</span>
                        </div>
                    </div>
                </ModelSelect>
            </InputGroup>
        </div>
    </div>
</Modal::Default>