{% load static %}
<div class="async-select-many-wrapper">
    <select name="{{ widget.name }}" {% if widget.attrs.id %}id="{{ widget.attrs.id }}"{% endif %}
        class="async-select-many form-select" multiple
        data-api-endpoint="{{ widget.api_endpoint }}"
        data-model="{{ widget.app_label }}.{{ widget.model }}"
        data-search-field="{{ widget.search_field }}"
        data-min-length="{{ widget.min_length }}"
        data-required="{{ widget.required }}"
        data-required-css-class="{{ widget.required_css_class }}"
        style="display: none;">
        {% for item in widget.selected_items %}
            <option value="{{ item.id }}" selected class="async-select-many-chosen">{{ item.text }}</option>
        {% endfor %}
    </select>

    <div class="async-select-many-tags-container">
        <div class="async-select-many-tags">
            {% for item in widget.selected_items %}
                <span class="async-select-many-tag" data-value="{{ item.id }}">
                    <span class="async-select-many-tag-text">{{ item.text }}</span>
                    <button type="button" class="async-select-many-tag-remove" aria-label="Remove">×</button>
                </span>
            {% endfor %}
        </div>
        <input type="text" class="async-select-many-search form-control" placeholder="search (3 character minimum)" autocomplete="off">
    </div>

    <div class="async-select-many-dropdown dropdown-menu"></div>
</div>