<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" [formGroup]="resizeClusterForm"
      class="fl-content">
  <app-form-errors #formErrors [formGroup]="resizeClusterForm"></app-form-errors>
  <div layoutDirection="column">
    <mat-form-field>
      <mat-label i18n>Node count</mat-label>
      <input matInput placeholder="Node count" i18n-placeholder
             type="number" step="1" min="1" formControlName="node_count" required>
      <mat-error>{{fieldErrors['node_count']}}</mat-error>
    </mat-form-field>
    <div *ngIf="resizeOptions === null" class="fl-red-color">
      <p i18n>Resizable nodes could not be retrieved.</p>
      <p i18n *ngIf="authSvc.feature('ui.staff')">Check logs for details.</p>
    </div>
    <mat-form-field *ngIf="resizeOptions && resizeOptions.nodes">
      <mat-label i18n>Nodes to remove</mat-label>
      <mat-select formControlName="nodes_to_remove" placeholder="Nodes to remove" i18n-placeholder multiple>
        <mat-option *ngFor="let instance of resizeOptions.nodes" [value]="instance.id">
          {{instance.name}} - {{instance.id}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>
