<h2 mat-dialog-title>{{ 'executeCommandOrGroupTitle' | translate }}</h2>

<mat-dialog-content class="form-container">
    <form [formGroup]="form" class="command-form">

        <mat-form-field appearance="fill" class="full-width">
            <mat-label>{{ 'selectCommandLabel' | translate }}</mat-label>
            <mat-select formControlName="selectedCommand" (selectionChange)="form.get('selectedCommandGroup')?.reset()">
                <mat-option *ngFor="let command of commands" [value]="command.uuid">{{ command.name }}</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field appearance="fill" class="full-width">
            <mat-label>{{ 'selectCommandGroupLabel' | translate }}</mat-label>
            <mat-select formControlName="selectedCommandGroup" (selectionChange)="form.get('selectedCommand')?.reset()">
                <mat-option *ngFor="let group of commandGroups" [value]="group.uuid">{{ group.name }}</mat-option>
            </mat-select>
        </mat-form-field>

        <div class="checkbox-group">
            <label>{{ 'clientsLabel' | translate }}</label>
            <div *ngIf="clients.length > 0">
                <mat-checkbox *ngFor="let client of clients" (change)="toggleClientSelection(client.uuid)"
                    [checked]="form.get('clientSelection')?.value.includes(client.uuid)">
                    {{ client.name }}
                </mat-checkbox>
            </div>
            <div *ngIf="clients.length === 0">
                <p>{{ 'noClientsMessage' | translate }}</p>
            </div>
        </div>

    </form>
</mat-dialog-content>

<mat-dialog-actions class="action-container">
    <button class="ordinary-button" (click)="closeModal()">{{ 'cancelButton' | translate }}</button>
    <button class="submit-button" (click)="executeCommand()" [disabled]="!form.get('clientSelection')?.value.length || 
                        (!form.get('selectedCommand')?.value && !form.get('selectedCommandGroup')?.value)">
        {{ 'executeButton' | translate }}
    </button>
</mat-dialog-actions>