<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.fleet.public_id this.fleet.name (t "fleet-ops.component.fleet-form-panel.title")}}
        @status={{this.fleet.public_id}}
        @hideStatusDot={{true}}
        @createdAt={{this.fleet.createdAt}}
        @titleWrapperClass="leading-5"
    >
        <div class="flex flex-1 justify-end">
            <Button
                @icon={{if this.fleet.id "save" "check"}}
                @type="primary"
                @text={{if this.fleet.id (t "fleet-ops.component.fleet-form-panel.save-fleet") (t "fleet-ops.component.fleet-form-panel.create-fleet")}}
                @onClick={{perform this.save}}
                @isLoading={{not this.save.isIdle}}
                @wrapperClass="mr-2"
                @permission={{this.savePermission}}
            />
            {{#if this.fleet.id}}
                <Button
                    @type="default"
                    @icon="id-card"
                    @helpText={{t "fleet-ops.component.fleet-form-panel.view-details"}}
                    @onClick={{this.onViewDetails}}
                    @wrapperClass="mr-2"
                    @permission="fleet-ops view fleet"
                />
            {{/if}}
            <Button
                @type="default"
                @icon="times"
                @helpText={{if this.fleet.id (t "fleet-ops.component.fleet-form-panel.cancel-edit-fleet") (t "fleet-ops.component.fleet-form-panel.cancel-new-fleet")}}
                @onClick={{this.onPressCancel}}
            />
        </div>
    </Overlay::Header>

    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
        <div class="modal-body-container">
            {{#let (cannot this.savePermission) as |unauthorized|}}
                <div class="flex flex-col text-xs dark:text-gray-100">
                    <InputGroup @name={{t "fleet-ops.component.fleet-form-panel.fleet-name"}} @value={{this.fleet.name}} @disabled={{unauthorized}} />
                    <InputGroup @name={{t "fleet-ops.component.fleet-form-panel.parent-fleet"}} @value={{this.fleet.parent_fleet}}>
                        <ModelSelect
                            @modelName="fleet"
                            @selectedModel={{this.fleet.parent_fleet}}
                            @placeholder={{t "fleet-ops.component.fleet-form-panel.select-parent-fleet"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @renderInPlace={{true}}
                            @onChange={{fn this.updateRelationship "parent_fleet"}}
                            @allowClear={{true}}
                            @disabled={{unauthorized}}
                            as |model|
                        >
                            {{model.name}}
                        </ModelSelect>
                    </InputGroup>
                    <InputGroup @name={{t "fleet-ops.common.vendor"}} @value={{this.fleet.vendor}}>
                        <ModelSelect
                            @modelName="vendor"
                            @selectedModel={{this.fleet.vendor}}
                            @placeholder={{t "fleet-ops.component.fleet-form-panel.select-vendor"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @renderInPlace={{true}}
                            @onChange={{fn this.updateRelationship "vendor"}}
                            @allowClear={{true}}
                            @disabled={{unauthorized}}
                            as |model|
                        >
                            {{model.name}}
                        </ModelSelect>
                    </InputGroup>
                    <InputGroup @name={{t "fleet-ops.component.fleet-form-panel.service-title"}} @value={{this.fleet.service_area}}>
                        <ModelSelect
                            @modelName="service-area"
                            @selectedModel={{this.fleet.service_area}}
                            @placeholder={{t "fleet-ops.component.fleet-form-panel.select-service"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @renderInPlace={{true}}
                            @onChange={{fn this.updateRelationship "service_area"}}
                            @allowClear={{true}}
                            @disabled={{unauthorized}}
                            as |model|
                        >
                            {{model.name}}
                        </ModelSelect>
                    </InputGroup>
                    {{#if this.fleet.service_area}}
                        <InputGroup @name={{t "fleet-ops.component.fleet-form-panel.zone-title"}} @value={{this.fleet.zone}}>
                            <ModelSelect
                                @modelName="zone"
                                @selectedModel={{this.fleet.zone}}
                                @query={{hash service_area_uuid=this.fleet.service_area.id}}
                                @placeholder={{t "fleet-ops.component.fleet-form-panel.select-zone"}}
                                @triggerClass="form-select form-input"
                                @infiniteScroll={{false}}
                                @renderInPlace={{true}}
                                @onChange={{fn this.updateRelationship "zone"}}
                                @allowClear={{true}}
                                @disabled={{unauthorized}}
                                as |model|
                            >
                                {{model.name}}
                            </ModelSelect>
                        </InputGroup>
                    {{/if}}
                    <InputGroup @name={{t "fleet-ops.common.status"}} @helpText={{t "fleet-ops.component.fleet-form-panel.select-status-fleet"}}>
                        <Select
                            @options={{this.statusOptions}}
                            @value={{this.fleet.status}}
                            @onSelect={{fn (mut this.fleet.status)}}
                            @placeholder={{t "fleet-ops.component.fleet-form-panel.select-status"}}
                            @disabled={{unauthorized}}
                            class="w-full"
                        />
                    </InputGroup>
                    <InputGroup
                        @name={{t "fleet-ops.component.fleet-form-panel.task-mission-title"}}
                        @helpText={{t "fleet-ops.component.fleet-form-panel.task-text"}}
                        @value={{this.fleet.task}}
                        @disabled={{unauthorized}}
                    />
                </div>
            {{/let}}
        </div>
        {{yield}}
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>