<div class="wrapper">
  <textarea id="backupCodes" class="backup-codes-area" rows="10" readonly>{{formattedBackupCodes}}</textarea>

  {{d-button
    action=(action "copyToClipboard")
    class="backup-codes-copy-btn"
    icon="copy"
    aria-label="user.second_factor_backup.copy_to_clipboard"
    title="user.second_factor_backup.copy_to_clipboard"}}

  <a download="{{siteTitleSlug}}-backup-codes.txt"
     class="btn no-text btn-icon backup-codes-download-btn"
     aria-label={{i18n "user.second_factor_backup.download_backup_codes"}}
     title={{i18n "user.second_factor_backup.download_backup_codes"}}
     rel="noopener noreferrer"
     target="_blank"
     href="data:application/octet-stream;charset=utf-8;base64,{{base64BackupCode}}">
    {{d-icon "download"}}
  </a>
</div>
