{% load static %}
{% load autocomplete %}
{% comment %} 
This is the main component template that creates the basic HTML structure.
{% endcomment %}
<div class="phac_aspc_form_autocomplete_focus_ring {{ disabled|yesno:'disabled,' }}">
  <div
    id="{{ component_id }}__container"
    class="phac_aspc_form_autocomplete"

    data-autocomplete-componentid="{{ component_id }}"
    data-autocomplete-root
    data-autocomplete-toggleurl="{% url 'autocomplete:toggle' route_name %}"
    {% if disabled %}
    data-autocomplete-disabled
    {% endif %}

    {% if multiselect %}
    data-autocomplete-multiselect
    {% endif %}
  >
    {% comment %} Hidden input elements used to maintain the component's state {% endcomment %}
    {% comment %} and used when submitting forms {% endcomment %}
    <div id="{{ component_id }}">
      {% include "./values.html" %}
    </div>

    {% comment %} Data element used to store component state data {% endcomment %}
    <span
      id="{{ component_id }}__data"
      {% if not multiselect and selected_items|length == 1 %}
      data-phac-aspc-autocomplete="{% get_input_value selected_items %}"
      {% endif %}
    ></span>

    {% if label is not None %}
    <label for="{{ component_id }}__textinput" class="form-label">{{ label }}</label>
    {% endif %}

    {% include "./ac_container.html" %}
    <div
      class="results"
      role="listbox"
      id="{{ component_id }}__items"
      {% if multiselect %}
      aria-description="{% use_string "multiselect" custom_strings %}"
      aria-multiselectable="true"
      {% endif %}
    ></div>
    {% comment %} This region provides contextual information for screen readers {% endcomment %}
    <div role="region" class="live_info" id="{{ component_id }}__info" aria-live="polite">
        {% if selected_items|length > 0 %}
            {% for item in selected_items %}
                {% with item=item.label %}
                    {% use_string "item_selected" custom_strings %}
                {% endwith %}
            {% endfor %}
        {% else %}
            {% use_string "nothing_selected" custom_strings %}
        {% endif %}
    </div>
    {% comment %} This div provides screen readers information about selected items {% endcomment %}
    {% if multiselect %}
    <div class="sr_description sr-only" id="{{ component_id }}__sr_description"
         style="height:0; overflow:hidden;">
        {% if selected_items|length > 0 %}
            {{ selected_items|length }} {% use_string "selected" custom_strings %}
            {% for item in selected_items %}
            {% with item=item.label %}
                {% use_string "item_selected" custom_strings %}
            {% endwith %}
            {% endfor %}
            {% use_string "backspace_instruction" custom_strings %}
        {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% comment %} This code snippet loads the required CSS and JS if not already loaded. {% endcomment %}
<script
    data-css="{% static 'autocomplete/css/autocomplete.css' %}"
    data-js="{% static "autocomplete/js/autocomplete.js" %}"
>
    (function () {
        const { css, js } = document.currentScript.dataset;
        
        // Add CSS if not already added
        const ln = document.createElement('link');
        ln.href = css;
        ln.rel = 'stylesheet';
        if (!Array.from(document.querySelectorAll('link')).map(s => s.href).includes(ln.href)) {
            document.getElementsByTagName('head')[0].appendChild(ln);
        }
        
        // Add JS if not already added
        const sc = document.createElement('script');
        sc.src = js;
        if (!Array.from(document.querySelectorAll('script')).map(s => s.src).includes(sc.src)) {
            document.body.appendChild(sc);
        }
    })();
</script>
