<div class="new-pass-card text-center">
  <form [formGroup]="newPassForm" (ngSubmit)="submit()">
    <div>
      <mat-card appearance="raised" [style.margin-top]="cardTopMargin">
        <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
        <div>
          <app-logo [darkContext]="false" [linkOptions]="logoLinkOptions" [customStyle]="{
            width: '140px',
            height: '70px',
            marginBottom: '20px'
          }"></app-logo>
        </div>
        <mat-card-title class="text-left" *ngIf="!resetRequested">
          <span class="card-title" i18n>Reset password</span>
        </mat-card-title>
        <mat-card-content>
          <div *ngIf="!resetRequested">
            <app-form-errors #formErrors [formGroup]="newPassForm"></app-form-errors>
            <mat-form-field subscriptSizing="dynamic">
              <mat-label i18n>New password</mat-label>
              <input matInput placeholder="New password" i18n-placeholder autocapitalize="none"
                     autocomplete="new-password" formControlName="new_password" name="new_password"
                     [type]="(newPasswordCtrl.value.length > 0)? 'password' : 'text'"
                     [cdkTrapFocusAutoCapture]="true" [cdkTrapFocus]="false">
              <mat-error>{{newPassForm.controls.new_password.errors | errorFormatter}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Retype new password</mat-label>
              <input matInput placeholder="Retype new password" i18n-placeholder autocapitalize="none"
                     [type]="(confirmPasswordCtrl.value.length > 0)? 'password' : 'text'"
                     formControlName="confirm_password" name="confirm_password">
              <mat-error i18n>{{fieldErrors['confirm_password']}}</mat-error>
            </mat-form-field>
          </div>
          <div class="text-center fl-margin-bottom" *ngIf="resetRequested" i18n>
            Password has been reset successfully
          </div>
          <button *ngIf="resetRequested" class="fl-margin-top" mat-raised-button
                  [routerLink]="config.getPanelUrl('login')"
                  [color]="'primary'" i18n>Login page
          </button>
        </mat-card-content>
        <mat-card-actions class="fl-block">
          <div *ngIf="!resetRequested">
            <button mat-raised-button [color]="'primary'" type="submit" i18n>Reset</button>
          </div>
        </mat-card-actions>
      </mat-card>
    </div>
  </form>
  <a class="powered-by-link" href="https://fleio.com" target="_blank"
     *ngIf="auth && auth.userData && !auth.userData.is_white_label" i18n>
    Powered by Fleio
  </a>
</div>
