{% extends 'base.html' %}

{% block title %}登录 - 葡萄成熟度在线检测系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-center align-items-center min-vh-100">
    <div class="card shadow-lg border-0 p-5" style="max-width: 400px; width: 100%; border-radius: 15px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
        <header class="text-center mb-4">
            <h1 class="h4 text-dark">用户登录</h1>
        </header>

        <form method="post" class="needs-validation" novalidate>
            {% csrf_token %}
            
            <div class="form-group">
                <label for="{{ form.username.id_for_label }}" class="form-label text-secondary">用户名</label>
                <input
                    type="text"
                    name="username"
                    value="{{ form.username.value|default_if_none:'' }}"
                    class="form-control form-control-lg"
                    id="{{ form.username.id_for_label }}"
                    placeholder="请输入用户名"
                    required>
                <div class="invalid-feedback">请输入有效的用户名。</div>
            </div>
            
            <div class="form-group mt-3">
                <label for="{{ form.password.id_for_label }}" class="form-label text-secondary">密码</label>
                <input
                    type="password"
                    name="password"
                    class="form-control form-control-lg"
                    id="{{ form.password.id_for_label }}"
                    placeholder="请输入密码"
                    required>
                <div class="invalid-feedback">请输入有效的密码。</div>
            </div>

            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary btn-lg w-100 shadow-sm">登录</button>
            </div>
        </form>

        <div class="text-center mt-4">
            <p class="small">还没有账户？ 
                <a href="{% url 'register' %}" class="text-decoration-none text-primary fw-bold">注册</a>
            </p>
        </div>
    </div>
</div>

<style>
    /* 背景设置 */
    body {
        margin: 0;
        background: url('/images/grape.jpg') no-repeat center center fixed; /* 替换为实际图片路径 */
        background-size: cover;
        font-family: 'Roboto', sans-serif;
    }

    /* 卡片样式 */
    .card {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
    }

    /* 按钮样式 */
    .btn-primary {
        background-color: #5cb85c;
        border: none;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .btn-primary:hover {
        background-color: #4cae4c;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    /* 输入框焦点样式 */
    .form-control:focus {
        border-color: #5cb85c;
        box-shadow: 0 0 6px rgba(92, 184, 92, 0.5);
    }

    /* 文字颜色调整 */
    .form-label {
        font-size: 0.9rem;
    }

    /* 提示信息样式 */
    .invalid-feedback {
        font-size: 0.85rem;
        color: #dc3545;
    }
</style>

<script>
    // 表单验证功能
    (function () {
        'use strict';
        window.addEventListener('load', function () {
            const forms = document.getElementsByClassName('needs-validation');
            Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>
{% endblock %}