<h2 mat-dialog-title>{{ commandId ? ('editCommandTitle' | translate) : ('createCommandTitle' | translate) }}</h2>
<mat-dialog-content class="form-container">
  <form [formGroup]="createCommandForm" (ngSubmit)="onSubmit()" class="command-form">
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'nameLabel' | translate }}</mat-label>
      <input matInput formControlName="name" placeholder="{{ 'commandNamePlaceholder' | translate }}" required>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'scriptLabel' | translate }}</mat-label>
      <textarea matInput formControlName="script" placeholder="{{ 'commandScriptPlaceholder' | translate }}"></textarea>
    </mat-form-field>

    <div class="checkbox-group">
      <mat-checkbox formControlName="readOnly">{{ 'readOnlyLabel' | translate }}</mat-checkbox>
      <mat-checkbox formControlName="enabled">{{ 'enabledLabel' | translate }}</mat-checkbox>
    </div>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'commentsLabel' | translate }}</mat-label>
      <textarea matInput formControlName="comments" placeholder="{{ 'commentsPlaceholder' | translate }}"></textarea>
    </mat-form-field>
  </form>
</mat-dialog-content>

<mat-dialog-actions class="action-container">
  <button class="ordinary-button" (click)="onCancel($event)">{{ 'buttonCancel' | translate }}</button>
  <button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
</mat-dialog-actions>
