<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      *ngIf="createOptions" [formGroup]="todoForm">
  <app-form-errors #formErrors [formGroup]="todoForm"></app-form-errors>
  <div layoutDirection="column">
    <mat-form-field>
      <mat-label i18n>Title</mat-label>
      <input matInput placeholder="Title" i18n-placeholder type="text" formControlName="title" required>
      <mat-error>{{fieldErrors['title']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Status</mat-label>
      <mat-select formControlName="status" placeholder="Status" i18n-placeholder>
        <mat-option *ngFor="let status of createOptions.statuses | keyvalue" [value]="status.key">
          {{ status.value }}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['status']}}</mat-error>
    </mat-form-field>

    <app-user-autocomplete [control]="todoForm.controls.assigned_to"
                           [overridePlaceholderSelected]="assignedToSelectedPlaceholder"
                           [overridePlaceholderUnselected]="assignedToUnselectedPlaceholder"
                           staffUsersOnly></app-user-autocomplete>

    <mat-form-field>
      <mat-label i18n>Description</mat-label>
      <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                matInput rows="10" placeholder="Description" i18n-placeholder type="text" formControlName="description">
      </textarea>
      <mat-error>{{fieldErrors['description']}}</mat-error>
    </mat-form-field>
  </div>
</form>
