<div class="field" style="margin-bottom: 0">
    <div class="control ">
        <label class="checkbox" style="padding-bottom: 10px">
            <input type="checkbox" name="{{ widget.name }}" id="id_{{ widget.name }}">
            <b> {{ widget.label }}</b>
        </label>

    </div>
</div>

<style>
    .interests-section-hidden {
        display: none;
    }
</style>

<div style="padding-left: 30px" id="interests_section" class="interests-section-hidden">
    <div class="field">
        <div class="control multiple-checkbox">
            {% for category in widget.interest_categories %}
                <div class="category-title">{{ category.title }}</div>
                <ul id="id_{{ widget.interests_field_name }}">
                    {% for interest in category.interests %}
                        <li>
                            <label for="id_{{ widget.interests_field_name }}_{{ category.id }}_{{ forloop.counter0 }}"
                                   style="display: flex">
                                <input type="checkbox" name="{{ widget.interests_field_name }}"
                                       value="{{ interest.id }}"
                                       id="id_{{ widget.interests_field_name }}_{{ category.id }}_{{ forloop.counter0 }}">
                                <span style="padding-left: 10px">{{ interest.name }}</span>
                            </label>
                        </li>
                    {% endfor %}
                </ul>
            {% endfor %}
        </div>
    </div>
</div>
<script>
    const checkbox = document.getElementById("id_{{ widget.name }}")
    const interests_section = document.getElementById("interests_section")

    // check if we have interests_mapping
    const has_interests = {{ widget.interest_categories|yesno:"true,false" }};

    checkbox.addEventListener('change', function (event) {
        // toggle hiding or showing interests
        if (has_interests) {
            if (event.target.checked) {
                interests_section.classList.remove('interests-section-hidden');

                // by default make all interests selected
                const checkboxes = interests_section.querySelectorAll('input[type="checkbox"]')
                checkboxes.forEach(function (checkbox) {
                    checkbox.checked = true;
                });
            } else {
                interests_section.classList.add('interests-section-hidden');
            }
        }
    })

</script>