{% extends "base.html" %}

{% block title %}逐鹿导航 - 登录{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-lg-5 col-md-8">
        <div class="card shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white py-3">
                <div class="d-flex align-items-center justify-content-center">
                    <i class="bi bi-box-arrow-in-right fs-3 me-2"></i>
                    <h4 class="mb-0">用户登录</h4>
                </div>
            </div>

            <div class="card-body p-4">
                <form method="POST" class="needs-validation" novalidate>
                    {{ form.hidden_tag() }}

                    <div class="mb-4">
                        <div class="form-floating">
                            {{ form.username(class="form-control", placeholder="请输入用户名", required="required") }}
                            {{ form.username.label(class="form-label") }}
                        </div>
                        {% if form.username.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.username.errors %}
                                    <i class="bi bi-exclamation-circle-fill me-1"></i>{{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="mb-4">
                        <div class="form-floating position-relative">
                            {{ form.password(class="form-control", placeholder="请输入密码", required="required") }}
                            {{ form.password.label(class="form-label") }}
                            <button type="button" class="btn btn-link position-absolute end-0 top-0 text-decoration-none password-toggle" style="z-index: 5;">
                                <i class="bi bi-eye-fill"></i>
                            </button>
                        </div>
                        {% if form.password.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.password.errors %}
                                    <i class="bi bi-exclamation-circle-fill me-1"></i>{{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

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

                    <div class="d-grid mb-4">
                        <button type="submit" class="btn btn-primary btn-lg rounded-pill">
                            <i class="bi bi-box-arrow-in-right me-2"></i>登 录
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 密码显示/隐藏切换
    const passwordToggles = document.querySelectorAll('.password-toggle');
    passwordToggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const passwordInput = this.closest('.form-floating').querySelector('input');
            const icon = this.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('bi-eye-fill');
                icon.classList.add('bi-eye-slash-fill');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('bi-eye-slash-fill');
                icon.classList.add('bi-eye-fill');
            }
        });
    });

    // 表单验证
    const forms = document.querySelectorAll('.needs-validation');
    forms.forEach(form => {
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
});
</script>
{% endblock %}