<div class="fl-content fl-content-min-height">
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="staticRoutesForm"
        layoutDirection="column">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="staticRoutesForm"></app-form-errors>
    <p class="fl-detail fl-margin-bottom" [hidden]="!staticRoutes.length" i18n>
      Next Hop IP must be a part of one of the subnets to which the router interfaces are connected.
    </p>
    <div formArrayName="routes" *ngFor="let staticRoute of staticRoutes['controls']; let index = index">
      <div [formGroupName]="index" layoutDirection="row" appLayoutGap="10px" layoutAlign="start center">
        <mat-form-field appFlex="auto" xsFlex="120px">
          <mat-label i18n>Destination</mat-label>
          <input matInput placeholder="Destination" i18n-placeholder type="text" formControlName="destination">
          <mat-error>
            {{ staticRoutes['controls'][index]['controls'].destination.errors | errorFormatter }}
          </mat-error>
        </mat-form-field>
        <mat-form-field appFlex="auto">
          <mat-label i18n>Next hop</mat-label>
          <input matInput placeholder="Next hop" i18n-placeholder type="text" formControlName="nexthop">
          <mat-error>
            {{ staticRoutes['controls'][index]['controls'].nexthop.errors | errorFormatter }}
          </mat-error>
        </mat-form-field>
        <a mat-icon-button fl-tooltip="Delete static route" i18n-fl-tooltip
           fl-tooltip-direction="left" class="align-delete-route"
           (click)="deleteRoute(index)" appFlex="50px">
          <mat-icon>delete</mat-icon>
        </a>
      </div>
    </div>
    <div layoutDirection="row" appLayoutGap="10px" layoutAlign="center center">
      <a mat-mini-fab (click)="addRoute()" class="add-item-button" color="primary">
        <mat-icon>add</mat-icon>
      </a>
      <p i18n>
        Add static route
      </p>
    </div>
  </form>
</div>
