{% with id=widget.attrs.id %}
    <div class="permissions" id="{{ id }}">
        {% for group, subgroups, index in widget.optgroups %}
            <div class="permissions-group">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading_{{ index }}">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_{{ index }}" aria-expanded="false" aria-controls="collapse_{{ index }}">
                            {{ group }}
                        </button>
                    </h2>
                    <div id="collapse_{{ index }}" class="accordion-collapse collapse" aria-labelledby="heading_{{ index }}" data-bs-parent="#{{ id }}">
                        <div class="accordion-body">
                            <div class="permissions-subgroup-parent" id="{{ id }}_{{ index }}">
                                {% for subgroup in subgroups %}
                                    <div class="permissions-subgroup">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="heading_subgroup_{{ index }}_{{ forloop.counter0 }}">
                                                <button
                                                        class="accordion-button collapsed"
                                                        type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse_subgroup_{{ index }}_{{ forloop.counter0 }}"
                                                        aria-expanded="false"
                                                        aria-controls="collapse_subgroup_{{ index }}_{{ forloop.counter0 }}">
                                                    <span>{{ subgroup.name }}</span>
                                                    <input class="form-check-input select-all" type="checkbox">
                                                </button>
                                            </h2>
                                            <div
                                                    id="collapse_subgroup_{{ index }}_{{ forloop.counter0 }}"
                                                    class="accordion-collapse collapse"
                                                    aria-labelledby="heading_subgroup_{{ index }}_{{ forloop.counter0 }}"
                                                    data-bs-parent="#{{ id }}_{{ index }}">
                                                <div class="accordion-body">
                                                    {% for option in subgroup.options %}
                                                        <div class="form-check">
                                                            {% include option.template_name with widget=option %}
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endwith %}
