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

@*
    EN: Staff login page — centered card layout, green CTA, role hints.
    VI: Trang đăng nhập Nhân viên — layout card giữa, CTA xanh lá, gợi ý vai trò.
    Design: pencil-design/src/pages/tPOS/auth/login/staff-desktop.pen
*@

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

<div class="auth-page">
    <AuthCard Title="@L["Auth_Staff_Title"]"
              Subtitle="@L["Auth_Staff_Subtitle"]"
              Icon="user-check"
              IconClass="auth-icon--green"
              RoleBadge="@L["Auth_Staff_RoleBadge"]"
              RoleBadgeClass="auth-role-badge--green"
              Compact="true">
        <ChildContent>
            <div class="auth-form">
                <AuthInput Label="@L["Auth_Staff_IdLabel"]"
                           InputType="text"
                           Placeholder="@L["Auth_Staff_IdPlaceholder"]"
                           PrefixIcon="user"
                           InputId="staff-id"
                           AutoComplete="username" />
                
                <AuthInput Label="@L["Auth_Staff_PasswordLabel"]"
                           InputType="password"
                           Placeholder="••••••••"
                           PrefixIcon="lock"
                           InputId="staff-password"
                           AutoComplete="current-password" />
            </div>
            
            <AuthButton Variant="green" IconName="log-in">
                @L["Auth_Staff_Submit"]
            </AuthButton>
        </ChildContent>
        <FooterContent>
            <div class="auth-role-hints">
                <span class="auth-role-hints-title">@L["Auth_Staff_Roles"]</span>
                <div class="auth-role-list">
                    <span class="auth-role-item">
                        <i data-lucide="monitor"></i> @L["Auth_Staff_RoleCashier"]
                    </span>
                    <span class="auth-role-item">
                        <i data-lucide="coffee"></i> @L["Auth_Staff_RoleBarista"]
                    </span>
                    <span class="auth-role-item">
                        <i data-lucide="clipboard-list"></i> @L["Auth_Staff_RoleWaiter"]
                    </span>
                    <span class="auth-role-item">
                        <i data-lucide="settings"></i> @L["Auth_Staff_RoleManager"]
                    </span>
                </div>
            </div>
            <span class="auth-footer-text">
                @L["Auth_Staff_ForgotPwd"] <a href="/auth/forgot-password">@L["Auth_Staff_ContactManager"]</a>
            </span>
        </FooterContent>
    </AuthCard>
</div>
