@if (destination$ | async; as item) {
  <div fxLayout="column" fxLayoutAlign="start stretch" class="pac-edit-destination__editor">
    <form [formGroup]="formGroup">
      <z-form-field appearance="fill">
        <z-form-label>Name</z-form-label>
        <input z-input formControlName="name" required>
        @if (nameCtrl.invalid) {
          <z-form-message zType="error">Name required</z-form-message>
        }
      </z-form-field>
    </form>
    <formly-form
      [form]="options"
      [fields]="item.schema"
      [model]="item.destination.options"
      >
    </formly-form>
    <div fxLayout="row" fxLayoutAlign="space-between stretch">
      <button z-button zType="default" [disabled]="formGroup.pristine||formGroup.invalid" (click)="onSave()">Save</button>
      <button z-button zType="default" [disabled]="formGroup.pristine" (click)="onCancel()">Cancel</button>
    </div>
  </div>
}