<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"
                @permission={{this.savePermission}}
            />
            {{#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"
                    @permission="fleet-ops view fuel-report"
                />
            {{/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">
        {{#let (cannot this.savePermission) as |unauthorized|}}
            <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)}}
                        @disabled={{unauthorized}}
                        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)}}
                        @disabled={{unauthorized}}
                        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)}}
                        @disabled={{unauthorized}}
                        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"
                            @disabled={{unauthorized}}
                            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)}}
                        @disabled={{unauthorized}}
                    />
                </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)}}
                        @disabled={{unauthorized}}
                    />
                </InputGroup>
                <InputGroup @name={{t "fleet-ops.common.coordinates"}}>
                    <CoordinatesInput @value={{this.fuelReport.location}} @onChange={{fn (mut this.fuelReport.location)}} @disabled={{unauthorized}} />
                </InputGroup>
            </div>
        {{/let}}
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>