<!-- components/oxi-section/form/field/select -->
{{#if this.isStatic}}
    <div class="oxi-no-input"
        {{on-init @setFocusInfo false}}
    >
        {{@content.options.0.label}}
    </div>
{{else if @content.editable}}
    <div class="input-group has-validation">
        {{#if this.customMode}}
            <input
                type="text"
                class="form-control"
                value={{@content.value}}
                placeholder={{@content.placeholder}}
                required={{not @content.is_optional}}
                {{on "input" this.onCustomInput}}
                {{on-init this.onCustomInsert}}
                {{on-init @setFocusInfo true}}
            />
        {{else}}
            <OxiBase::Select
                @list={{this.options}}
                @selected={{this.sanitizedValue}}
                @onChange={{this.optionSelected}}
                required={{not @content.is_optional}}
                {{on-init @setFocusInfo true}}
            />
        {{/if}}
        <BsButton
            @type=""
            @active={{this.customMode}}
            @onClick={{this.toggleCustomMode}}
            class="btn-light border-secondary"
        >
            {{t 'component.oxifield_select.custom_value'}}
        </BsButton>
        <div class="invalid-feedback">{{@error}}</div>
    </div>
{{else}}
    <OxiBase::Select
        @list={{this.options}}
        @selected={{this.sanitizedValue}}
        @onChange={{this.optionSelected}}
        required={{not @content.is_optional}}
        {{on-init @setFocusInfo true}}
    />
    <div class="invalid-feedback">{{@error}}</div>
{{/if}}
