<div class="detail-command-group-container">
  <h2>{{ 'commandGroupDetailsTitle' | translate }}</h2>

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

  <mat-card *ngIf="!loading">
    <mat-card-header>
      <mat-card-title>{{ data.name }}</mat-card-title>
      <mat-card-subtitle>{{ 'createdBy' | translate }}: {{ data.createdBy }}</mat-card-subtitle>
    </mat-card-header>

    <mat-card-content>
      <p><strong>{{ 'groupId' | translate }}:</strong> {{ data.uuid }}</p>
      <p><strong>{{ 'creationDate' | translate }}:</strong> {{ data.createdAt | date:'short' }}</p>

      <h3>{{ 'includedCommands' | translate }}</h3>
      <table mat-table [dataSource]="data.commands" class="mat-elevation-z8">
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef> {{ 'nameColumn' | translate }} </th>
          <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
        </ng-container>

        <ng-container matColumnDef="uuid">
          <th mat-header-cell *matHeaderCellDef> UUID </th>
          <td mat-cell *matCellDef="let command"> {{ command.uuid }} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['name', 'uuid']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['name', 'uuid'];"></tr>
      </table>
    </mat-card-content>
  </mat-card>

  <!-- Sección para seleccionar clientes -->
  <div class="additional-section" *ngIf="showClientSelect && !loading">
    <form [formGroup]="form">
      <h4>{{ 'selectClients' | translate }}</h4>
      <mat-form-field appearance="fill">
        <mat-label>{{ 'clientsLabel' | translate }}</mat-label>
        <mat-select formControlName="selectedClients" multiple (selectionChange)="onClientSelectionChange($event)">
          <mat-option *ngFor="let client of clients" [value]="client.uuid">
            {{ client.name }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="form.get('selectedClients')?.invalid && form.get('selectedClients')?.touched">
          {{ 'selectAtLeastOneClient' | translate }}
        </mat-error>
      </mat-form-field>
    </form>
  </div>

  <div class="action-container" *ngIf="!loading">
    <button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
    <button [ngClass]="showClientSelect ? 'submit-button' : 'action-button'" (click)="toggleClientSelect()">
      {{ showClientSelect ? ('execute' | translate) : ('scheduleExecution' | translate) }}
    </button>
  </div>
</div>