{% load autocomplete %}
<div
    {% comment %} class="results {{ show|yesno:'show,' }}" {% endcomment %}
    class="results show"
    id="{{ component_id }}__items"
    role="listbox"
    {% if multiselect %}
    aria-description="{% use_string "multiselect" custom_strings %}"
    aria-multiselectable="true"
    {% endif %}
>
    {% for item in items %}
        {% include "./item.html" %}
    {% endfor %}
    {% if query_too_short %}
        <span class="item">
            {% use_string "type_at_least_n_characters" custom_strings as str_template %}
            {% substitute_string str_template n=minimum_search_length %}
        </span>
    {% elif not items %}
        <span class="item">
            {% use_string "no_results" custom_strings %}
        </span>
    {% endif %}

    {% if items|length != total_results %}
        <div class="more-results">
            <span>
                {% use_string "more_results" custom_strings as more_results_template %}
                {% substitute_string more_results_template page_size=items|length total=total_results %}
            </span>
        </div>
    {% endif %}
</div>

<div hx-swap-oob="innerHTML" id="{{ component_id }}__info">
    {% if items|length != total_results %}
        {% use_string "more_results" custom_strings as more_results_template %}
        {% substitute_string more_results_template page_size=items|length total=total_results %}
    {% else %}
    {% use_string "available_results" custom_strings %}
    {% endif %}
</div>  
