{% extends 'forms/base_widget.html' %}

{% block html %}
    <div class="i-form-field-fixed-width">
        <input type="hidden" name="{{ field.name }}" id="{{ field.id }}-data"
               {% if field.data is not none %}value="{{ field._value() | tojson | forceescape }}"{% endif %} {{ input_args | html_params }}>
        <span id="{{ field.id }}"></span>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        setupSearchDropdownWidget({
            fieldId: {{ field.id | tojson }},
            defaultValue: {{ (field._value(for_react=true) or []) | tojson }},
            minTriggerLength: {{ min_trigger_length | tojson }},
            searchUrl: {{ search_url | tojson }},
            searchMethod: {{ search_method | tojson }},
            searchPayload: {{ search_payload | tojson }},
            valueField: {{ value_field | tojson }},
            labelField: {{ label_field | tojson }},
            searchField: {{ search_field | tojson }},
            allowById: {{ allow_by_id | tojson }},
            preload: {{ preload | tojson }},
            options: {{ (choices or []) | tojson }},
            allowAdditions: {{ allow_additions | tojson }},
            multiple: {{ multiple | tojson }},
            dropdownProps: {{ input_args | tojson }}
        });
    </script>
{% endblock %}
