team-selector.component.html

<div class="config-section">
  <h3>{{ settings.getTeamLabelPlural() }}</h3>
  <p class="config-hint">
    Select which {{ settings.getTeamLabelPlural() | lowercase }} to include in the report.
  </p>
  <div class="select-all-actions">
    <button mat-button color="primary" (click)="selectAllTeams()">Select All</button>
    <button mat-button (click)="deselectAllTeams()">Deselect All</button>
    <span *ngIf="groupNames.length > 0" class="group-section">
      <span class="group-label">{{ settings.getGroupLabel() }}:</span>
      <button mat-stroked-button [matMenuTriggerFor]="groupMenu" class="group-dropdown-btn">
        <mat-icon>group</mat-icon>
        {{ selectedGroupName || 'Select ' + settings.getGroupLabel() }}
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
    </span>
    <mat-menu #groupMenu="matMenu">
      <button mat-menu-item *ngFor="let group of groupNames" (click)="selectGroup(group)">
        {{ group }}
      </button>
    </mat-menu>
  </div>
  <div class="checkbox-grid">
    <mat-checkbox
      *ngFor="let team of allTeams"
      [checked]="isTeamSelected(team)"
      (change)="toggleTeam(team)">
      {{ team }}
    </mat-checkbox>
  </div>
</div>