{% load url %}
{% load static %}
{% load clean from bleach %}

<div class="form-group mb-1"
     id="search-image-{{ widget.name }}"
     hx-get="{% url 'cases:image-search' %}"
     hx-trigger="load once, keyup[target.value.length > 1] delay:500ms from:#query-{{ widget.name }}, click[keyCode==8] delay:500ms from:#query-{{ widget.name }}"
     hx-target="#selected-image-{{ widget.name }}"
     hx-swap="outerHTML"
     hx-include="[id='image-input-group-{{ widget.name }}']"
>
    <div class="input-group" id="image-input-group-{{ widget.name }}">
        <div class="input-group-prepend"><span class="input-group-text">Select an image</span></div>
        <input class="form-control" type="search" name="query-{{ widget.name }}"
               id="query-{{ widget.name }}"
               placeholder="Search by pk or image name"
        >
        <select class="custom-select" name="image"
                id="selected-image-{{ widget.name }}">
            <option value="">No image selected</option>
        </select>
        <input type="hidden" name="interface_slug" value="{{ widget.name }}">
    </div>

    <small class="form-text text-muted">
        Select an existing image that you have access to.
        This could be from data that you have previously uploaded,
        archives that you have permission to use,
        or public algorithm results that you have access to.
    </small>
</div>

<div id="search-{{ widget.name }}"></div>

{% if widget.attrs.help_text and widget.attrs.help_text != "" %}
    <small id="hint_{{ widget.attrs.id }}" class="form-text text-muted">{{ widget.attrs.help_text|clean }}</small>
{% endif %}