{% load i18n %}{% comment %}
Select3 MultiSelect AJAX widget (multi - remote search).
Initialized by `static/select3/select3-widgets.js` via `data-select3`.

Expected context:
- select3.name, select3.id
- select3.values (JSON array)
- select3.label, select3.placeholder
- select3.ajax_url, select3.allow_clear, select3.required
- select3.min_search_length, select3.forward_json
{% endcomment %}

<div class="s3-wrapper"
     data-select3="multiselect-ajax"
     data-select3-cloak
     data-name="{{ select3.name|escape }}"
     data-ajax-url="{{ select3.ajax_url|escape }}"
     data-placeholder="{{ select3.placeholder|default:''|escape }}"
     data-allow-clear="{{ select3.allow_clear|yesno:"true,false" }}"
     data-required="{{ select3.required|yesno:"true,false" }}"
     data-min-search-length="{% if select3.min_search_length is not None %}{{ select3.min_search_length }}{% else %}2{% endif %}"
     data-values="{{ select3.values|default_if_none:"[]"|escape }}"
     data-forward-json="{{ select3.forward_json|default_if_none:""|escape }}">

    <div data-select3-hidden-container></div>

    {% if select3.label %}
        <label for="{{ select3.id }}" class="s3-label">
            {{ select3.label }}
            {% if select3.required %}<span class="s3-required">*</span>{% endif %}
        </label>
    {% endif %}

    <div class="s3-control">
        <div class="s3-anchor" data-select3-anchor>
            <div class="s3-field">
                <div class="s3-badges" data-select3-badges></div>

                <input class="s3-multi-input"
                       data-select3-input
                       type="text"
                       role="combobox"
                       aria-autocomplete="list"
                       aria-expanded="false"
                       aria-haspopup="listbox"
                       placeholder="{{ select3.placeholder|default:''|escape }}">
            </div>
        </div>

        <div class="s3-actions">
            <svg class="s3-spinner" data-select3-loading hidden fill="none" viewBox="0 0 24 24" aria-hidden="true">
                <circle class="s3-spinner-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="s3-spinner-head" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>

            <button class="s3-clear" data-select3-clear hidden type="button"
                    aria-label="{% translate 'Clear all' %}" title="{% translate 'Clear all' %}">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>

            <svg class="s3-caret" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </div>
    </div>
</div>