<app-loading [isLoading]="loading"></app-loading>

<h2 mat-dialog-title>Añade clientes a {{data.subnetName}}</h2>

<mat-dialog-content>
  <mat-form-field appearance="fill" class="full-width">
    <mat-label>Seleccione aula</mat-label>
    <mat-select [formControl]="unitControl" (selectionChange)="loadChildUnits($event)">
      <mat-option *ngFor="let unit of units" [value]="unit">{{ unit.name }}</mat-option>
    </mat-select>
  </mat-form-field>

  <div class="checkbox-group">
    <label>Clientes</label>

    <button class="action-button" (click)="toggleSelectAll()" [disabled]="clients.length === 0">
      {{ allSelected ? 'Deseleccionar todos' : 'Seleccionar todos' }}
    </button>

    <div *ngIf="clients.length > 0" class="clients-grid">
      <mat-checkbox *ngFor="let client of clients"
                    (change)="toggleClientSelection(client.uuid)"
                    [checked]="selectedClients.includes(client.uuid)">
        {{ client.name }}
      </mat-checkbox>
    </div>
    <div *ngIf="clients.length === 0">
      <p>No hay clientes disponibles</p>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions class="action-container">
  <button class="ordinary-button" (click)="close()">Cancelar</button>
  <button class="submit-button" (click)="save()">Añadir</button>
</mat-dialog-actions>
