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

Expected context:
- select3.name, select3.id, select3.value, select3.initial_label
- 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="combobox-ajax"
     data-select3-cloak
     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="{{ select3.min_search_length|default_if_none:0 }}"
     data-initial-label="{{ select3.initial_label|default_if_none:""|escape }}"
     data-forward-json="{{ select3.forward_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">
            <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>

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