{% 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: 450px; width: 100%; border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); 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 mb-3">
                <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 {% if form.username.errors %}is-invalid{% endif %}"
                    id="{{ form.username.id_for_label }}"
                    placeholder="请输入用户名"
                    required>
                <div class="invalid-feedback">
                    {% for error in form.username.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
                <small class="form-text text-muted">用户名必须为 3 至 20 个字符，且只能包含字母、数字和下划线。</small>
            </div>

            <!-- 昵称字段 -->
            <div class="form-group mb-3">
                <label for="{{ form.nickname.id_for_label }}" class="form-label text-secondary">昵称</label>
                <input
                    type="text"
                    name="nickname"
                    value="{{ form.nickname.value|default_if_none:'' }}"
                    class="form-control form-control-lg {% if form.nickname.errors %}is-invalid{% endif %}"
                    id="{{ form.nickname.id_for_label }}"
                    placeholder="请输入昵称"
                    required>
                <div class="invalid-feedback">
                    {% for error in form.nickname.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
                <small class="form-text text-muted">昵称为 3 至 30 个字符。</small>
            </div>

            <!-- 密码字段 -->
            <div class="form-group mb-3">
                <label for="{{ form.password1.id_for_label }}" class="form-label text-secondary">密码</label>
                <input
                    type="password"
                    name="password1"
                    class="form-control form-control-lg {% if form.password1.errors %}is-invalid{% endif %}"
                    id="{{ form.password1.id_for_label }}"
                    placeholder="请输入密码"
                    required>
                <div class="invalid-feedback">
                    {% for error in form.password1.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
                <small class="form-text text-muted">密码必须至少包含 8 个字符，且包含大写字母、数字和特殊字符。</small>
            </div>

            <!-- 确认密码字段 -->
            <div class="form-group mb-4">
                <label for="{{ form.password2.id_for_label }}" class="form-label text-secondary">确认密码</label>
                <input
                    type="password"
                    name="password2"
                    class="form-control form-control-lg {% if form.password2.errors %}is-invalid{% endif %}"
                    id="{{ form.password2.id_for_label }}"
                    placeholder="请再次输入密码"
                    required>
                <div class="invalid-feedback">
                    {% for error in form.password2.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
                <small class="form-text text-muted"></small>
            </div>

            <!-- 提交按钮 -->
            <div class="form-group mb-4">
                <button type="submit" class="btn btn-primary btn-lg w-100 shadow-sm">注册</button>
            </div>
        </form>

        <!-- 登录链接 -->
        <div class="text-center">
            <p class="small">已有账户？ 
                <a href="{% url 'login' %}" class="text-decoration-none text-primary fw-bold">登录</a>
            </p>
        </div>
    </div>
</div>

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

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

    /* 按钮样式 */
    .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.2);
    }

    /* 输入框焦点样式 */
    .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;
    }

    /* 链接颜色 */
    a.text-primary {
        color: #007bff !important;
    }

    a.text-primary:hover {
        text-decoration: underline;
    }
</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 %}