@if (!success) {
  <form [formGroup]="form" (ngSubmit)="passwordReset()">
    <mat-card>
      <mat-card-content>
        <h2>{{'password.reset' | i18n}}</h2>
        @if (tokenInvalid) {
          <mat-error>
            {{'password.reset.tokenInvalid' | i18n}}
          </mat-error>
        }
        <mat-form-field>
          <mat-label>{{'password' | i18n}}</mat-label>
          <input matInput type="password"   formControlName="password"
            [(ngModel)]="model.password">
          @for (error of form.get('password').errors | keyvalue; track error) {
            <mat-error>
              {{error.key}}
            </mat-error>
          }
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'password.confirm' | i18n}}</mat-label>
          <input matInput type="password" length="6"
            formControlName="password2" [(ngModel)]="model.password2">
          <mat-error>
            {{'password.not-match' | i18n}}
          </mat-error>
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        @if (!working) {
          <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">
            {{'password.reset' | i18n}}
          </button>
        }
        @if (working) {
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        }
      </mat-card-actions>
    </mat-card>
  </form>
}

@if (success) {
  <mat-card>
    <mat-card-content>
      <h2>{{'password.reset.success.title' | i18n}}</h2>
      <p>{{'password.reset.success.text' | i18n}}</p>
    </mat-card-content>
    <mat-card-actions>
      <a routerLink="/login" mat-raised-button color="primary">
        {{'password.reset.login' | i18n}}
      </a>
    </mat-card-actions>
  </mat-card>
}