{% load django_glue %}
<div
    x-data="{
        field: {{ glue_field|glue_field_metadata_path }},
        get value() {
            return {{ glue_field|glue_field_value_path }};
        },
        set value(newValue) {
            {{ glue_field|glue_field_value_path }} = newValue;
        },
        committedValue: undefined,
        init() {
            this.committedValue = this.value;
        },
        dispatchFieldEvent(name) {
            this.$dispatch(name, {
                field: this.field,
                value: this.value,
                previousValue: this.committedValue,
            });

            if (name === 'field-change') {
                this.committedValue = this.value;
            }
        },
    }"
    @input="dispatchFieldEvent('field-input')"
    @change="dispatchFieldEvent('field-change')"
    @focusin="if (!$el.contains($event.relatedTarget)) dispatchFieldEvent('field-focus')"
    @focusout="if (!$el.contains($event.relatedTarget)) dispatchFieldEvent('field-blur')"
>
    {% if not hide_label %}
        {% block widget_label %}
            <label :for="field.id" class="form-label">
                <span x-text="field.label"></span><span x-show="field.required" class="text-danger" aria-hidden="true"> *</span>
            </label>
        {% endblock %}
    {% endif %}

    {% block widget_content %}
    {% endblock %}
    <div class="invalid-feedback" x-show="field.hasErrors" x-text="field.errorText"></div>
    <small class="text-muted d-block" x-show="field.help_text" x-text="field.help_text"></small>
</div>