<form #form="ngForm" (keydown.enter)="$event.preventDefault()"
      class="overview"
      style="display: flex;flex-direction: column;">
  <h3 *ngIf="appUser._id">{{'user.submit.headline.edit' | translate}}</h3>
  <h3 *ngIf="!appUser._id">{{'user.submit.headline.new' | translate}}</h3>

    <mat-form-field>
      <label for="title">{{'user.submit.field.name' | translate}}</label>
      <input matInput
             [(ngModel)]="appUser.username"
             name="title"
             id="title"
             required
             maxlength="50"/>
      <show-error displayName="{{'user.submit.field.name' | translate}}" controlPath="title"></show-error>
    </mat-form-field>

  <div class="form-group">
    <label for="squad">{{'user.submit.field.squad' | translate}}</label>
    <select class="form-control"
            name="squad"
            id="squad"
            [(ngModel)]="appUserSquadId">
      <option [value]="null">{{'user.submit.field.squad.not.assigned' | translate}}</option>
      <option *ngFor="let squad of squads" [ngValue]="squad._id">
        {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
      </option>
    </select>
    <show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>
  </div>

  <label>{{'user.submit.field.activated' | translate}}</label>
  <mat-slide-toggle name="activated" [(ngModel)]="appUser.activated"></mat-slide-toggle>

  <label>{{'user.submit.field.permission' | translate}}</label>
  <mat-form-field>
    <mat-select name="permission" [(ngModel)]="appUser.permission">
      <mat-option [value]="0">User</mat-option>
      <mat-option [value]="1">SQL</mat-option>
      <mat-option [value]="2">HL</mat-option>
      <mat-option [value]="3">MT</mat-option>
      <mat-option [value]="4">Admin</mat-option>
    </mat-select>
  </mat-form-field>

  <button id="cancel"
          style="width: 50%"
          (click)="cancel()"
          class="btn btn-default">
    {{'user.submit.button.cancel' | translate}}
  </button>

  <button id="save"
          style="width: 50%"
          type="submit"
          (click)="saveUser()"
          class="btn btn-default"
          [disabled]="!form.valid">
    {{'user.submit.button.submit' | translate}}
  </button>
</form>