{% extends 'base.html' %}
{% load static %}

{% block title %}用户登录 - 茄子在线检测系统{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-8 fade-in-up">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden login-card">

                <div class="card-header text-center py-4 border-0" style="background: linear-gradient(135deg, #6f42c1, #20c997);">
                    <h3 class="fw-bold text-white mb-0">
                        <i class="bi bi-box-arrow-in-right me-2"></i>用户登录
                    </h3>
                    <p class="text-white-50 mb-0 small mt-2">欢迎回来，开启智慧检测</p>
                </div>

                <div class="card-body p-5 bg-white">
                    {% if messages %}
                        {% for message in messages %}
                        <div class="alert alert-danger alert-dismissible fade show shadow-sm mb-4" role="alert">
                            <i class="bi bi-exclamation-circle-fill me-2"></i>{{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        {% endfor %}
                    {% endif %}

                    <div id="error-msg" class="alert alert-warning text-center shadow-sm mb-4" style="display: none;">
                        <i class="bi bi-exclamation-triangle me-1"></i> {{ error_msg }}
                    </div>

                    <form id="loginForm" method="post" class="needs-validation">
                        {% csrf_token %}

                        <div class="mb-4">
                            <label for="username" class="form-label fw-bold text-secondary small">用户名</label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-0 text-primary">
                                    <i class="bi bi-person"></i>
                                </span>
                                <input type="text" id="username" name="username" required
                                       class="form-control border-0 bg-light"
                                       placeholder="请输入用户名" autocomplete="off" style="padding: 12px;">
                            </div>
                        </div>

                        <div class="mb-5">
                            <label for="password" class="form-label fw-bold text-secondary small">密码</label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-0 text-danger">
                                    <i class="bi bi-lock"></i>
                                </span>
                                <input type="password" id="password" name="password" required
                                       class="form-control border-0 bg-light"
                                       placeholder="请输入密码" autocomplete="off" style="padding: 12px;">
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg rounded-pill shadow-hover"
                                    style="background-color: #6f42c1; border: none;">
                                立即登录
                            </button>
                        </div>
                    </form>
                </div>

                <div class="card-footer bg-light text-center py-4 border-0">
                    <p class="mb-0 text-muted">
                        还没有账号？
                        <a href="{% url 'register' %}" class="fw-bold text-decoration-none" style="color: #6f42c1;">
                            立即注册 <i class="bi bi-arrow-right-short"></i>
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 进场动画 */
    .fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    @keyframes fadeInUp {
        to { opacity: 1; transform: translateY(0); }
    }

    /* 输入框聚焦效果 */
    .form-control:focus {
        box-shadow: none;
        background-color: #fff !important;
    }

    /* 按钮悬浮效果 */
    .shadow-hover {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .shadow-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(111, 66, 193, 0.3) !important;
    }

    /* 输入框图标背景 */
    .input-group-text {
        width: 50px;
        justify-content: center;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
    // 保留原有逻辑：获取错误信息提示框元素
    var errorMsg = document.getElementById('error-msg');

    // 检查是否存在错误信息并显示提示框
    // 注意：errorMsg.innerText 获取的是去除标签后的纯文本，如果后端传来的 {{ error_msg }} 有内容，这里就会执行
    if (errorMsg && errorMsg.innerText.trim() !== "") {
        errorMsg.style.display = 'block';
        // 设置3秒后隐藏提示框
        setTimeout(function() {
            // 添加淡出动画效果
            errorMsg.style.transition = "opacity 0.5s ease";
            errorMsg.style.opacity = "0";
            setTimeout(() => {
                errorMsg.style.display = 'none';
                errorMsg.style.opacity = "1"; // 重置透明度以便下次显示
            }, 500);
        }, 3000);
    }
</script>
{% endblock %}