{% extends 'layout/base.html' %}

{% block title %}登录 - SmartDSP考勤管理系统{% endblock %}

{% block content %}
<div class="min-vh-100 d-flex align-items-center bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="card shadow">
                    <div class="card-body p-5">
                        <!-- Logo和标题 -->
                        <div class="text-center mb-4">
                            <div class="mb-3">
                                <i class="fas fa-clock fa-4x text-primary"></i>
                            </div>
                            <h2 class="fw-bold mb-2">SmartDSP考勤系统</h2>
                            <p class="text-muted">请使用学号和密码登录</p>
                        </div>

                        <!-- 登录表单 -->
                        <form method="POST" action="{{ url_for('auth.login') }}" novalidate>
                            <div class="mb-3">
                                <label for="student_number" class="form-label">
                                    <i class="fas fa-user me-1"></i>学号
                                </label>
                                <input type="text"
                                       class="form-control form-control-lg"
                                       id="student_number"
                                       name="student_number"
                                       placeholder="请输入学号"
                                       value="{{ request.form.get('student_number', '') }}"
                                       required
                                       autocomplete="username">
                                <div class="invalid-feedback">
                                    请输入学号
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="password" class="form-label">
                                    <i class="fas fa-lock me-1"></i>密码
                                </label>
                                <div class="input-group">
                                    <input type="password"
                                           class="form-control form-control-lg"
                                           id="password"
                                           name="password"
                                           placeholder="请输入密码"
                                           required
                                           autocomplete="current-password">
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="invalid-feedback">
                                    请输入密码
                                </div>
                            </div>

                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="remember" name="remember" value="true">
                                <label class="form-check-label" for="remember">
                                    记住我
                                </label>
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-sign-in-alt me-2"></i>登录
                                </button>
                            </div>
                        </form>

                        <!-- 帮助信息 -->
                        <div class="text-center mt-4">
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                如有登录问题，请联系管理员
                            </small>
                        </div>
                    </div>
                </div>

                <!-- 系统说明 -->
                <div class="card mt-3">
                    <div class="card-body text-center">
                        <h6 class="card-title">
                            <i class="fas fa-lightbulb me-1 text-warning"></i>
                            使用说明
                        </h6>
                        <div class="row text-start">
                            <div class="col-md-6">
                                <small class="text-muted">
                                    <ul class="list-unstyled mb-0">
                                        <li><i class="fas fa-check text-success me-1"></i> 查看个人考勤记录</li>
                                        <li><i class="fas fa-check text-success me-1"></i> 申请请假审批</li>
                                    </ul>
                                </small>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted">
                                    <ul class="list-unstyled mb-0">
                                        <li><i class="fas fa-check text-success me-1"></i> 个人统计分析</li>
                                        <li><i class="fas fa-check text-success me-1"></i> 修改个人密码</li>
                                    </ul>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<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 = this.querySelector('i');
        icon.className = type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
    });

    // 表单验证
    const form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        const studentNumber = document.getElementById('student_number').value.trim();
        const password = document.getElementById('password').value;

        if (!studentNumber || !password) {
            event.preventDefault();
            event.stopPropagation();

            if (!studentNumber) {
                document.getElementById('student_number').classList.add('is-invalid');
            }
            if (!password) {
                document.getElementById('password').classList.add('is-invalid');
            }
        }

        form.classList.add('was-validated');
    });

    // 清除验证状态
    document.getElementById('student_number').addEventListener('input', function() {
        this.classList.remove('is-invalid');
    });

    document.getElementById('password').addEventListener('input', function() {
        this.classList.remove('is-invalid');
    });
});
</script>
{% endblock %}