<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      *ngIf="createOptions" [formGroup]="zoneForm" layoutDirection="column" class="fl-content">
  <app-form-errors #formErrors [formGroup]="zoneForm"></app-form-errors>

  <mat-radio-group *ngIf="!object.id" layoutDirection="column" (ngModelChange)="changeDestination($event)"
    [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
    <mat-radio-button [color]="'primary'" [value]="false" i18n>
      Create DNS zone in admin project
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
      Create DNS zone in client's project
    </mat-radio-button>
  </mat-radio-group>

  <ng-container *ngIf="!object.id && createInClientProject">
    <app-client-autocomplete [control]="clientControl" clientsWithEnabledProject></app-client-autocomplete>
  </ng-container>

  <mat-form-field>
    <mat-label i18n>Domain name</mat-label>
    <input matInput placeholder="Domain name" i18n-placeholder type="text" formControlName="name" required>
    <mat-error>{{fieldErrors['name']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Email</mat-label>
    <input matInput placeholder="Email" i18n-placeholder type="text" formControlName="email" required>
    <mat-error>{{fieldErrors['email']}}</mat-error>
  </mat-form-field>

  <mat-form-field *ngIf="!object.id">
    <mat-label i18n>Type selection</mat-label>
    <mat-select formControlName="type_" placeholder="Type selection" i18n-placeholder required>
      <mat-option *ngFor="let type of createOptions.types" [value]="type[0]">
        {{ type[1] }}
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['type_']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Description</mat-label>
    <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>TTL</mat-label>
    <input matInput placeholder="TTL" i18n-placeholder type="number" formControlName="ttl" required min="0">
    <mat-error>{{fieldErrors['ttl']}}</mat-error>
  </mat-form-field>

  <mat-form-field *ngIf="!object.id">
    <mat-label i18n>IP Address</mat-label>
    <input matInput placeholder="IP Address" i18n-placeholder type="text" formControlName="ip_address">
    <mat-error>{{fieldErrors['ip_address']}}</mat-error>
  </mat-form-field>
</form>
<div class="fl-margin-right-medium estimated-price-text"
     *ngIf="estimatedCost && createInClientProject"
     [class.invisible]="estimatedCostLoading"
     [class.fl-margin-top-medium]="!estimatedCostLoading"
     [innerHTML]="estimatedCost"></div>
<app-flashing-dots layoutAlign="end center"
                   class="fl-margin-right-small fl-padding-right"
                   *ngIf="estimatedCostLoading"></app-flashing-dots>

