<form>
  <h3 class="mb-1" mat-dialog-title>Change password</h3>
  <p class="mb-4">Set a new password for <span class="fw-bold">{{data?.username}}</span></p>
  <div mat-dialog-content>

    <mat-form-field class="w-100">
      <span matPrefix class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>key</mat-icon>
        <span class="text-muted">|</span>
      </span>

      <input matInput [type]="showPassword ? 'text' : 'password'" autocomplete="new-password" [(ngModel)]="password"
        placeholder="New password"
        [ngModelOptions]="{standalone: true}" />

      <button mat-icon-button matSuffix type="button" (click)="showPassword = !showPassword">
        <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>

    </mat-form-field>

  </div>

  <div mat-dialog-actions [align]="'end'">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-flat-button color="primary" type="submit" (click)="save()" [disabled]="isLoading" type="submit">Save
      password</button>
  </div>

</form>