<main class="auth-shell">
    <h1>RpgRoller</h1>
    <p class="auth-subtitle">Register or log in to join a campaign session.</p>
    @if (!string.IsNullOrWhiteSpace(StatusMessage))
    {
        <p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
    }
    <div class="auth-grid">
        <section class="card auth-card">
            <h2>Register</h2>
            @if (!string.IsNullOrWhiteSpace(RegisterState.ErrorMessage))
            {
                <p class="form-error">@RegisterState.ErrorMessage</p>
            }
            <form class="form-grid" @onsubmit="SubmitRegisterAsync" @onsubmit:preventDefault>
                <label for="register-username">Username</label>
                <input id="register-username" @bind="RegisterState.Model.Username" @bind:event="oninput"
                       autocomplete="username"/>
                @if (RegisterState.Errors.TryGetValue("username", out var registerUsernameError))
                {
                    <p class="field-error">@registerUsernameError</p>
                }
                <label for="register-display-name">Display name</label>
                <input id="register-display-name" @bind="RegisterState.Model.DisplayName" @bind:event="oninput"
                       autocomplete="name"/>
                @if (RegisterState.Errors.TryGetValue("displayName", out var registerDisplayNameError))
                {
                    <p class="field-error">@registerDisplayNameError</p>
                }
                <label for="register-password">Password</label>
                <input id="register-password" type="password" @bind="RegisterState.Model.Password" @bind:event="oninput"
                       autocomplete="new-password"/>
                @if (RegisterState.Errors.TryGetValue("password", out var registerPasswordError))
                {
                    <p class="field-error">@registerPasswordError</p>
                }
                <button type="submit" disabled="@IsSubmitting">@(IsSubmitting ? "Registering..." : "Register")</button>
            </form>
        </section>

        <section class="card auth-card">
            <h2>Login</h2>
            @if (!string.IsNullOrWhiteSpace(LoginState.ErrorMessage))
            {
                <p class="form-error">@LoginState.ErrorMessage</p>
            }
            <form class="form-grid" @onsubmit="SubmitLoginAsync" @onsubmit:preventDefault>
                <label for="login-username">Username</label>
                <input id="login-username" @bind="LoginState.Model.Username" @bind:event="oninput"
                       autocomplete="username"/>
                @if (LoginState.Errors.TryGetValue("username", out var loginUsernameError))
                {
                    <p class="field-error">@loginUsernameError</p>
                }
                <label for="login-password">Password</label>
                <input id="login-password" type="password" @bind="LoginState.Model.Password" @bind:event="oninput"
                       autocomplete="current-password"/>
                @if (LoginState.Errors.TryGetValue("password", out var loginPasswordError))
                {
                    <p class="field-error">@loginPasswordError</p>
                }
                <button type="submit" disabled="@IsSubmitting">@(IsSubmitting ? "Logging in..." : "Login")</button>
            </form>
        </section>
    </div>
</main>