{% load i18n %}
{% load staticfiles %}
{% load autocomplete_light_tags %}
{% load url from future %}

{% block widget_open %}
<span class="autocomplete-light-widget {{ name }}
    {% if widget.widget_js_attributes.max_values == 1 %}single{% else %}multiple{% endif %}"
    id="{{ widget.html_id }}-wrapper"
    {{ widget.widget_js_attributes|autocomplete_light_data_attributes }}
    {{ widget.autocomplete_js_attributes|autocomplete_light_data_attributes:'autocomplete-' }}
    >
{% endblock %}

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

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

{% block add_another %}
    {# A link to add a new choice using a popup #}
    {% if autocomplete.add_another_url_name %}
    <a href="{% block add_another_href %}{% url autocomplete.add_another_url_name %}?_popup=1{% endblock %}" class="autocomplete-add-another" id="add_{{ widget.html_id }}" style="display:none;">
        <img src="{% static 'admin/img/icon_addlink.gif' %}" width="10" height="10" alt="{% trans 'Add another' %}" />
    </a>
    {% endif %}
{% endblock %}

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

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

{% block choice_template %}
    <span style="display:none" class="choice-template div">
        {% 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 %}
        <span class="choice div prepend-remove append-option-html">
        </span>
    </span>
{% endblock %}

{% block widget_close %}
</span>
{% endblock %}