<div layoutDirection="row" appLayoutGap="10px" class="fl-content">
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="serverGroupForm" layoutDirection="column" appFlex="auto">
    <app-form-errors #formErrors [formGroup]="serverGroupForm"></app-form-errors>
    <mat-form-field>
      <mat-label i18n>Group name</mat-label>
      <input matInput placeholder="Group name" i18n-placeholder type="text" formControlName="name" required>
      <mat-error>{{backendErrors['name'] || 'This field is required!' }}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Group description</mat-label>
      <input matInput placeholder="Group description" i18n-placeholder type="text" formControlName="description" required>
      <mat-error>{{backendErrors['description'] || 'This field is required!' }}</mat-error>
    </mat-form-field>

    <mat-radio-group formControlName="placement" layoutDirection="column">
      <mat-radio-button [color]="'primary'" [value]="1" i18n>
        Create accounts on each server in order
      </mat-radio-button>
      <mat-radio-button [color]="'primary'" [value]="2" i18n>
        Create on the least used server
      </mat-radio-button>
    </mat-radio-group>
  </form>
  <div layoutDirection="column" class="hide-xs" appFlex="50">
    <p i18n>
      <strong>Server group name</strong><br>
      An easy to remember name, used only for display.
    </p>
    <p i18n>
      <strong>Group description</strong><br>
      A detailed description of this group.
    </p>
    <p i18n>
      <strong>Account placement type</strong><br>
      How accounts are created on servers from this group <br>
      <strong>Create in order</strong> will use the first available server in the list until it's filled
      and continue with the next server.<br>
      <strong>Create on the least used server</strong> will always try to find the least used server and
      create new accounts there.
    </p>
  </div>
</div>
