<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
    <Overlay::Header @title={{if this.fuelReport.public_id this.fuelReport.name (t "fleet-ops.component.fuel-report-form-panel.fuel-report") }} @status={{this.fuelReport.public_id}} @hideStatusDot={{true}} @createdAt={{this.fuelReport.createdAt}} @titleWrapperClass="leading-5">
        <div class="flex flex-1 justify-end">
            <Button @icon={{if this.fuelReport.id "save" "check"}} @type="primary" @text={{if this.fuelReport.id (t "fleet-ops.component.fuel-report-form-panel.save-fuel-report")(t "fleet-ops.component.fuel-report-form-panel.create-fuel-report") }} @onClick={{perform this.save}} @isLoading={{this.save.isRunning}} @wrapperClass="mr-2" />
            {{#if this.fuelReport.id}}
                <Button @type="default" @icon="gas-pump" @helpText={{t "fleet-ops.component.fuel-report-form-panel.view-details"}} @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
            {{/if}}
            <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id (t "fleet-ops.component.fuel-report-form-panel.cancel-edit-fuel-report")(t "fleet-ops.component.fuel-report-form-panel.cancel-new-fuel-report") }} @onClick={{this.onPressCancel}} />
        </div>
    </Overlay::Header>

    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
        <div class="grid grid-cols-1 text-xs dark:text-gray-100">
            <InputGroup @name={{t "fleet-ops.common.reporter"}}>
                <ModelSelect @modelName="user" @selectedModel={{this.fuelReport.reporter}} @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-reporter"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.reporter)}} @onChangeId={{fn (mut this.fuelReport.reported_by_uuid)}} as |model|>
                    {{model.name}}
                </ModelSelect>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.driver"}}>
                <ModelSelect @modelName="driver" @selectedModel={{this.fuelReport.driver}} @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-driver"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.driver)}} @onChangeId={{fn (mut this.fuelReport.driver_uuid)}} as |model|>
                    {{model.name}}
                </ModelSelect>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.vehicle"}}>
                <ModelSelect @modelName="vehicle" @selectedModel={{this.fuelReport.vehicle}} @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-vehicle"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.vehicle)}} @onChangeId={{fn (mut this.fuelReport.vehicle_uuid)}} as |model|>
                    {{model.display_name}}
                </ModelSelect>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.status"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect @options={{this.statusOptions}} @selected={{this.fuelReport.status}} @onChange={{fn (mut this.fuelReport.status)}} @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-fuel-report"}} @triggerClass="form-select form-input" as |status|>
                        {{smart-humanize status}}
                    </PowerSelect>
                </div>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.component.fuel-report-form-panel.odometer"}} @type="number" @value={{this.fuelReport.odometer}} />
            <InputGroup @name={{t "fleet-ops.component.fuel-report-form-panel.cost"}}>
                <MoneyInput class="w-full" @value={{this.fuelReport.amount}} @currency={{this.fuelReport.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.fuelReport.currency)}} />
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.component.fuel-report-form-panel.volume"}} @helpText={{t "fleet-ops.component.fuel-report-form-panel.select-volume-text"}} @wrapperClass="w-full">
                <UnitInput class="w-full" @measurement="volume" @value={{this.fuelReport.volume}} @unit={{this.fuelReport.metric_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut this.fuelReport.metric_unit)}} />
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.coordinates"}}>
                <CoordinatesInput @value={{this.fuelReport.location}} @onChange={{fn (mut this.fuelReport.location)}} />
            </InputGroup>
        </div>
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>