{% extends "base.html" %}

{% block title %}登录 - 儿童语言学习系统{% endblock %}

{% block content %}
<div class="auth-page-container">
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="card kid-auth-card shadow-lg">
                    <div class="kid-auth-header">
                        <i class="fas fa-rocket icon"></i>
                        <h2 class="fw-bold">欢迎回来！</h2>
                    </div>
                    <div class="card-body p-4 p-md-5">
                        <p class="text-center text-muted mb-4">继续你的语言学习大冒险！</p>
                        
                        <form method="POST" id="loginForm">
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱地址</label>
                                 <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    <input type="email" class="form-control" id="email" name="email" 
                                           placeholder="请输入您的邮箱" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="password" class="form-label">密码</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                    <input type="password" class="form-control" id="password" name="password" 
                                           placeholder="请输入您的密码" required>
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                    <label class="form-check-label" for="remember">记住我</label>
                                </div>
                                <a href="{{ url_for('auth.forgot_password') }}" class="small">忘记密码？</a>
                            </div>

                            <button type="submit" class="btn btn-primary w-100 py-2 mb-3">
                                <i class="fas fa-paper-plane me-2"></i>登录出发！
                            </button>
                        </form>

                        <hr class="my-3">

                        <div class="text-center">
                            <p class="mb-0">还没有账户？ 
                                <a href="{{ url_for('auth.register') }}" class="fw-bold" style="color: var(--kid-accent);">
                                    立即加入
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 密码显示/隐藏切换
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');
    
    togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        
        const icon = togglePassword.querySelector('i');
        icon.classList.toggle('fa-eye');
        icon.classList.toggle('fa-eye-slash');
    });
    
    // 表单验证
    const loginForm = document.getElementById('loginForm');
    loginForm.addEventListener('submit', function(e) {
        const email = document.getElementById('email').value.trim();
        const password = document.getElementById('password').value.trim();
        
        if (!email || !password) {
            e.preventDefault();
            alert('请填写完整的登录信息');
            return;
        }
        
        // 简单的邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            e.preventDefault();
            alert('请输入有效的邮箱地址');
            return;
        }
    });
});
</script>
{% endblock %}