<form appFormSubmit [formGroup]="userForm" (ngSubmit)="objectController.actionCallback(primaryAction)"
      class="fl-content" layoutDirection="column" appFlex="100">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="userForm"></app-form-errors>

  <div layoutDirection="row" appLayoutGap="5px">
    <mat-form-field appFlex="100">
      <mat-label i18n>First name</mat-label>
      <input matInput placeholder="First name" i18n-placeholder type="text" formControlName="first_name" required>
      <mat-error>{{fieldErrors['first_name']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="100">
      <mat-label i18n>Last name</mat-label>
      <input matInput placeholder="Last name" i18n-placeholder type="text" formControlName="last_name" required>
      <mat-error>{{fieldErrors['last_name']}}</mat-error>
    </mat-form-field>
  </div>

  <div layoutDirection="row">
    <mat-form-field appFlex="100">
      <mat-label i18n>Email</mat-label>
      <input matInput placeholder="Email" i18n-placeholder type="text" formControlName="email" required>
      <mat-error>{{fieldErrors['email']}}</mat-error>
    </mat-form-field>
  </div>

   <div layoutDirection="row">
    <mat-form-field appFlex="100">
      <mat-label i18n>External billing ID</mat-label>
      <input matInput placeholder="External billing ID" i18n-placeholder type="text" formControlName="external_billing_id">
      <mat-error>{{fieldErrors['external_billing_id']}}</mat-error>
    </mat-form-field>
  </div>

  <mat-form-field>
    <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 layoutDirection="row" layoutDirection-lt-md="column">
    <div appFlex="100">
      <div>
        <mat-checkbox [color]="'primary'" formControlName="is_active" i18n>Is active</mat-checkbox>
        <app-icon [icon]="isActiveInfoIcon"></app-icon>
      </div>
      <div *ngIf="isStaffPanel">
        <mat-checkbox [color]="'primary'" formControlName="is_staff" i18n>Is staff</mat-checkbox>
      </div>
    </div>
    <div appFlex="100">
      <div>
        <mat-checkbox [color]="'primary'" formControlName="email_verified" i18n>
          Has verified email
        </mat-checkbox>
      </div>
      <div *ngIf="isStaffPanel">
        <mat-checkbox [color]="'primary'" formControlName="is_superuser" i18n>Is superuser</mat-checkbox>
      </div>
    </div>
  </div>

  <ng-container *ngIf="userForm.contains('staff_notification_settings')">
    <h2 class="fl-heading-md" i18n>Select staff notifications sent to this user</h2>
    <div formArrayName="staff_notification_settings"
        *ngFor="let setting of userForm.controls.staff_notification_settings['controls']; let i = index;">
      <div [formGroupName]="i">
        <mat-checkbox color="primary" formControlName="enabled">
          <span [attr.fl-tooltip]="userForm.controls.staff_notification_settings['controls'][i].controls.title.value">
            {{userForm.controls.staff_notification_settings['controls'][i].controls.name.value}}
          </span>
        </mat-checkbox>
      </div>
    </div>
  </ng-container>

  <app-plugin-ui *ngIf="editStaffTicketNotificationsSettings"
                 pluginName="tickets" [panelName]="panelLayout.panel" componentName="UserTicketNotificationsSettingsForm"
                 [componentData]="{
                   observableUserSave: observableUserSave,
                   userID: object?.id,
                   onUserForm: true,
                   onUserSave: onUserSave
                 }"></app-plugin-ui>

</form>
