{% load i18n l10n %}
{% load staticfiles %}
{% load autocomplete_light_tags %}

{% block widget_open %}
<span id="{{ widget.html_id }}-wrapper" {{ widget_attrs }} >
{% endblock %}

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

{% block input %}
    {# a text input, that is the 'autocomplete input' #}
    <input type="text" name="{{ name }}-autocomplete" id="{{ widget.html_id }}-autocomplete" value="" {{ 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 %}{{ autocomplete.get_add_another_url }}{% 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|unlocalize }}" selected="selected">{{ value }}</option>
        {% endfor %}
    </select>
{% endblock %}

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

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

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