<ng-container *ngIf="editing">
  <h1>Editing {{ model.usernameValue }}</h1>
</ng-container>
<ng-container *ngIf="adding">
  <h1>Add new user</h1>
</ng-container>

<form (ngSubmit)="updateUser()">
  <div class="row" *ngIf="adding">
    <div class="col-lg-6 col-12">
      <mat-form-field appearance="outline" color="accent">
        <mat-label>Username</mat-label>
        <input
          matInput
          type="text"
          [formControl]="model.username"
          name="username"
          autocorrect="off"
          autocapitalize="none"
          required
        />
        <mat-error *ngIf="model.username.errors">
          {{ model.usernameError }}
        </mat-error>
      </mat-form-field>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6 col-12">
      <mat-form-field appearance="outline" color="accent">
        <mat-label>{{ editing ? 'New Password' : 'Password' }}</mat-label>
        <input
          matInput
          type="password"
          [formControl]="model.password"
          name="password"
          [required]="adding"
        />
        <mat-error *ngIf="model.password.errors">
          {{ model.passwordError }}
        </mat-error>
      </mat-form-field>
    </div>
  </div>

  <div class="row" *ngIf="!isLockedPerms()">
    <div class="col-lg-6 col-12">
      <values-picker
        name="role"
        [control]="model.roles"
        [disabled-list]="soulBoundRoles"
        [selection-list]="allRoles"
      ></values-picker>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <h3>Effective Permissions</h3>
    </div>
    <div class="col-12">
      <mat-chip-list aria-label="User Permissions">
        <mat-chip
          *ngFor="let permission of getEffectivePermissions()"
          [disableRipple]="true"
        >
          {{ permission }}
        </mat-chip>
      </mat-chip-list>
    </div>
  </div>

  <div class="row">
    <div class="col-12 py-4">
      <button mat-raised-button color="accent" type="submit">
        {{ editing ? 'UPDATE' : 'ADD' }}
      </button>

      <button
        mat-raised-button
        class="ms-2"
        color="primary"
        type="button"
        (click)="cancel()"
      >
        CANCEL
      </button>
    </div>
  </div>
</form>
