<h1>Settings</h1>
<p-dialog
  header="{{headerItem}}"
  [modal]="true"
  [width]="800"
  [(visible)]="totpSettingDisplay"
  [showHeader]="true"
  [closeOnEscape]="false">

  <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"
               required
               class="ui-inputtext ui-corner-all ui-state-default ui-widget"
               [(ngModel)]="totpCode"
               (keyup)="totpInput($event)">
      </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)="totpSettingDisplay=false" label="No"></button>
      <button type="button" class="ui-button-width-fit" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button>
    </div>
  </div>
</p-dialog>

<p-dataView [value]="lists" [paginator]="false" [rows]="5">
  <p-header>이중보안</p-header>

  <ng-template let-item pTemplate="listItem">
    <div class="ui-g ui-bottom-border-1" style="padding: 2em;">
      <div class="ui-g-2 ui-sm-6">{{item.name }} </div>
      <div class="ui-g-3 ui-sm-6">{{item.value }}</div>
      <div class="ui-g-5 ui-sm-6">{{item.description }}</div>

      <div class="ui-g-2 ui-sm-6">
        <button pButton type="button" label="Add" icon="ui-icon-add" (click)="on2factorConfig($event, item)"></button>
      </div>
    </div>
  </ng-template>
</p-dataView>