@model Fengling.AuthService.ViewModels.DashboardViewModel

@{
    Layout = "_Layout";
    ViewData["Title"] = "设置";
}

<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold">账户设置</h1>
        <p class="text-muted-foreground mt-2">管理您的账户设置和偏好</p>
    </div>

    <div class="max-w-2xl space-y-6">
        <div class="bg-card border border-border rounded-lg p-6">
            <h2 class="text-lg font-semibold mb-4">修改密码</h2>
            <form method="post" class="space-y-4">
                <div class="space-y-2">
                    <label for="currentPassword" class="text-sm font-medium">当前密码</label>
                    <input type="password"
                           id="currentPassword"
                           name="currentPassword"
                           class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                           placeholder="请输入当前密码">
                </div>

                <div class="space-y-2">
                    <label for="newPassword" class="text-sm font-medium">新密码</label>
                    <input type="password"
                           id="newPassword"
                           name="newPassword"
                           class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                           placeholder="请输入新密码（至少6个字符）">
                </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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                           placeholder="请再次输入新密码">
                </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-10 px-8">
                    修改密码
                </button>
            </form>
        </div>

        <div class="bg-card border border-border rounded-lg p-6">
            <h2 class="text-lg font-semibold mb-4">安全选项</h2>
            <div class="space-y-4">
                <div class="flex items-center justify-between p-4 rounded-lg border border-border">
                    <div>
                        <p class="font-medium">两步验证</p>
                        <p class="text-sm text-muted-foreground">为您的账户添加额外的安全保护</p>
                    </div>
                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4">
                        启用
                    </button>
                </div>

                <div class="flex items-center justify-between p-4 rounded-lg border border-border">
                    <div>
                        <p class="font-medium">登录通知</p>
                        <p class="text-sm text-muted-foreground">当有新设备登录时发送通知</p>
                    </div>
                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4">
                        配置
                    </button>
                </div>
            </div>
        </div>

        <div class="bg-card border border-border rounded-lg p-6">
            <h2 class="text-lg font-semibold mb-4">危险区域</h2>
            <div class="flex items-center justify-between p-4 rounded-lg border border-destructive/20">
                <div>
                    <p class="font-medium text-destructive">删除账户</p>
                    <p class="text-sm text-muted-foreground">永久删除您的账户和所有数据</p>
                </div>
                <button class="inline-flex items-center justify-center rounded-md text-sm font-medium bg-destructive text-destructive-foreground hover:bg-destructive/90 h-9 px-4">
                    删除账户
                </button>
            </div>
        </div>
    </div>
</div>