<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 - ZJPB - 自己品吧</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Google Material Symbols -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Admin Theme -->
    <link href="{{ url_for('static', filename='css/admin-sidebar.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/admin-actions.css') }}" rel="stylesheet">
</head>
<body class="admin-sidebar-layout">
    {% set active_page = 'change_password' %}
    {% include 'admin/components/sidebar.html' %}

    <!-- 右侧主内容区 -->
    <div class="admin-main">
        <!-- 顶部导航栏 -->
        <header class="admin-header">
            <div class="header-breadcrumb">
                <a href="{{ url_for('admin.index') }}" class="breadcrumb-link">控制台</a>
                <span class="breadcrumb-separator">/</span>
                <span class="breadcrumb-current">修改密码</span>
            </div>
            <div class="header-actions">
                <div class="search-box">
                    <span class="material-symbols-outlined search-icon">search</span>
                    <input type="text" placeholder="全局搜索..." class="search-input">
                </div>
                <button class="header-btn">
                    <span class="material-symbols-outlined">notifications</span>
                </button>
                <button class="header-btn">
                    <span class="material-symbols-outlined">settings</span>
                </button>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="admin-content">
            <div class="page-header">
                <div>
                    <h1 class="page-title">修改密码</h1>
                    <p class="page-description">修改您的管理员账户登录密码</p>
                </div>
            </div>

            <!-- Flash Messages -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                    <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                        <span class="material-symbols-outlined" style="font-size: 18px; vertical-align: middle; margin-right: 8px;">
                            {% if category == 'error' %}error{% else %}check_circle{% endif %}
                        </span>
                        {{ message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <div class="row">
                <div class="col-md-8 col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('change_password') }}">
                                <!-- 旧密码 -->
                                <div class="form-group">
                                    <label for="old_password">旧密码</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <span class="material-symbols-outlined" style="font-size: 20px;">lock</span>
                                            </span>
                                        </div>
                                        <input type="password"
                                               class="form-control"
                                               id="old_password"
                                               name="old_password"
                                               placeholder="请输入旧密码"
                                               required
                                               autofocus>
                                    </div>
                                </div>

                                <!-- 新密码 -->
                                <div class="form-group">
                                    <label for="new_password">新密码</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <span class="material-symbols-outlined" style="font-size: 20px;">lock_reset</span>
                                            </span>
                                        </div>
                                        <input type="password"
                                               class="form-control"
                                               id="new_password"
                                               name="new_password"
                                               placeholder="请输入新密码（至少6位）"
                                               required
                                               minlength="6">
                                    </div>
                                    <small class="form-text text-muted">密码长度至少6位</small>
                                </div>

                                <!-- 确认新密码 -->
                                <div class="form-group">
                                    <label for="confirm_password">确认新密码</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <span class="material-symbols-outlined" style="font-size: 20px;">check_circle</span>
                                            </span>
                                        </div>
                                        <input type="password"
                                               class="form-control"
                                               id="confirm_password"
                                               name="confirm_password"
                                               placeholder="请再次输入新密码"
                                               required
                                               minlength="6">
                                    </div>
                                </div>

                                <!-- 提交按钮 -->
                                <div class="form-group mb-0 mt-4">
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <span class="material-symbols-outlined" style="font-size: 18px; vertical-align: middle; margin-right: 4px;">save</span>
                                        确认修改
                                    </button>
                                    <a href="{{ url_for('admin.index') }}" class="btn btn-secondary btn-block mt-2">
                                        <span class="material-symbols-outlined" style="font-size: 18px; vertical-align: middle; margin-right: 4px;">cancel</span>
                                        取消
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 安全提示 -->
                    <div class="alert alert-info mt-3">
                        <span class="material-symbols-outlined" style="font-size: 18px; vertical-align: middle; margin-right: 8px;">info</span>
                        <strong>安全提示：</strong>
                        <ul class="mb-0 mt-2" style="padding-left: 20px;">
                            <li>密码修改成功后，您将被自动登出，需要使用新密码重新登录</li>
                            <li>请妥善保管您的密码，不要与他人分享</li>
                            <li>建议定期修改密码以保证账号安全</li>
                        </ul>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

    <style>
    .page-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .page-description {
        color: #666;
        margin-bottom: 24px;
    }

    .card {
        border: 1px solid #DCDFE6;
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .card-body {
        padding: 24px;
    }

    .form-group label {
        color: #000000;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .input-group-text {
        background: #F5F7FA;
        border: 1px solid #DCDFE6;
        border-right: none;
        color: #606266;
    }

    .form-control {
        border: 1px solid #DCDFE6;
        border-radius: 0 4px 4px 0;
        padding: 10px 12px;
        height: auto;
    }

    .form-control:focus {
        border-color: #0052D9;
        box-shadow: none;
    }

    .btn-primary {
        background: #0052D9;
        border-color: #0052D9;
        padding: 10px 16px;
        font-weight: 500;
    }

    .btn-primary:hover {
        background: #003FA3;
        border-color: #003FA3;
    }

    .btn-secondary {
        background: #F5F7FA;
        border-color: #DCDFE6;
        color: #606266;
        padding: 10px 16px;
        font-weight: 500;
    }

    .btn-secondary:hover {
        background: #E6E8EB;
        border-color: #C0C4CC;
        color: #303133;
    }

    .alert {
        border-radius: 4px;
    }

    .alert-info {
        background: #ECF5FF;
        border-color: #B3D8FF;
        color: #0052D9;
    }

    .alert-danger {
        background: #FEF0F0;
        border-color: #FBC4C4;
        color: #D54941;
    }

    .alert-success {
        background: #F0F9FF;
        border-color: #C1E7C1;
        color: #00A870;
    }
    </style>

    <script>
    // 验证两次密码是否一致
    document.querySelector('form').addEventListener('submit', function(e) {
        const newPassword = document.getElementById('new_password').value;
        const confirmPassword = document.getElementById('confirm_password').value;

        if (newPassword !== confirmPassword) {
            e.preventDefault();
            alert('两次输入的新密码不一致，请重新输入');
            document.getElementById('confirm_password').focus();
        }
    });
    </script>
</body>
</html>
