@model Fengling.AuthService.ViewModels.RegisterViewModel

@{
    Layout = "_Layout";
    ViewData["Title"] = "注册";
}

<div class="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4 py-8">
    <div class="w-full max-w-md">
        <div class="text-center mb-8">
            <div class="inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mb-4">
                <svg class="h-8 w-8 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                    <circle cx="8.5" cy="7" r="4"/>
                    <line x1="20" y1="8" x2="20" y2="14"/>
                    <line x1="23" y1="11" x2="17" y2="11"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold">创建账号</h1>
            <p class="text-muted-foreground mt-2">加入 Fengling Auth</p>
        </div>

        <div class="bg-card border border-border rounded-lg shadow-sm p-6">
            @if (!ViewData.ModelState.IsValid)
            {
                <div class="mb-4 p-3 rounded-md bg-destructive/10 border border-destructive/20 text-destructive text-sm">
                    @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
                    {
                        <p>@error.ErrorMessage</p>
                    }
                </div>
            }

            <form method="post" class="space-y-4">
                <input type="hidden" name="ReturnUrl" value="@Model.ReturnUrl" asp-for="ReturnUrl" />

                <div class="space-y-2">
                    <label for="Username" class="text-sm font-medium">用户名</label>
                    <input type="text"
                           id="Username"
                           name="Username"
                           class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                           placeholder="请输入用户名"
                           value="@Model.Username"
                           required
                           autocomplete="username">
                </div>

                <div class="space-y-2">
                    <label for="Email" class="text-sm font-medium">邮箱</label>
                    <input type="email"
                           id="Email"
                           name="Email"
                           class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                           placeholder="请输入邮箱地址"
                           value="@Model.Email"
                           required
                           autocomplete="email">
                </div>

                <div class="space-y-2">
                    <label for="Password" class="text-sm font-medium">密码</label>
                    <input type="password"
                           id="Password"
                           name="Password"
                           class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                           placeholder="请输入密码（至少6个字符）"
                           required
                           autocomplete="new-password">
                </div>

                <div class="space-y-2">
                    <label for="ConfirmPassword" class="text-sm font-medium">确认密码</label>
                    <input type="password"
                           id="ConfirmPassword"
                           name="ConfirmPassword"
                           class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                           placeholder="请再次输入密码"
                           required
                           autocomplete="new-password">
                </div>

                <button type="submit"
                        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-primary text-primary-foreground hover:bg-primary/90 h-11 w-full px-8 shadow">
                    注册
                </button>
            </form>
        </div>

        <div class="mt-6 text-center text-sm">
            <span class="text-muted-foreground">已有账号？</span>
            <a href="/account/login?returnUrl=@Model.ReturnUrl" class="text-primary hover:underline ml-1">立即登录</a>
        </div>
    </div>
</div>