<div class="modal-container">
  <h3 class="modal-title">{{ 'commandDetailsTitle' | translate }}</h3>
  <div class="modal-content">
    <p><strong>{{ 'nameLabel' | translate }}:</strong> {{ data.name }}</p>
    <p><strong>{{ 'commentsLabel' | translate }}:</strong> {{ data.comments }}</p>
    <p><strong>{{ 'createdByLabel' | translate }}:</strong> {{ data.createdBy }}</p>
    <p><strong>{{ 'creationDateLabel' | translate }}:</strong> {{ data.createdAt | date:'medium' }}</p>

    <div class="script-display">
      <h4>{{ 'scriptLabel' | translate }}:</h4>
      <pre>{{ data.script }}</pre>
    </div>
  </div>

  <div class="additional-section" *ngIf="showClientSelect">
    <form [formGroup]="form">
      <h4>{{ 'selectClientsTitle' | 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">
          {{ 'selectAtLeastOneClientError' | translate }}
        </mat-error>
      </mat-form-field>
    </form>
  </div>
</div>
