{% extends "base.html" %}
{% block title %}法律题库答题系统{% endblock %}

{% block main_container_class %}container-wide{% endblock %}

{% block content %}
<!-- 未登录：品牌展示 + 登录 -->
<section class="login-hero">
    <div class="login-split">
        <!-- 左：品牌文案 -->
        <div class="login-intro">
            <h1 class="hero-display">法律知识，高效学习。</h1>
            <p class="lead-airy" style="margin-top: 20px; max-width: 420px;">
                练习、模拟考试、智能错题本与学习统计，一站式法律刷题平台。
            </p>
            <ul class="feature-list">
                <li>
                    <span class="feature-ico">✓</span>
                    <div>
                        <div class="feature-title">多种练习模式</div>
                        <div class="feature-desc">顺序刷题、随机练习、按题型定量训练</div>
                    </div>
                </li>
                <li>
                    <span class="feature-ico">✓</span>
                    <div>
                        <div class="feature-title">智能错题本</div>
                        <div class="feature-desc">自动归集错题，支持重练与标记掌握</div>
                    </div>
                </li>
                <li>
                    <span class="feature-ico">✓</span>
                    <div>
                        <div class="feature-title">学习统计</div>
                        <div class="feature-desc">题型分布、分类掌握度与答题趋势一目了然</div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 右：登录卡片 -->
        <div class="login-card-wrap">
            <div class="utility-card" style="text-align: center;">
                <h2 class="display-md" style="margin-bottom: 8px;">欢迎登录</h2>
                <p class="body-muted" style="margin-bottom: 28px;">法律题库答题系统</p>

                <form method="POST" action="{{ url_for('auth.login') }}">
                    <div class="form-group">
                        <label class="form-label" for="username">用户名</label>
                        <input type="text" id="username" name="username" class="form-control" required autofocus>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="password">密码</label>
                        <div class="password-wrapper">
                            <input type="password" id="password" name="password" class="form-control" required>
                            <button type="button" class="password-toggle" data-target="password" aria-label="显示或隐藏密码">
                                <span class="eye-open">👁</span>
                                <span class="eye-close" style="display:none;">🙈</span>
                            </button>
                        </div>
                        <div class="caps-lock-hint" id="caps-hint-password">⚠ 大写锁定已开启</div>
                    </div>

                    <div class="form-group" style="display: flex; align-items: center; gap: 8px;">
                        <input type="checkbox" id="remember" name="remember">
                        <label for="remember" style="font-size: 14px; color: var(--ink-muted-48);">记住我</label>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block" style="font-size: 17px; padding: 14px 22px;">
                        登录
                    </button>
                </form>

                <p style="margin-top: 20px; font-size: 14px; color: var(--ink-muted-48);">
                    还没有账号？<a href="{{ url_for('auth.register') }}">立即注册</a>
                </p>
                <p class="fine-print" style="margin-top: 16px;">
                    默认管理员账号：admin / admin123
                </p>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
// 密码显示/隐藏切换
document.querySelectorAll('.password-toggle').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var targetId = this.dataset.target;
        var input = document.getElementById(targetId);
        var eyeOpen = this.querySelector('.eye-open');
        var eyeClose = this.querySelector('.eye-close');
        if (input.type === 'password') {
            input.type = 'text';
            eyeOpen.style.display = 'none';
            eyeClose.style.display = '';
        } else {
            input.type = 'password';
            eyeOpen.style.display = '';
            eyeClose.style.display = 'none';
        }
    });
});

// Caps Lock 大小写检测
function setupCapsLock(inputId, hintId) {
    var input = document.getElementById(inputId);
    var hint = document.getElementById(hintId);
    if (!input || !hint) return;
    input.addEventListener('keyup', function(e) {
        if (e.getModifierState && e.getModifierState('CapsLock')) hint.classList.add('show');
        else hint.classList.remove('show');
    });
    input.addEventListener('keydown', function(e) {
        if (e.getModifierState && e.getModifierState('CapsLock')) hint.classList.add('show');
        else hint.classList.remove('show');
    });
    input.addEventListener('blur', function() { hint.classList.remove('show'); });
}
setupCapsLock('password', 'caps-hint-password');
</script>
{% endblock %}