{% load autocomplete %}
<a
    id="{{ route_name }}__item__{{ item.value|make_id }}"
    class="item {{ item.selected|yesno:'selected,' }}"
    {% if not item.selected %}
    onblur="return phac_aspc_autocomplete_blur_handler(event, '{{ route_name }}', {{ multiselect|yesno:'false,true' }}, true)"
    onkeydown="return phac_aspc_autocomplete_keydown_handler(event)"
    href="#"
    hx-put="{% url route_name method='toggle' %}"
    hx-params="{{ route_name }},item"
    hx-include="#{{ route_name }}"
    hx-vals='{"item": "{{ item.value|escapejs }}"}'
    {% endif %}
    hx-swap="outerHTML"
    {% if swap_oob %}
    hx-swap-oob="outerHTML:#{{ route_name }}__item__{{ item.value|make_id }}"
    {% endif %}
>
    {{ item.label|search_highlight:search }}
</a>

{% if toggle is not None %}
    <div id="{{ route_name }}" hx-swap-oob="true">
        {% include "./values.html" %}
    </div>
    {% if multiselect %}
        {% include "./ac_container.html" with selected_items=toggle %}
    {% else %}
        <span
            id="{{ route_name }}__data"
            hx-swap-oob="outerHTML:#{{ route_name }}__data"
            data-phac-aspc-autocomplete="{{ item.label }}"
        ></span>
        {% for item in toggle %}
            {% if not item.selected %}
                {% include "autocomplete/item.html" with toggle=None swap_oob=True %}
            {% endif %}
        {% endfor %}
    {% endif %}
{% endif %}