{%- set class = [
    'select sprout-selectotherdropdown',
    class is defined ? class : null
]|filter|join(' ') %}

    {%- set options = (options is defined ? options : []) %}
    {%- set value = (value is defined ? value : null) %}
    {%- set hasOptgroups = false -%}

<div class="sprout-selectother">

    <div class="{{ class }}">
        <select
                {%- if id is defined %} id="{{ id }}"{% endif %}
                {%- if toggle is defined and toggle %} class="fieldtoggle"{% endif %}
                {%- if name is defined %} name="{{ name }}"{% endif %}
                {%- if autofocus is defined and autofocus and not craft.request.isMobileBrowser(true) %} autofocus{% endif %}
                {%- if disabled is defined and disabled %} disabled{% endif %}
                {%- if targetPrefix is defined %} data-target-prefix="{{ targetPrefix }}"{% endif %}>
            {% for key, option in options %}
            {% if option.optgroup is defined %}
            {% if hasOptgroups %}
                </optgroup>
            {% else %}
                {% set hasOptgroups = true %}
            {% endif %}
            <optgroup label="{{ option.optgroup }}">
                {% else %}
                    {% set optionLabel = (option.label is defined ? option.label : option) %}
                    {% set optionValue = (option.value is defined ? option.value : key) %}
                    {% set optionDisabled = (option.disabled is defined ? option.disabled : false) %}
                    <option value="{{ optionValue }}"{% if optionValue == value %} selected{% endif %}{% if optionDisabled %} disabled{% endif %}>{{ optionLabel }}</option>
                {% endif %}
                {% endfor %}
                {% if hasOptgroups %}
            </optgroup>
            {% endif %}
        </select>
    </div>

    <div class="texticon clearable sprout-selectothertext hidden">
        <input class="text fullwidth"
               type="text"{%- if name is defined %} name="{{ name }}"{% endif %}
               value="{{ value }}"
               autocomplete="off"{%- if otherPlaceholderText is defined %} placeholder="{{ otherPlaceholderText }}"{% endif %}>
        <div class="clear" title="Clear"></div>
    </div>

</div>

{% do view.registerAssetBundle("barrelstrength\\sproutbase\\app\\fields\\web\\assets\\selectother\\SelectOtherFieldAsset") %}