<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="apiUserForm" class="fl-content">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="apiUserForm"></app-form-errors>
  <app-credit-warning *ngIf="!object?.id" resourceName="api user" i18n-resourceName></app-credit-warning>
  <mat-radio-group *ngIf="!object.id && authSvc.feature('ui.openstack.api-users.show-project')"
                   layoutDirection="column" (ngModelChange)="changeDestination($event)"
    [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
    <mat-radio-button [color]="'primary'" [value]="false" i18n>
      Create api user in admin project
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
      Create api user in client's project
    </mat-radio-button>
  </mat-radio-group>

  <ng-container *ngIf="authSvc.feature('ui.openstack.api-users.show-project') && !object.id && createInClientProject">
    <app-client-autocomplete [control]="apiUserForm.controls.client" clientsWithEnabledProject></app-client-autocomplete>
  </ng-container>

  <div layoutDirection="row">
    <mat-form-field appFlex="100">
      <mat-label i18n>Name</mat-label>
      <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name">
      <mat-error>{{fieldErrors['name']}}</mat-error>
    </mat-form-field>
  </div>
  <div layoutDirection="row">
    <mat-form-field appFlex="100">
      <mat-label i18n>Password</mat-label>
      <input matInput placeholder="Password" i18n-placeholder formControlName="password"
             [type]="(passwordCtrl.value.length > 0)? 'password' : 'text'">
      <mat-error>{{fieldErrors['password']}}</mat-error>
    </mat-form-field>
  </div>
  <div layoutDirection="row">
    <mat-form-field appFlex="100">
      <mat-label i18n>Description</mat-label>
      <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
      <mat-error>{{fieldErrors['description']}}</mat-error>
    </mat-form-field>
  </div>
</form>
