<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
            (concat (t "fleet-ops.component.fuel-report-form-panel.fuel-reported") ": " (format-date this.fuelReport.created_at "MMM dd, yyyy HH:mm"))
            (t "fleet-ops.component.fuel-report-form-panel.new-fuel-report")
        }}
        @status={{this.fuelReport.status}}
        @hideStatusDot={{true}}
        @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|}}
            <ContentPanel @title={{t "fleet-ops.component.fuel-report-form-panel.new-fuel-report"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
                    <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={{this.setReporter}}
                            @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"}} @wrapperClass="col-span-2">
                        <CoordinatesInput
                            @value={{this.fuelReport.location}}
                            @onChange={{this.onCoordinatesChanged}}
                            @onGeocode={{this.onAutocomplete}}
                            @onUpdatedFromMap={{this.onCoordinatesChanged}}
                            @onInit={{this.setCoordinatesInput}}
                            @disabled={{unauthorized}}
                        />
                    </InputGroup>

                    <RegistryYield @registry="fleet-ops:component:fuel-report-form-panel:details" as |RegistryComponent|>
                        <RegistryComponent @fuelReport={{this.fuelReport}} @controller={{this.controller}} @permission={{this.savePermission}} />
                    </RegistryYield>
                </div>
            </ContentPanel>

            <RegistryYield @registry="fleet-ops:component:fuel-report-form-panel" as |RegistryComponent|>
                <RegistryComponent @fuelReport={{this.fuelReport}} @controller={{this.controller}} @permission={{this.savePermission}} />
            </RegistryYield>
        {{/let}}
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>