<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="grid grid-cols-2 gap-4 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>