@model EpinelPS.Database.User

@{
    ViewData["Title"] = "修改密码";
}

<div class="nikke-dashboard">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="display-4 mb-0" data-i18n="users.password.title">修改密码</h1>
        <a asp-action="Index" class="btn btn-outline-light">
            <i class="fas fa-arrow-left me-2"></i> <span data-i18n="users.password.backToList">返回列表</span>
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">
                        <i class="fas fa-key me-2"></i>
                        <span data-i18n="users.table.username">用户</span>: @Model.Username
                    </h3>
                </div>
                <div class="card-body">
                    <form asp-action="SetPassword">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <input type="hidden" asp-for="ID" />

                        <div class="form-group mb-4">
                            <label asp-for="Password" class="form-label fw-bold" data-i18n="auth.password">密码</label>
                            <div class="input-group">
                                <input asp-for="Password" type="password" id="newPassword" class="form-control" required placeholder="输入新密码" data-i18n-placeholder="users.password.enterNewPassword" />
                                <button type="button" class="btn btn-outline-secondary" id="togglePassword" onclick="togglePasswordVisibility(event)">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="form-text text-light opacity-75" data-i18n="users.password.hint">
                                请输入强密码，包含字母、数字和特殊字符
                            </div>
                            <span asp-validation-for="Password" class="text-danger"></span>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-accent btn-lg">
                                <i class="fas fa-save me-2"></i>
                                <span data-i18n="users.password.changeButton">修改密码</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 卡片样式 */
    .card {
        background-color: var(--nikke-dark);
        border: 1px solid var(--nikke-gray-dark);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }

    .card-header {
        background-color: var(--nikke-primary);
        color: var(--nikke-light);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
        padding: 15px 20px;
    }

    /* 表单控件样式 */
    .form-control {
        background-color: var(--nikke-dark);
        color: var(--nikke-light);
        border: 1px solid var(--nikke-gray);
        transition: all var(--transition-fast);
    }

    .form-control:focus {
        background-color: var(--nikke-dark);
        color: var(--nikke-light);
        border-color: var(--nikke-accent);
        box-shadow: 0 0 0 0.25rem rgba(232, 62, 140, 0.25);
    }

    .form-label {
        color: var(--nikke-light);
        letter-spacing: 0.5px;
    }

    /* 按钮样式 */
    .btn-accent {
        background-color: var(--nikke-accent-dark);
        color: white;
        border: none;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
        padding: 12px 24px;
        transition: all var(--transition-fast);
    }

    .btn-accent:hover {
        background-color: var(--nikke-accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(232, 62, 140, 0.4);
        color: white;
    }

    #togglePassword {
        background-color: var(--nikke-gray-dark);
        color: var(--nikke-light);
        border: 1px solid var(--nikke-gray);
        transition: all var(--transition-fast);
    }

    #togglePassword:hover {
        background-color: var(--nikke-gray);
    }
</style>

<script>
    // 独立的密码可见性切换函数
    function togglePasswordVisibility(event) {
        // 阻止事件冒泡和默认行为
        event.preventDefault();
        event.stopPropagation();

        // 使用多种选择器确保能找到密码输入框
        const passwordInput = $('#newPassword').length ? $('#newPassword') :
            $('input[name="Password"]').length ? $('input[name="Password"]') :
                $('input[type="password"]').first();

        // 确保找到了元素
        if (passwordInput.length) {
            const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
            passwordInput.attr('type', type);

            // 切换图标
            $('#togglePassword').find('i').toggleClass('fa-eye fa-eye-slash');
        } else {
            console.error('Password input field not found');
        }
    }

    $(document).ready(function() {
        // 页面加载完成后检查并记录密码字段
        console.log('Password field ID:', $('input[type="password"]').attr('id'));
        console.log('Password field name:', $('input[type="password"]').attr('name'));
    });
</script>