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

Expected context:
- select3.name, select3.id, select3.value, select3.label
- select3.placeholder, select3.options_json, select3.options_element_id
- select3.allow_clear, select3.required
{% endcomment %}

<div class="s3-wrapper"
     data-select3="combobox"
     data-select3-cloak
     data-placeholder="{{ select3.placeholder|default:''|escape }}"
     data-allow-clear="{{ select3.allow_clear|yesno:"true,false" }}"
     data-required="{{ select3.required|yesno:"true,false" }}"
     {% if select3.options_element_id %}data-options-element-id="{{ select3.options_element_id|escape }}"{% endif %}
     data-options-json="{{ select3.options_json|default_if_none:"[]"|escape }}">

    <input type="hidden"
           name="{{ select3.name }}"
           id="{{ select3.id }}"
           value="{{ select3.value|default_if_none:""|escape }}"
           data-select3-hidden>

    {% 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-display" data-select3-display hidden>
            <span class="s3-display-text" data-select3-display-text></span>
        </div>

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

        <div class="s3-actions">
            <span class="s3-clear" data-select3-clear hidden role="button" tabindex="-1"
                  aria-label="{% translate 'Clear selection' %}" title="{% translate 'Clear selection' %}">
                <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>
            </span>

            <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>