{{template "settings/_header.html" .}}
        <!-- 账号信息 -->
        <div class="settings-card">
            <div class="settings-card-header">
                <h2>账号信息</h2>
                <p class="settings-card-desc">账号安全和基本状态</p>
            </div>
            <div class="settings-card-body">
                <div class="info-row">
                    <span class="info-label">用户 ID</span>
                    <span class="info-value">{{.User.ID}}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">邮箱</span>
                    <span class="info-value">{{.User.Email}}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">账号状态</span>
                    <span class="info-value">
                        <span class="status-badge status-{{.User.Status}}">{{.StatusName}}</span>
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">注册时间</span>
                    <span class="info-value">{{.User.CreatedAt.Format "2006-01-02 15:04:05"}}</span>
                </div>
                {{if .User.LastLoginAt}}
                <div class="info-row">
                    <span class="info-label">上次登录</span>
                    <span class="info-value">{{.User.LastLoginAt.Format "2006-01-02 15:04:05"}}</span>
                </div>
                {{end}}
                <div class="info-row">
                    <span class="info-label">最后更新</span>
                    <span class="info-value">{{.User.UpdatedAt.Format "2006-01-02 15:04:05"}}</span>
                </div>
            </div>
        </div>

        <!-- 修改密码 -->
        <div class="settings-card">
            <div class="settings-card-header">
                <h2>修改密码</h2>
                <p class="settings-card-desc">修改密码后需重新登录</p>
            </div>
            <div class="settings-card-body">
                <div class="form-group">
                    <label class="form-label" for="currentPassword">当前密码</label>
                    <input type="password" id="currentPassword" class="settings-text-input" placeholder="输入当前密码" autocomplete="current-password">
                </div>
                <div class="form-group">
                    <label class="form-label" for="newPassword">新密码</label>
                    <input type="password" id="newPassword" class="settings-text-input" placeholder="至少 8 位，包含大小写字母和数字" autocomplete="new-password">
                </div>
                <div class="settings-card-footer">
                    <button id="changePwdBtn" class="settings-save-btn">修改密码</button>
                    <span class="form-hint">修改成功后需重新登录</span>
                </div>
            </div>
        </div>

        <!-- 注销账号 -->
        <div class="settings-card settings-card-danger">
            <div class="settings-card-header">
                <h2>注销账号</h2>
                <p class="settings-card-desc">账号将在 7 天后正式注销，期间可随时重新登录撤销注销</p>
            </div>
            <div class="settings-card-body">
                <div class="form-group">
                    <label class="form-label" for="deletePassword">确认密码</label>
                    <input type="password" id="deletePassword" class="settings-text-input" placeholder="输入密码确认" autocomplete="current-password">
                </div>
                <div class="form-group">
                    <label class="form-label" for="deleteReason">注销原因（选填）</label>
                    <textarea id="deleteReason" class="settings-textarea" maxlength="500" placeholder="可以告诉我们为什么要离开吗？"></textarea>
                </div>
                <div class="settings-card-footer">
                    <button id="deleteAccountBtn" class="settings-danger-btn">确认注销</button>
                    <span class="form-hint">此操作不可逆，请谨慎处理</span>
                </div>
            </div>
        </div>
{{template "settings/_footer.html" .}}
<script src="/static/js/settings-account.js?v={{assetV "/static/js/settings-account.js"}}" nonce="{{.CSPNonce}}"></script>