<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>