<Overlay
    @onLoad={{this.setOverlayContext}}
    @onOpen={{this.onOpen}}
    @onClose={{this.onClose}}
    @onToggle={{this.onToggle}}
    @position="right"
    @noBackdrop={{true}}
    @fullHeight={{true}}
    @isResizable={{or this.isResizable @isResizable}}
    @width={{or this.width @width "570px"}}
>
    <Overlay::Header
        @title={{if
            this.activity.status
            (concat (t "fleet-ops.component.activity-form-panel.title-concat") this.activity.status)
            (t "fleet-ops.component.activity-form-panel.new-activity-title")
        }}
        @hideStatusDot={{true}}
        @titleWrapperClass="leading-5"
    >
        <div class="flex flex-1 justify-end">
            <Button @type="primary" @icon="save" @text={{t "common.save"}} @onClick={{perform this.save}} @isLoading={{this.save.isRunning}} @wrapperClass="mr-2" />
            <Button @type="default" @icon="times" @text={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
        </div>
    </Overlay::Header>

    <Overlay::Body @wrapperClass="px-4 pt-4">
        <InputGroup
            @name={{t "fleet-ops.component.activity-form-panel.key"}}
            @value={{this.activity.key}}
            @helpText={{t "fleet-ops.component.activity-form-panel.key-help"}}
            {{on "input" this.setActivityKey}}
        />
        <InputGroup
            @name={{t "fleet-ops.component.activity-form-panel.code"}}
            @value={{this.activity.code}}
            @helpText={{t "fleet-ops.component.activity-form-panel.code-help"}}
            {{on "input" this.setActivityCode}}
        />
        <InputGroup @name={{t "fleet-ops.component.activity-form-panel.status"}} @value={{this.activity.status}} @helpText={{t "fleet-ops.component.activity-form-panel.status-help"}} />
        <InputGroup @name={{t "fleet-ops.component.activity-form-panel.details"}} @value={{this.activity.details}} @helpText={{t "fleet-ops.component.activity-form-panel.details-help"}} />
        <InputGroup>
            <Toggle @isToggled={{this.activity.complete}} @onToggle={{fn (mut this.activity.complete)}}>
                <span class="dark:text-gray-100 text-sm ml-2">{{t "fleet-ops.component.activity-form-panel.completes-order"}}</span>
            </Toggle>
        </InputGroup>
        <InputGroup @helpText={{t "fleet-ops.component.activity-form-panel.require-pod-help-text"}}>
            <Toggle @isToggled={{this.activity.require_pod}} @onToggle={{fn (mut this.activity.require_pod)}} @helpText={{t "fleet-ops.component.activity-form-panel.require-pod-help-text"}}>
                <span class="dark:text-gray-100 text-sm mx-2">{{t "fleet-ops.component.activity-form-panel.require-pod"}}</span>
            </Toggle>
        </InputGroup>
        {{#if this.activity.require_pod}}
            <InputGroup @name={{t "fleet-ops.component.activity-form-panel.select-pod-method"}}>
                <select class="form-select w-full has--placeholder" {{on "change" this.setProofOfDeliveryMethod}}>
                    <option selected disabled>
                        {{t "fleet-ops.component.activity-form-panel.pod-method-placeholder"}}
                    </option>
                    {{#each this.podOptions as |podOption|}}
                        <option value={{podOption}} selected={{eq this.activity.pod_method podOption}}>
                            {{smart-humanize podOption}}
                        </option>
                    {{/each}}
                </select>
            </InputGroup>
        {{/if}}
        <ActivityLogicBuilder @activity={{this.activity}} @onChange={{this.updateActivityLogic}} class="mb-4" />
        <ActivityEventSelector @activity={{this.activity}} @onChange={{this.updateActivityEvents}} />
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>