{{#if this.customFieldComponent}}
    <div class="{{if this.customField.meta.colSpan (concat "col-span-" this.customField.meta.colSpan) ''}}">
        {{#if (eq this.customFieldComponent "input")}}
            <InputGroup @name={{this.customField.label}} @value={{this.value}} @required={{this.customField.required}} @helpText={{this.customField.help_text}} {{on "input" this.onChangeHandler}} />
        {{else if (eq this.customFieldComponent "select")}}
            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
                <select class="form-select w-full has--placeholder" {{on "change" this.onChangeHandler}}>
                    <option selected disabled>
                        {{this.customField.label}}
                    </option>
                    {{#each this.customField.options as |selectOption|}}
                        <option value={{selectOption}} selected={{eq this.value selectOption}}>
                            {{selectOption}}
                        </option>
                    {{/each}}
                </select>
            </InputGroup>
        {{else if (eq this.customFieldComponent "phone-input")}}
            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
                <PhoneInput @value={{this.value}} @onInput={{this.onChangeHandler}} class="form-input w-full" />
            </InputGroup>
        {{else if (eq this.customFieldComponent "money-input")}}
            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
                <MoneyInput class="w-full" @wrapperClass="x-fleetops-input-height shadow-md" @value={{this.value}} @canSelectCurrency={{true}} @onChange={{this.onChangeHandler}} />
            </InputGroup>
        {{else if (eq this.customFieldComponent "date-time-input")}}
            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
                <DateTimeInput class="form-input" @value={{this.value}} @minDate={{format-date (now) "yyyy-MM-d" }} @minTime={{format-date (now) "HH:mm" }} @onUpdate={{this.onChangeHandler}} />
            </InputGroup>
        {{else if (eq this.customFieldComponent "radio-button-select")}}
            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
                <div class="mt-2 flex items-center space-x-2">
                    {{#each this.customField.options as |radioOption index|}}
                        <div class="radio-group-item shadow-sm {{if (eq this.value radioOption) 'is-checked'}}">
                            <div class="flex items-center">
                                <RadioButton @radioClass="focus:ring-blue-500" @radioId={{concat this.customField.name "-radio-option-" index}} @value={{radioOption}} @groupValue={{this.value}} @name={{radioOption}} @changed={{this.onChangeHandler}} />
                                <div class="ml-2 text-sm dark:text-gray-100 text-gray-900 truncate">{{radioOption}}</div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </InputGroup>
        {{else if (eq this.customFieldComponent "file-upload")}}
            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
                <div class="flex items-center">
                    <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{false}} @onFileAdded={{this.onFileAddedHandler}}>
                        <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
                            <FaIcon @icon="upload" @size="sm" class="mr-2" />{{t "common.select-file"}}
                        </a>
                    </FileUpload>
                    {{#if this.file}}
                        <div class="ml-2 flex items-center text-sm">
                            <Spinner class="dark:text-blue-400 text-blue-900" />
                            <span class="ml-2 text-xs dark:text-blue-400 text-blue-900">{{round this.file.progress}}%</span>
                        </div>
                    {{/if}}
                </div>
                {{#if this.uploadedFile}}
                    <File @file={{this.uploadedFile}} @onDelete={{this.removeFile}} class="custom-field-file" />
                {{/if}}
            </InputGroup>
        {{/if}}
    </div>
{{/if}}