<h2 mat-dialog-title>{{ editing ? ('editCommandGroup' | translate) : ('createCommandGroup' | translate) }}</h2>
<mat-dialog-content class="form-container">
  <app-loading [isLoading]="loading"></app-loading>

  <form *ngIf="!loading" class="command-group-form" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <mat-label>{{ 'groupNameLabel' | translate }}</mat-label>
      <input matInput [(ngModel)]="groupName" name="groupName" required />
    </mat-form-field>

    <mat-slide-toggle [(ngModel)]="enabled" name="enabled">{{ 'enabledToggle' | translate }}</mat-slide-toggle>

    <div class="command-selection">
      <div class="available-commands">
        <h3>{{ 'availableCommandsTitle' | translate }}</h3>
        <div class="table-wrapper">
          <table mat-table [dataSource]="availableCommands" 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="actions">
              <th mat-header-cell *matHeaderCellDef> {{ 'actionsColumn' | translate }} </th>
              <td mat-cell *matCellDef="let command">
                <button mat-icon-button type="button" (click)="addCommand(command)">
                  <mat-icon>add</mat-icon>
                </button>
              </td>
            </ng-container>

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

      <div class="selected-commands">
        <h3>{{ 'selectedCommandsTitle' | translate }}</h3>
        <div class="selected-commands-list" cdkDropList (cdkDropListDropped)="drop($event)">
          <div class="commands-container">
            <div *ngFor="let command of selectedCommands" cdkDrag>
              <div class="command-item">
                <mat-icon class="drag-handle" cdkDragHandle>drag_indicator</mat-icon>
                {{ command.name }}
                <mat-icon class="remove-icon" (click)="removeCommand(command)">close</mat-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</mat-dialog-content>

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