<div fxLayout="column" fxLayoutAlign="center center">
  <mat-card style="width: 32em">
    <p>Всё просто, для регистрации введите проверочную строку <br/><strong>{{(qr | async)?.key}}</strong><br/> или отсканируйте qr-код с помощью приложения Authenticator<sup>*</sup>, затем введите шестизначный код из приложения и можно начинать.</p>
    <p>Или, если вы уже зарегистрированы, просто введите шестизначный код в поле ниже.</p>
    <div fxLayout="row" fxLayoutAlign="center center"><img alt="your qr-code here" height="320" src="{{(qr | async)?.img}}" width="320"></div>
    <p>Введите проверочный код из приложения Authenticator<sup>*</sup></p>
    <div fxLayout="row" fxLayoutAlign="center center">
      <mat-form-field>
        <mat-label>Проверочный код</mat-label>
        <mat-icon *ngIf="_.isNull(valid)" matSuffix>qr_code</mat-icon>
        <mat-icon *ngIf="valid === 1" matSuffix>done</mat-icon>
        <mat-icon *ngIf="valid === 0" matSuffix>not_interested</mat-icon>
        <input (ngModelChange)="checkCode($event)" [ngModel]="code" matInput maxlength="6" minlength="6" pattern="^[0-9]+$" placeholder="123456" type="text"/>
      </mat-form-field>
    </div>
    <p *ngIf="valid === 0">Вход с нового устройства или утрачен ключ Authenticator<sup>*</sup>? Восстановите доступ с помощью кодов восстановления.</p>
    <p style="font-size: small; color: gray"><sup>*</sup>приложение Authenticator может быть заменено аналогичным приложением с функциями TOTP</p>
    <mat-card-actions fxLayout="row" fxLayoutAlign="center center">
      <button (click)="ngOnInit()" mat-button>
        <mat-icon>refresh</mat-icon>&nbsp;ОБНОВИТЬ КОД
      </button>
      <button (click)="showRecoverDialog()" mat-button>
        <mat-icon>code</mat-icon>&nbsp;ВОССТАНОВИТЬ ДОСТУП
      </button>
    </mat-card-actions>
  </mat-card>
</div>
