<ol class="breadcrumb" id="breadcrumbs">
  <li>{{'accountSecurityTitle' | translate}}</li>
  <li>
    <a href="#">{{'authenticatorTitle' | translate}}</a>
  </li>
  <li><strong>{{'authenticatorBackupCodesSetupTitle' | translate}}</strong></li>
</ol>

<div class="col-sm-12 card-pf ">
    <div class="card-pf-body row">
        <div class="col-sm-12 col-md-4">
          <div class="card-pf-subtitle" id="authenticatorBackupCodesSetupTitle">
              {{'authenticatorBackupCodesSetupTitle' | translate}}
          </div>
          <div class="introMessage" id="backupcodesIntroMessage">
            <p>{{'backupcodesIntroMessage' | translate}}</p>
          </div>
        </div>
        <div class="col-sm-12 col-md-8">
          <div class="backup-codes-box">
            <div class="backup-codes-box-header">
              <div class="header-text">
                <b>{{'realmName' | translate}}:</b> <span id="realmName">Admin</span>
              </div>
            </div>
            <!--Backup Codes Box Header-->
            <div class="backup-codes-box-body">
              <ol class="backup-codes-list" id="backupCodesList">
                <li>7890 7327</li>
                <li>0000 7347</li>
                <li>7890 1227</li>
                <li>7870 9065</li>
                <li>1234 1232</li>
                <li>3232 2323</li>
                <li>7890 7327</li>
                <li>0000 7347</li>
                <li>7890 1227</li>
                <li>7870 9065</li>
                <li>1234 1232</li>
                <li>3232 2323</li>
              </ol>
            </div>
          </div>
          <!--Backup Codes Box Body-->
          <div class="top-margin-m">
            <button type="button" class="btn btn-default" id="backupCodesDownloadBtn">{{'doDownload' | translate}}</button>
            <button type="button" class="btn btn-default" id="backupCodesPrintBtn">{{'doPrint' | translate}}</button>
            <button type="button" class="btn btn-default" id="backupCodesCopyBtn">{{'doCopy' | translate}}</button>
          </div>
          <!--Buttons Group-->
          <div class="top-margin-m">
            <ul class="left-padding-m">
              <li>{{'backupCodesTips-1' | translate}}</li>
              <li>{{'backupCodesTips-2' | translate}} Jan 11, 2018.</li>
            </ul>
          </div>
          <!--Annotations-->
          <hr>
          <button type="button" class="btn btn-default" id="generateNewBackupCodesBtn">{{'generateNewBackupCodes' | translate}}</button>
          <div class="generate-annotation">
            {{'backupCodesTips-3' | translate}}
          </div>
          <div class="top-margin-m">
            <a href="" id="backtoAuthenticatorPage">&lt; {{'backtoAuthenticatorPage' | translate}}</a>
          </div>
        </div>
