<div class="dropdown">
    <div class="input-group">
        {% if custom.prepend %}
        <span class="input-group-text" id="{{widget.attrs.id}}-prepend">{{custom.prepend}}</span>
        {% endif %}
        <input autocomplete="off" id="{{widget.attrs.id}}" data-ac-url="{{custom.search_url}}" data-ac-name-field="{{custom.name_field_name}}" {% if custom.image_field_name %}data-ac-image-field="{{custom.image_field_name}}"{% endif %} data-bs-toggle="dropdown" type="text" placeholder="Search..." class="{{widget.attrs.class}}">
        <ul id="{{widget.attrs.id}}-ac-ul" class="dropdown-menu">
        </ul>
    </div>
    <div class="d-flex align-items-center mt-3 mb-3" id="{{widget.attrs.id}}-dflex-container">
        {% if custom.current_instance %}
        {% if custom.image_field_name %}
        <div class="flex-shrink-0">
            {% if custom.image %}
                <img src="{{custom.image.url}}" style="max-width:64px;max-height:64px;" class="mr-3">
            {% else %}
                {% load static %}
                <img src="{% static 'css/icons/card-image.svg' %}" style="width:64px;max-height:64px;"  class="mr-3">
            {% endif %}
        </div>
        {% endif %}
        {% endif %}
        <div class="ms-3">
            {% if custom.current_instance %}
                {{custom.name}}
            {% else %}
            <span class="text-secondary">None selected</span>
            {% endif %}
        </div>
        {% if custom.current_instance %}
        <div class="ms-4">
            <span class="btn btn-close" data-ac-delete="{{widget.attrs.id}}"></span>
        </div>
        {% endif %}
    </div>
    <input type="hidden" {% if widget.value != None %}value="{{widget.value}}"{%endif%} name={{widget.name}} id="{{widget.attrs.id}}-uuid-field">
</div>