{% load static %}

<select class="custom-select"
        name="WidgetChoice-{{ widget.name }}"
        id="widgetSelect-{{ widget.name }}"
        hx-get="{% url 'cases:select-image-widget' %}"
        hx-target="#{{ widget.name }}-area"
        hx-trigger="widgetSelected, change"
        hx-include="[id='values-{{ widget.name }}']"
>
    {% if widget.attrs.current_value %}
        <option value="{{ widget.attrs.current_value.image.pk }}">{{ widget.attrs.current_value }}</option>
    {% else %}
        <option value="{{ widget.attrs.widget_choices.UNDEFINED }}">Choose data source...</option>
    {% endif %}
    <option value="{{ widget.attrs.widget_choices.IMAGE_SEARCH }}">Select an existing image</option>
    <option value="{{ widget.attrs.widget_choices.IMAGE_UPLOAD }}">Upload a new image</option>
</select>

<div id="values-{{ widget.name }}">
    <input type="hidden" name="interface_slug" value="{{ widget.name }}">
    <input type="hidden" name="help_text" value="{{ widget.attrs.help_text }}">
    <input type="hidden" name="current_value" value="{{ widget.attrs.current_value.image.pk }}">
</div>

<div class="mt-3" id="{{ widget.name }}-area"></div>

<script type="text/javascript" src="{% static "cases/js/flexible_image_widget.js" %}"></script>