@page "/auth/two-factor"
@using WebClientTpos.Client.Components.Auth
@inherits AuthBase

@*
    EN: Two-Factor Authentication page — 6-digit authenticator code input, blue theme.
    VI: Trang xác thực 2 lớp — input 6 chữ số từ authenticator app, theme xanh dương.
    Design: pencil-design/src/pages/tPOS/auth/workflow/two-factor-auth.pen
*@

<PageTitle>@L["Auth_2FA_PageTitle"]</PageTitle>

<div class="auth-page">
    <AuthCard Title="@L["Auth_2FA_Title"]"
              Subtitle="@L["Auth_2FA_Subtitle"]"
              Icon="shield-check"
              IconClass="auth-icon--blue"
              Compact="true">
        <ChildContent>
            <OtpInput UseBlueTheme="true" OnComplete="Handle2FAComplete" />
            
            <AuthButton Variant="blue">
                @L["Auth_2FA_Submit"]
            </AuthButton>
        </ChildContent>
        <FooterContent>
            <span class="auth-footer-text">
                @L["Auth_2FA_CantUseApp"] <a href="#" class="auth-footer-link--blue">@L["Auth_2FA_UseBackup"]</a>
            </span>
        </FooterContent>
    </AuthCard>
</div>

@code {
    private async Task Handle2FAComplete(string code)
    {
        Console.WriteLine($"2FA code entered: {code}");
    }
}
