<!DOCTYPE html>
<html lang="<?= current_locale() ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= __('auth.totp_verify_title') ?></title>
    <link rel="stylesheet" href="/admin/assets/css/tokens.css?v=<?= cms_version() ?>">
    <link rel="stylesheet" href="/admin/assets/css/admin.css">
</head>
<body class="login-body">
    <div class="login-container">
        <div class="login-header">
            <a href="/" class="login-brand-link">
                <img src="/admin/assets/images/brand/itsweber-cms-logo.png"
                     alt="ITSWEBER CMS"
                     class="login-brand-logo"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                <h1 class="login-logo" style="display:none">ITSWEBER <span>CMS</span></h1>
            </a>
        </div>

        <p class="totp-info" style="text-align:center;color:rgba(255,255,255,0.75);margin-bottom:1.5rem;font-size:0.9rem;">
            <?= __('auth.totp_verify_info') ?>
        </p>

        <?php if (!empty($error)): ?>
        <div class="alert alert-error"><?= e($error) ?></div>
        <?php endif; ?>

        <form method="POST" action="/admin/login/verify-totp" class="login-form">
            <?= csrf_field() ?>
            <div class="form-group">
                <label for="totp_code"><?= __('auth.totp_code_label') ?></label>
                <input type="text" id="totp_code" name="totp_code"
                       required autofocus
                       autocomplete="one-time-code"
                       inputmode="numeric"
                       maxlength="19"
                       placeholder="<?= __('auth.totp_code_placeholder') ?>"
                       style="text-align:center;font-size:1.5rem;letter-spacing:0.3em;">
            </div>
            <button type="submit" class="btn btn-primary btn-full"><?= __('auth.totp_verify_submit') ?></button>
        </form>

        <p class="login-forgot" style="margin-top:1rem;text-align:center;">
            <a href="/admin/login"><?= __('auth.totp_back_to_login') ?></a>
        </p>
    </div>
</body>
</html>
