<div class="checkbox-grouped">
  <!-- Iteração pelos grupos -->
  <div 
    *ngFor="let group of groups" 
    class="checkbox-group"
    [class.expanded]="group.expanded !== false"
  >
    <!-- Cabeçalho do grupo -->
    <div class="group-header" (click)="toggleGroup(group)">
      <div class="group-header-content">
        <i *ngIf="group.icon" class="group-icon {{ group.icon }}"></i>
        <span class="group-label">{{ group.label }}</span>
        <span class="group-count">({{ group.items.length }})</span>
      </div>
      <i class="expand-icon fas fa-chevron-down" 
         [class.rotated]="group.expanded !== false"></i>
    </div>

    <!-- Conteúdo do grupo (checkboxes) -->
    <div class="group-content" *ngIf="group.expanded !== false">
      <div 
        *ngFor="let item of group.items" 
        class="checkbox-item"
      >
        <label>
          <input
            type="checkbox"
            [formControl]="getItemFormControl(group.id, item.id)"
            [id]="'checkbox-' + group.id + '-' + item.id"
          />
          <span class="checkbox-label">{{ item.name }}</span>
        </label>
      </div>
    </div>
  </div>
</div> 