
<h3 mat-dialog-title>{{data ? 'Edit task' : 'Add task'}}</h3>

<form>
  <div mat-dialog-content>

    <div class="row">

      <div class="col-md-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Name of task"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>edit</mat-icon>
            <span class="text-muted">|</span>
          </span>

          <input
            matInput
            placeholder="Task name"
            type="text"
            name="-"
            autocomplete="off"
            [(ngModel)]="task.id"
            [disabled]="data"
            required
            cdkFocusInitial
            [ngModelOptions]="{standalone: true}"
            [pattern]="CommonRegEx.appNames">
          <mat-error>{{CommonErrorMessages.appNames}}</mat-error>
        </mat-form-field>

      </div>

      <div class="col-md-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Task's description"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>text_snippet</mat-icon>
            <span class="text-muted">|</span>
          </span>

          <input
            matInput
            placeholder="Task description"
            type="text"
            name="-"
            autocomplete="off"
            [(ngModel)]="task.description"
            [ngModelOptions]="{standalone: true}">
        </mat-form-field>

      </div>

      <div class="col-12" *ngIf="hlReady">

        <app-codemirror-hyperlambda
          [(model)]="hlModel">
        </app-codemirror-hyperlambda>

      </div>

    </div>

  </div>

  <div mat-dialog-actions [align]="'end'" class="mt-3">

    <button
      mat-button
      color="primary"
      type="button"
      class="me-2"
      mat-dialog-close>
      Cancel
    </button>

    <button
      mat-flat-button
      color="primary"
      class="px-3"
      type="submit"
      (click)="create()">
      Save
    </button>

  </div>
</form>
