{# djlint:off #}
<div {% if dynamic_options %}id="{{ options_hash }}{% if not context.unicorn.component_key %}{{ context.unicorn.component_name }}{% else %}{{ context.unicorn.component_key }}{% endif %}"{% endif %}>
    <div unicorn:ignore class="my-2">
        {% include "core_components/basic_elements/label.html" %}
        {# BUG: 'status' id is taken (by preloader div), and to avoid other issues like this, we add '-input' to the end of the div id #}
        <select id="{{ name }}{{ context.unicorn.component_key }}-input"
                class="select2 {% if multiselect %}select2-multiple{% endif %} form-control {% if allow_custom_input %}select2-dynamic{% endif %}"
                {% if multiselect %}multiple="multiple"{% endif %}
                data-toggle="select2"
                data-placeholder="Choose one ..."
                onchange="Unicorn.call('{% if not context.unicorn.component_key %}{{ context.unicorn.component_name }}{% else %}{{ context.unicorn.component_key }}{% endif %}', 'set_property', '{{ name }}', $('#{{ name }}{{ context.unicorn.component_key }}-input').val(){% if multiselect %}.join('--and--'){% endif %});">
            
            {% if not multiselect %}
                {% if initial_value %}
                    <option value="{{ initial_value }}">
                        {% for option in options %}
                            {% if initial_value == option.0 %}{{ option.1 }}{% endif %}
                        {% endfor %}
                    </option>
                {% else %}
                    <option value="NONE">Choose one...</option>
                {% endif %}
                {% for option in options %}
                    {% if option.0 != initial_value %}<option value="{{ option.0 }}">{{ option.1 }}</option>{% endif %}
                {% endfor %}
            {% else %}
                {% for option in options %}
                    <option value="{{ option.0 }}"
                            {% if initial_value and option.0 in initial_value %}selected{% endif %}>{{ option.1 }}</option>
                {% endfor %}
            {% endif %}
        </select>
    </div>
</div>
{# djlint:on #}
