<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" />
            {{#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" />
            {{/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">
            <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}} />
                <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}}
                        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}}
                        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}}
                        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}}
                            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"}} 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}} />
            </div>
        </div>
        {{yield}}
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>