<a
    id="{{ route_name }}__item__{{ item.value|urlencode }}"
    class="item {{ item.selected|yesno:'selected,' }}"
    onblur="phac_aspc_autocomplete_blur_handler('{{ route_name }}', {{ multiselect|yesno:'false,true' }})"
    {% if not item.selected %}
    href="#"
    hx-put="{% url route_name method='toggle' %}"
    hx-include="#{{ route_name }} > input[name='{{ name }}']"
    hx-vals='{"item": "{{ item.value|urlencode }}"}'
    {% endif %}
    hx-swap="outerHTML"
    {% if swap_oob %}
    hx-swap-oob="outerHTML:#{{ route_name }}__item__{{ item.value|urlencode }}"
    {% endif %}
>
    {{ item.label }}
</a>

{% if toggle is not None %}
    <div id="{{ route_name }}" hx-swap-oob="true">
        {% include "./values.html" %}
    </div>
    {% if multiselect %}
        <div
            id="{{ route_name }}__selected_items"
            hx-swap-oob="#{{ route_name }}__selected_items"
        >
            {% include "./chip_list.html" with items=toggle %}
        </div>
    {% 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 %}