@page "/auth/login/admin"
@using WebClientTpos.Client.Components.Auth
@inherits AuthBase

@*
    EN: Admin login page — centered card layout, blue CTA, security badge.
    VI: Trang đăng nhập Admin — layout card giữa, CTA xanh dương, badge bảo mật.
    Design: pencil-design/src/pages/tPOS/auth/login/admin-desktop.pen
*@

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

<div class="auth-page">
    <AuthCard Title="@L["Auth_Admin_Title"]"
              Subtitle="@L["Auth_Admin_Subtitle"]"
              Icon="shield"
              IconClass="auth-icon--blue"
              RoleBadge="@L["Auth_Admin_RoleBadge"]"
              RoleBadgeClass="auth-role-badge--blue"
              SecurityHint="@L["Auth_Admin_SecurityHint"]"
              SecurityHintIcon="shield-alert"
              SecurityHintClass="auth-security-hint--warning">
        <ChildContent>
            <div class="auth-form">
                <AuthInput Label="@L["Auth_Admin_EmailLabel"]"
                           InputType="email"
                           Placeholder="@L["Auth_Admin_EmailPlaceholder"]"
                           PrefixIcon="mail"
                           InputId="admin-email"
                           AutoComplete="email" />
                
                <AuthInput Label="@L["Auth_Admin_PasswordLabel"]"
                           InputType="password"
                           Placeholder="••••••••"
                           PrefixIcon="lock"
                           InputId="admin-password"
                           AutoComplete="current-password" />
            </div>
            
            <AuthButton Variant="blue" IconName="shield">
                @L["Auth_Admin_Submit"]
            </AuthButton>
        </ChildContent>
        <FooterContent>
            <div class="auth-role-hints">
                <span class="auth-role-hints-title">@L["Auth_Admin_OtherRoles"]</span>
                <div class="auth-role-list">
                    <a href="/auth/login/branch" class="auth-role-item">
                        <i data-lucide="store"></i> @L["Auth_Admin_RoleBranch"]
                    </a>
                    <a href="/auth/login/staff" class="auth-role-item">
                        <i data-lucide="user"></i> @L["Auth_Admin_RoleStaff"]
                    </a>
                </div>
            </div>
        </FooterContent>
    </AuthCard>
</div>
