<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>