<div class="peasy-datalist-container">
    <p id="{{ name }}_errors" class="peasy-datalist-errors"></p>
    <div class="{{ wrapper_div_classlist }}" style="margin-bottom: .5rem;">
        <input type="text" id="{{ name }}_input" class="peasy-datalist-input {{ input_classlist }}"
            placeholder="Select one{% if single == 'false' %} or more{% endif %}" 
            autocomplete="off" list="{{ name }}_datalist">
        <button type="button" class="peasy-btn {{ add_btn_classlist }}" id="{{ name }}_add_btn"
            data-name="{{ name }}" data-inputid="{{ name }}_input" data-datalistid="{{ name }}_datalist" data-targetul="id_{{ name }}_ul" data-single="{{ single }}"
            onclick="datalistFilterAdd(this, event)">
            Add
        </button>
    </div>
    <datalist id="{{ name }}_datalist" {{ datalist_attrs|safe }}>
        {% for value, label in choices %}
            <option data-value="{{ value }}" value="{{ label }}"></option>
        {% endfor %}
    </datalist>


    <ul id="id_{{ name }}_ul" class="peasy-datalist-selected-box" aria-label="selected {{ name }}">
        {% for object in current_values %}
            <li class="peasy-flex-row">
                <input class="peasy-datalist-selected" type="text" value="{{ object }}" readonly>
                <input type="hidden" name="{{ name }}" value="{{ object.pk }}">
                <button type="button" class="peasy-datalist-rm-btn peasy-red" title="Remove witness"
                    onclick="choiceFilterRemoveItem(this)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
                </button>
            </li>
        {% endfor %}
    </ul>
</div>