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

Expected context:
- select3.name, select3.id
- select3.values (JSON array), select3.options_json (JSON array of {value,label})
- select3.label, select3.placeholder
- select3.allow_clear, select3.required
{% endcomment %}

<div class="s3-wrapper"
     data-select3="multiselect"
     data-select3-cloak
     data-name="{{ select3.name|escape }}"
     data-placeholder="{{ select3.placeholder|default:''|escape }}"
     data-allow-clear="{{ select3.allow_clear|yesno:"true,false" }}"
     data-required="{{ select3.required|yesno:"true,false" }}"
     data-values="{{ select3.values|default_if_none:"[]"|escape }}"
     data-options-json="{{ select3.options_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>