<mat-dialog-content class="classroom">
  <div *ngFor="let group of groupedClients" class="classroom-group">
    <div class="misc-clients">
      <div class="classroom-board" cdkDrag cdkDragBoundary=".classroom">{{ 'digitalBoard' | translate }}</div>
      <img mat-card-image src="assets/images/proyector.png" alt="{{ 'projectorAlt' | translate }}" class="proyector-image" cdkDrag cdkDragBoundary=".classroom"/>
    </div>
    <div *ngFor="let row of group.clientRows" class="client-row">
      <div class="client-container" *ngFor="let client of row" cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event, client)" cdkDragBoundary=".classroom">
        <div class="client-box" (dblclick)="handleClientClick(client)">
          <mat-card appearance="outlined">
            <div class="client-image-container">
              <img mat-card-image src="assets/images/client.png" alt="{{ 'clientAlt' | translate }}" class="client-image"/>
            </div>
            <div class="client-info">
              <span>{{ client.name }}</span>
            </div>
          </mat-card>
        </div>
      </div>
    </div>
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button class="submit-button" (click)="saveDisposition()">{{ 'saveDispositionButton' | translate }}</button>
</mat-dialog-actions>
