<?php
$bp = Auth::basePath();
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Two-factor — <?= h(cfg('app_name')) ?></title>
  <script>
    (function () {
      var t = localStorage.getItem('crash_console_theme');
      if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
      var l = localStorage.getItem('crash_console_lang');
      if (l === 'en' || l === 'ru') document.documentElement.setAttribute('lang', l);
    })();
  </script>
  <link rel="stylesheet" href="<?= h($bp) ?>/assets/css/app.css">
  <script src="<?= h($bp) ?>/assets/js/i18n.js" defer></script>
</head>
<body class="login-page" data-base-path="<?= h($bp) ?>">
  <div class="login-locale">
    <label class="toolbar-select locale-toolbar-select" data-i18n-title="lang.label" title="Language">
      <span class="locale-flag" aria-hidden="true">🇬🇧</span>
      <select class="lang-select" data-i18n-aria="lang.label" aria-label="Language">
        <option value="en">EN</option>
        <option value="ru">RU</option>
      </select>
    </label>
  </div>
  <form class="login-card" method="post" action="<?= h($bp) ?>/two-factor">
    <h1 data-i18n="twofa.title">Two-factor authentication</h1>
    <p class="muted" data-i18n="twofa.hint">Enter the 6-digit code from your authenticator app.</p>
    <?php if (!empty($twofaError)): ?>
      <div class="alert" data-i18n="twofa.error"><?= h($twofaError) ?></div>
    <?php endif; ?>
    <label><span data-i18n="twofa.code">Authentication code</span>
      <input name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required autofocus></label>
    <button type="submit" data-i18n="twofa.submit">Continue</button>
    <p class="hint"><a href="<?= h($bp) ?>/login" data-i18n="twofa.cancel">Cancel</a></p>
  </form>
  <?php platform_render_footer(); ?>
</body>
</html>
