@page "/login"
@page "/docs/guides/components/login.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Login
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Login</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a login form with event handling for login, registration, and password reset actions, configurable features including simple login, registration mode, password reset visibility, "Remember Me" option, customizable FormField variants, localization support, and both horizontal and vertical layout options.
</RadzenText>

<RadzenText Anchor="login#login-events" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Login Events
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Login</code>, <code>Register</code> and <code>ResetPassword</code> to catch events raised by the Login component.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginEvents">
    <LoginEvents />
</RadzenExample>

<RadzenText Anchor="login#simple-login" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Simple Login
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Display a basic login form with username, password, and login button.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginSimple">
    <LoginSimple />
</RadzenExample>

<RadzenText Anchor="login#login-with-register" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Login with Register (hide password reset)
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>AllowResetPassword="false"</code> to hide the "Forgotten password" option.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginRegister">
    <LoginRegister />
</RadzenExample>

<RadzenText Anchor="login#remember-me" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Remember me
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>AllowRememberMe="true"</code> to show "Remember Me" option.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginRemember">
    <LoginRemember />
</RadzenExample>

<RadzenText Anchor="login#form-fields" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Form fields
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>FormFieldVariant</code> to set desired FormField for the user name and password inputs.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginFormField">
    <LoginFormField />
</RadzenExample>

<RadzenText Anchor="login#localization" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-8">
    Localization
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginLocalization">
    <LoginLocalization />
</RadzenExample>

<RadzenText Anchor="login#horizontal-login-example" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-8">
    Horizontal login layout example
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginHorizontalExample">
    <LoginHorizontalExample />
</RadzenExample>

<RadzenText Anchor="login#vertical-login-example" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-8">
    Vertical login layout example
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginVerticalExample">
    <LoginVerticalExample />
</RadzenExample>