<div class="fl-content fl-content-min-height" *ngIf="object">
  <form [formGroup]="domainForm">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="domainForm"></app-form-errors>
    <div layoutDirection="column" appLayoutGap="5px">
      <mat-form-field>
        <mat-label i18n>First nameserver</mat-label>
        <input matInput placeholder="First nameserver" i18n-placeholder type="text" formControlName="nameserver1" required>
        <mat-error>{{fieldErrors['nameserver1']}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Second nameserver</mat-label>
        <input matInput placeholder="Second nameserver" i18n-placeholder type="text" formControlName="nameserver2">
        <mat-error>{{fieldErrors['nameserver2'] }}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Third nameserver</mat-label>
        <input matInput placeholder="Third nameserver" i18n-placeholder type="text" formControlName="nameserver3">
        <mat-error>{{fieldErrors['nameserver3'] }}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Fourth nameserver</mat-label>
        <input matInput placeholder="Fourth nameserver" i18n-placeholder type="text" formControlName="nameserver4">
        <mat-error>{{fieldErrors['nameserver4'] }}</mat-error>
      </mat-form-field>
      <div layoutDirection="row" layoutAlign="end">
        <button mat-button color="primary" (click)="saveNameservers()" i18n>
          Save nameservers
        </button>
      </div>
    </div>
  </form>
</div>
