{% with id=widget.attrs.id %}
  <div{% if id %} id="{{ id }}"{% endif %}{% if widget.attrs.class %} {% endif %}>
    {% for group, options, index in widget.optgroups %}

      {% if group is not null %}
        <div class="mt-1"
             x-data="{
                     expanded_{{ group.order }}: true,
                     selectAll_{{ group.order }} : false,
                     selected_{{ group.order }}: [],
                     toggleAllCheckboxesGroup() {
                     this.selectAll_{{ group.order }} = !this.selectAll_{{ group.order }}
                     this.selected_{{ group.order }} = [];

                     checkboxes = document.querySelectorAll('input[group=\'{{ group.order }}\']');
                     [...checkboxes].map((el) => {
                     el.checked = this.selectAll_{{ group.order }};
                     (this.selectAll_{{ group.order }}) ? this.selected_{{ group.order }}.push(el.value) : this.selected_{{ group.order }} = [];
                     })

                     this.updateSelectAllStateGroup()

                     },
                     updateSelectAllStateGroup() {
                     checkboxes = document.querySelectorAll('input[group=\'{{ group.order }}\']');
                     this.selected_{{ group.order }}= [];
                     [...checkboxes].map((el) => {
                     if (el.checked) {

                     this.selected_{{ group.order }}.push(el.value);
                     }
                     })


                     if (this.selected_{{ group.order }}.length == 0) {
                     this.selectAll_{{ group.order }} = false;
                     $refs.checkAll_{{ group.order }}.indeterminate = false;

                     } else if (this.selected_{{ group.order }}.length < checkboxes.length) {
                     this.selectAll_{{ group.order }} = false;
                     $refs.checkAll_{{ group.order }}.indeterminate = true;
                     } else {
                     this.selectAll_{{ group.order }} = true;
                     $refs.checkAll_{{ group.order }}.indeterminate = false;
                     }

                     this.selectAll = (this.selected_{{ group.order }}.length == checkboxes.length) ? true : false;

                     this.updateSelectAllState()
                     },

                     get showSelected_{{ group.order }}(){
                     return (this.selected_{{ group.order }}.length > 0);
                     }
                     }"
             x-init="updateSelectAllStateGroup();"
        >

          {% comment %} <label class="font-semibold ">{{ group }}</label> {% endcomment %}
          <h4 class="flow-root">
            <div class="parent relative cursor-pointer" >
              <!-- Expand/collapse section button -->
              <button @click="expanded_{{ group.order }} = !expanded_{{ group.order }}" type="button" class="py-1 w-full flex items-center text-sm " aria-controls="filter-section-1" aria-expanded="false">

                <span class="flex items-center" >
                  <span class="-rotate-90"></span>
                  <!-- Heroicon name: solid/minus-sm -->
                  <svg class="h-5 w-5 transition-all " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true" x-bind:class="!expanded_{{ group.order }} ? '-rotate-90' : 'rotate-0'">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />

                  </svg>

                </span>
                <label class="font-medium ml-1"> {{ group }} </label>
              </button>
              <div display="contents" class="absolute right-0 top-0 bottom-0 items-center flex pr-2 hidden-child" tooltip="Check all">
                <input type="checkbox" class="checkbox checkbox-sm" group-select x-ref="checkAll_{{ group.order }}" x-on:click="toggleAllCheckboxesGroup(); " x-model="selectAll_{{ group.order }}">
              </div>
            </div>
          </h4>

          <div x-show="expanded_{{ group.order }}" class="ml-3" x-collapse>
      {% endif %}

      {% for option in options %}
        <div class="">
          {% include "./input_option.html" with widget=option %}
        </div>
      {% endfor %}

      {% if group is not null %}
        </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
{% endwith %}
