@if (!id) {
  <span class="action-dialog-title" mat-dialog-title>{{ 'FLOWS.DIALOG.ADD.TITLE' | translate }}</span>
}
@if (id) {
  <span class="action-dialog-title" mat-dialog-title>{{ 'FLOWS.DIALOG.UPDATE.TITLE' | translate }}</span>
}

<div mat-dialog-content>
  <form [formGroup]="form">
    <cnsl-form-field class="form-field">
      <cnsl-label>{{ 'FLOWS.NAME' | translate }}</cnsl-label>
      <input cnslInput formControlName="name" />
    </cnsl-form-field>

    <cnsl-info-section>{{ 'FLOWS.DIALOG.ABOUTNAME' | translate }}</cnsl-info-section>

    @if (opened$ | async) {
      <ngx-codemirror
        formControlName="script"
        [options]="{
          lineNumbers: true,
          theme: 'material',
          mode: 'javascript',
        }"
      ></ngx-codemirror>
    }

    <cnsl-form-field class="form-field">
      <cnsl-label>{{ 'FLOWS.TIMEOUTINSEC' | translate }}</cnsl-label>
      <input type="number" cnslInput formControlName="durationInSec" />
    </cnsl-form-field>

    <mat-checkbox formControlName="allowedToFail">{{ 'FLOWS.ALLOWEDTOFAIL' | translate }}</mat-checkbox>
  </form>
</div>
<div mat-dialog-actions class="action">
  @if (id) {
    <button mat-stroked-button color="warn" (click)="deleteAndCloseDialog()">
      {{ 'ACTIONS.DELETE' | translate }}
    </button>
  }

  <span class="fill-space"></span>

  <button mat-stroked-button (click)="closeDialog()">
    {{ 'ACTIONS.CANCEL' | translate }}
  </button>

  <button color="primary" mat-raised-button class="ok-button" [disabled]="false" (click)="closeDialogWithSuccess()">
    @if (!id) {
      <span>{{ 'ACTIONS.ADD' | translate }}</span>
    }
    @if (id) {
      <span>{{ 'ACTIONS.SAVE' | translate }}</span>
    }
  </button>
</div>