@model Fengling.AuthService.ViewModels.LoginInputModel

@{
    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="M12 2L2 7l10 5 10-5-10-5z"/>
                    <path d="M2 17l10 5 10-5"/>
                    <path d="M2 12l10 5 10-5"/>
                </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="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="请输入密码"
                           required
                           autocomplete="current-password">
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <input type="checkbox"
                               id="RememberMe"
                               name="RememberMe"
                               class="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2">
                        <label for="RememberMe" class="text-sm font-medium">记住我</label>
                    </div>
                </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/register?returnUrl=@Model.ReturnUrl" class="text-primary hover:underline ml-1">立即注册</a>
        </div>
    </div>
</div>