{% load i18n %}
{% load autocomplete_light_tags %}

<span class="autocomplete-light-widget {{ name }}" id="{{ widget.html_id }}-wrapper"
    {{ widget.widget_js_attributes|autocomplete_light_data_attributes }}
    {{ widget.autocomplete_js_attributes|autocomplete_light_data_attributes:'autocomplete-' }}
    >

    {# a deck that should contain the list of selected options #}
    {{ choices }}
    <div id="{{ html_id }}-deck" class="deck" >
        {% for choice in autocomplete.choices_for_values %}
            {{ choice|autocomplete_light_choice_html:autocomplete }}
        {% endfor %}
    </div>

    {# a text input, that is the 'autocomplete input' #}
    <input type="text" class="autocomplete" name="{{ name }}-autocomplete" id="{{ widget.html_id }}_text" value="" {{ extra_attrs }} />

    {# a hidden select, that contains the actual selected values #}
    <select style="display:none" class="value-select" name="{{ name }}" id="{{ widget.html_id }}" {% if widget.max_items != 1 %}multiple="multiple"{% endif %}>
        {% for value in values %}
            <option value="{{ value }}" selected="selected">{{ value }}</option>
        {% endfor %}
    </select>

    {# a hidden div that serves as template for the 'remove from deck' button #}
    <div style="display:none" class="remove">
        {# This will be appended to choices on the deck, it's the remove button #}
        X
    </div>

    <div style="display:none" class="choice-template">
        {% comment %}
        the contained element will be used to render options that are added to the select
        via javascript, for example in django admin with the + sign

        The text of the option will be inserted in the html of this tag
        {% endcomment %}
        <div class="choice">
        </div>
    </div>
</span>
