{# djlint:off #}
<div hx-preserve id="{{ context.component.component_id }}-{{ name }}{% if dynamic_options %}-{{ options_hash }}{% endif %}" class="my-2">
    {% include "core/basic_elements/label.html" %}
    <select id="{{ context.component.component_id }}-{{ name }}-select2"
            name="{{ name }}"
            class="select2 {% if multiselect %}select2-multiple{% endif %} form-control {% if allow_custom_input %}select2-dynamic{% endif %}"
            data-toggle="select2"
            data-placeholder="{{ placeholder }}"
            {% if multiselect %}multiple="multiple"{% endif %}
            {% if popout_parent_id %}data-dropdown-parent="#{{ popout_parent_id }}"{% endif %}
            {% if not defer %}
                {% htmx_post indicator=indicator method_name=method_name trigger="select2-change" include=include %}
                onchange="htmx.trigger(this, 'select2-change')"
            {% endif %}
            >
        {% if not multiselect %}
            {% if initial_value %}
                <option value="{{ initial_value }}">
                    {% if tuple_mode %}
                        {% for option_val, option_display in options %}
                            {% if initial_value == option_val %}{{ option_display }}{% endif %}
                        {% endfor %}
                    {% else %}
                        {% for option in options %}
                            {% if initial_value == option %}{{ option }}{% endif %}
                        {% endfor %}
                    {% endif %}
                </option>
            {% else %}
                <option value="NONE">{{ placeholder }}</option>
            {% endif %}
            {% if tuple_mode %}
                {% for option_val, option_display in options %}
                    {% if option_val != initial_value %}<option value="{{ option_val }}">{{ option_display }}</option>{% endif %}
                {% endfor %}
            {% else %}
                {% for option in options %}
                    {% if option != initial_value %}<option value="{{ option }}">{{ option }}</option>{% endif %}
                {% endfor %}
            {% endif %}
        {% else %}
            {% if tuple_mode %}
                {% for option_val, option_display in options %}
                    <option value="{{ option_val }}"
                            {% if initial_value and option_val in initial_value %}selected{% endif %}>{{ option_display }}</option>
                {% endfor %}
            {% else %}
                {% for option in options %}
                    <option value="{{ option }}"
                            {% if initial_value and option in initial_value %}selected{% endif %}>{{ option }}</option>
                {% endfor %}
            {% endif %}
        {% endif %}
    </select>
    {# this is for a bug-fix. See the parse_post_data method for more info #}
    {% if multiselect %}<input type="hidden" name="{{ name }}__blankmultiselect" value=""/>{% endif %}
</div>
{# djlint:on #}