<div class="ui-g">
  <div class="ui-g-12">
    <b>구글 인증기(OTP)</b>는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.
    연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.
  </div>

  <div class="ui-g">
    <div class="ui-g-6">
      <p-card subtitle="IOS 회원">
        <p>App Store에서 "Authenticator" 검색 후 다운로드 해주세요.<br><br></p>
        <button type="button"  pButton label="App Store" icon="fa-check"></button>
      </p-card>
    </div>
    <div class="ui-g-6">
      <p-card subtitle="안드로이드 회원">
        <p>구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요.<br><br></p>
        <button type="button" pButton label="Google Play" icon="fa-check"></button>
      </p-card>
    </div>
  </div>
  
  <div class="ui-g-12">
    <h2>Key & Backup Code</h2>
    <div class="ui-g-3" *ngIf="totp">
      <qrcode [qrdata]="totp.uri" [size]="150" [level]="'M'"></qrcode>
    </div>

    <div class="ui-g-9">
      <div style="height: 80px;"></div>
      <div class="ui-bottom-space-10" *ngIf="totp">{{totp.key}}, {{totp.uri}}</div>
      <span class="md-inputfield">
        <input type="text" id="code" autocomplete="off" placeholder="Please enter your code" formControlName="code" 
        required class="ui-inputtext ui-corner-all ui-state-default ui-widget" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
      </span>
    </div>

    <!--QR Code print & Key Print-->
  </div>
  <div class="ui-g-12" dir="rtl">
    <button type="button" class="ui-button-width-fit ui-button-secondary" pButton icon="fa-close" (click)="onCancel()" label="No"></button>
    <button type="button" class="ui-button-width-fit" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button>
  </div>
</div>
<!--<p-panel>-->
  <!--<p-header [style]="{'margin-bottom':'20px'}">-->
    <!--<div>-->
      <!--구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.-->
      <!--연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.-->
    <!--</div>-->
  <!--</p-header>-->
  <!--구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.-->
  <!--연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.-->
<!--</p-panel>-->
<!--<p-panel>-->

<!--</p-panel>-->

<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->

<!--<mat-card class="example-card">-->
<!--<mat-card-header>-->
<!--<mat-card-title>QR Code</mat-card-title>-->
<!--&lt;!&ndash;<mat-card-subtitle>Select Target</mat-card-subtitle>&ndash;&gt;-->
<!--</mat-card-header>-->
<!--<mat-card-content>-->
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">-->
<!--<qrcode [qrdata]="'otpauth://totp/overFlow:geekdev@naver.com?secret=X6AWAK573M5372NM'" [size]="128" [level]="'M'"></qrcode>-->
<!--</div>-->
<!--</mat-card-content>-->
<!--</mat-card>-->

<!--</div>-->

<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->

<!--<mat-card class="example-card">-->
<!--<mat-card-header>-->
<!--<mat-card-title>Secret Code</mat-card-title>-->
<!--<mat-card-subtitle>X6AWAK573M5372NM</mat-card-subtitle>-->
<!--</mat-card-header>-->
<!--<mat-card-content>-->
<!--<form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="registClick()">-->
<!--<mat-form-field class="full-width">-->
<!--<input type="text" id="code" class="input" placeholder="Please enter your code"-->
<!--formControlName="code" required matInput>-->
<!--</mat-form-field>-->
<!--&lt;!&ndash;<div *ngIf="formErrors.email" class="help is-danger">&ndash;&gt;-->
<!--&lt;!&ndash;{{ formErrors.email }}&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</form>-->
<!--</mat-card-content>-->
<!--</mat-card>-->

<!--</div>-->