<div class="rr-app" data-auth-page>
    <main class="auth-shell">
        <h1>RpgRoller</h1>
        <p class="auth-subtitle">Register or log in to join a campaign session.</p>
        <p class="status-message @(StatusIsError ? "error" : "success")"
           data-auth-status
           aria-live="polite"
           hidden="@string.IsNullOrWhiteSpace(StatusMessage)">@StatusMessage</p>
        <div class="auth-grid">
            <section class="card auth-card">
                <h2>Register</h2>
                <p class="form-error" data-form-error hidden></p>
                <form class="form-grid" data-auth-form="register" novalidate>
                    <label for="register-username">Username</label>
                    <input id="register-username" name="username" autocomplete="username"/>
                    <p class="field-error" data-field-error="username" hidden></p>

                    <label for="register-display-name">Display name</label>
                    <input id="register-display-name" name="displayName" autocomplete="name"/>
                    <p class="field-error" data-field-error="displayName" hidden></p>

                    <label for="register-password">Password</label>
                    <input id="register-password" name="password" type="password" autocomplete="new-password"/>
                    <p class="field-error" data-field-error="password" hidden></p>

                    <button type="submit" data-submit-label="Register" data-submitting-label="Registering...">Register</button>
                </form>
            </section>

            <section class="card auth-card">
                <h2>Login</h2>
                <p class="form-error" data-form-error hidden></p>
                <form class="form-grid" data-auth-form="login" novalidate>
                    <label for="login-username">Username</label>
                    <input id="login-username" name="username" autocomplete="username"/>
                    <p class="field-error" data-field-error="username" hidden></p>

                    <label for="login-password">Password</label>
                    <input id="login-password" name="password" type="password" autocomplete="current-password"/>
                    <p class="field-error" data-field-error="password" hidden></p>

                    <button type="submit" data-submit-label="Login" data-submitting-label="Logging in...">Login</button>
                </form>
            </section>
        </div>
    </main>
</div>

@code {
    [Parameter]
    public string? StatusMessage { get; set; }

    [Parameter]
    public bool StatusIsError { get; set; }
}
