<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="grid grid-cols-1 text-xs dark:text-gray-100">
            <InputGroup @name={{t "fleet-ops.common.driver"}}>
                <ModelSelect
                    @modelName="driver"
                    @selectedModel={{@options.fuelReport.driver}}
                    @placeholder={{t "fleet-ops.component.modals.fuel-report-form.select-driver"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut @options.fuelReport.driver)}}
                    @onChangeId={{fn (mut @options.fuelReport.driver_uuid)}}
                    as |model|
                >
                    {{model.name}}
                </ModelSelect>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.vehicle"}}>
                <ModelSelect
                    @modelName="vehicle"
                    @selectedModel={{@options.fuelReport.vehicle}}
                    @placeholder={{t "fleet-ops.component.modals.fuel-report-form.select-vehicle"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut @options.fuelReport.vehicle)}}
                    @onChangeId={{fn (mut @options.fuelReport.vehicle_uuid)}}
                    as |model|
                >
                    {{model.display_name}}
                </ModelSelect>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.odometer"}} @type="number" @value={{@options.fuelReport.odometer}} />
            <InputGroup @name={{t "fleet-ops.common.cost"}}>
                <MoneyInput
                    class="w-full"
                    @value={{@options.fuelReport.amount}}
                    @currency={{@options.fuelReport.currency}}
                    @canSelectCurrency={{true}}
                    @onCurrencyChange={{fn (mut @options.fuelReport.currency)}}
                />
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.component.modals.fuel-report-form.volume"}} @helpText={{t "fleet-ops.component.modals.fuel-report-form.volume-text"}} @wrapperClass="w-full">
                <UnitInput
                    class="w-full"
                    @measurement="volume"
                    @value={{@options.fuelReport.volume}}
                    @unit={{@options.fuelReport.metric_unit}}
                    @canSelectUnit={{true}}
                    @onUnitChange={{fn (mut @options.fuelReport.metric_unit)}}
                />
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.coordinates"}}>
                <CoordinatesInput @value={{@options.fuelReport.location}} @onChange={{fn (mut @options.fuelReport.location)}} />
            </InputGroup>
        </div>
    </div>
</Modal::Default>