{% extends "django_spire/glue/form/widget/widget.html" %}
{% load django_glue %}

{% block widget_content %}
    <div
        class="border rounded p-3{% if input_class %} {{ input_class }}{% endif %}"
        {% if max_height %}style="max-height: {{ max_height }}; overflow-y: auto;"{% endif %}
    >
        <div class="row">
            <template x-for="choice in field?.choices || []" :key="choice.value">
                <div class="col-md-{{ columns|default:'4' }} col-lg-{{ columns|default:'4' }}">
                    <div class="form-check">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            :class="{'is-invalid': field.hasErrors}"
                            :id="field.id + '-' + choice.value"
                            :value="choice.value"
                            :checked="field.hasChoiceSelected(choice.value)"
                            @change="
                                if ($event.target.checked) {
                                    field.addChoice(choice.value);
                                } else {
                                    field.removeChoice(choice.value);
                                }
                            "
                            :disabled="field.disabled">
                        <label class="form-check-label" :for="field.id + '-' + choice.value" x-text="choice.label"></label>
                    </div>
                </div>
            </template>
        </div>
    </div>
    {{ block.super }}
{% endblock %}