<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.customField.label
            (concat (t "fleet-ops.component.custom-field-form-panel.custom-field-title-concat") this.customField.label)
            (t "fleet-ops.component.custom-field-form-panel.new-custom-field")
        }}
        @hideStatusDot={{true}}
        @titleWrapperClass="leading-5"
    >
        <div class="flex flex-1 justify-end">
            <Button
                @icon={{if this.customField.id "save" "check"}}
                @type="primary"
                @text={{if this.customField.id (t "fleet-ops.component.custom-field-form-panel.save-custom-field") (t "fleet-ops.component.custom-field-form-panel.create-custom-field")}}
                @onClick={{perform this.save}}
                @isLoading={{not this.save.isIdle}}
                @wrapperClass="mr-2"
            />
            <Button
                @type="default"
                @icon="times"
                @helpText={{if
                    this.customField.id
                    (t "fleet-ops.component.custom-field-form-panel.cancel-edit-custom-field")
                    (t "fleet-ops.component.custom-field-form-panel.close-new-custom-field")
                }}
                @onClick={{this.onPressCancel}}
            />
        </div>
    </Overlay::Header>

    <Overlay::Body @wrapperClass="px-4 pt-4">
        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-label"}} @value={{this.customField.label}} {{on "input" this.setCustomFieldName}} />
        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-description"}} @value={{this.customField.description}} />
        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-help-text"}} @value={{this.customField.help_text}} />
        <InputGroup>
            <Toggle @isToggled={{this.customField.required}} @onToggle={{fn (mut this.customField.required)}}>
                <span class="dark:text-gray-100 text-sm ml-2">{{t "fleet-ops.component.custom-field-form-panel.field-is-required"}}</span>
            </Toggle>
        </InputGroup>
        <InputGroup>
            <Toggle @isToggled={{this.customField.editable}} @onToggle={{fn (mut this.customField.editable)}}>
                <span class="dark:text-gray-100 text-sm ml-2">{{t "fleet-ops.component.custom-field-form-panel.field-is-editable"}}</span>
            </Toggle>
        </InputGroup>
        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-type"}}>
            <select class="form-select w-full has--placeholder" {{on "change" this.onSelectCustomFieldType}}>
                <option selected disabled>
                    {{t "fleet-ops.component.custom-field-form-panel.select-field-type"}}
                </option>
                {{#each-in this.customFieldTypeMap as |key|}}
                    <option value={{dasherize key}} selected={{eq this.customField.type (dasherize key)}}>
                        {{smart-humanize key}}
                    </option>
                {{/each-in}}
            </select>
        </InputGroup>
        {{#if this.currentFieldMap.hasOptions}}
            <CustomFieldFormPanel::OptionsInput @customField={{this.customField}} @fieldMap={{this.currentFieldMap}} class="mb-4" />
        {{/if}}
        {{#if this.currentFieldMap.allowedModels}}
            <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-model-type"}}>
                <select class="form-select w-full has--placeholder" {{on "change" this.onSelectModelType}}>
                    <option selected disabled>
                        {{t "fleet-ops.component.custom-field-form-panel.field-select-model-type"}}
                    </option>
                    {{#each this.currentFieldMap.allowedModels as |modelName|}}
                        <option value={{dasherize modelName}} selected={{eq this.customField.meta.modelName (dasherize modelName)}}>
                            {{smart-humanize modelName}}
                        </option>
                    {{/each}}
                </select>
            </InputGroup>
        {{/if}}
        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.meta-col-span"}}>
            <DropdownButton
                @text={{concat (t "fleet-ops.component.custom-field-form-panel.col-span-size") ": " (n-a this.customField.meta.colSpan)}}
                @textClass="text-sm mr-2"
                @buttonClass="flex-row-reverse w-64 justify-between"
                @icon="caret-down"
                @iconClass="mr-0i"
                @size="sm"
                @iconPrefix="fas"
                @triggerClass="hidden md:flex"
                as |dd|
            >
                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                    <div class="p-1">
                        {{#each this.colSpanSizeOptions as |size|}}
                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.setCustomFieldMetaProperty "colSpan" size)}}>
                                <div class="flex-1 flex flex-row items-center">
                                    <div class="w-6">
                                        <FaIcon @icon="grip" />
                                    </div>
                                    <span>{{size}}</span>
                                </div>
                                <div>
                                    {{#if (eq size this.customField.meta.colSpan)}}
                                        <FaIcon @icon="check" class="text-green-500" />
                                    {{/if}}
                                </div>
                            </a>
                        {{/each}}
                    </div>
                </div>
            </DropdownButton>
        </InputGroup>
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>