{% 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-6 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-person-plus-fill 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" 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 %}

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

                        <div class="mb-4 form-group-custom">
                            <label 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>
                                <div class="django-input-wrapper flex-grow-1">
                                    {{ form.username }}
                                </div>
                            </div>
                            {% if form.username.errors %}
                                <div class="text-danger small mt-1 ms-1">{{ form.username.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-4 form-group-custom">
                            <label 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-success"><i class="bi bi-emoji-smile"></i></span>
                                <div class="django-input-wrapper flex-grow-1">
                                    {{ form.nickname }}
                                </div>
                            </div>
                            {% if form.nickname.errors %}
                                <div class="text-danger small mt-1 ms-1">{{ form.nickname.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-4 form-group-custom">
                            <label 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>
                                <div class="django-input-wrapper flex-grow-1">
                                    {{ form.password1 }}
                                </div>
                            </div>
                            {% if form.password1.errors %}
                                <div class="text-danger small mt-1 ms-1">{{ form.password1.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-4 form-group-custom">
                            <label 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-fill"></i></span>
                                <div class="django-input-wrapper flex-grow-1">
                                    {{ form.password2 }}
                                </div>
                            </div>
                            {% if form.password2.errors %}
                                <div class="text-danger small mt-1 ms-1">{{ form.password2.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-4 form-group-custom">
                            <label 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-info"><i class="bi bi-envelope"></i></span>
                                <div class="django-input-wrapper flex-grow-1">
                                    {{ form.email }}
                                </div>
                            </div>
                            {% if form.email.errors %}
                                <div class="text-danger small mt-1 ms-1">{{ form.email.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-4 form-group-custom">
                            <label 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-warning"><i class="bi bi-telephone"></i></span>
                                <div class="django-input-wrapper flex-grow-1">
                                    {{ form.phone_number }}
                                </div>
                            </div>
                            {% if form.phone_number.errors %}
                                <div class="text-danger small mt-1 ms-1">{{ form.phone_number.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="d-grid gap-2 mt-5">
                            <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 'login' %}" 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); }
    }

    /* 按钮悬浮效果 */
    .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;
    }

    /* === 核心 CSS：强制美化 Django 生成的原生 Input === */
    /* 由于 Django form 渲染的 input 可能没有 class，我们用 CSS 选择器强制给它加样式 */
    .django-input-wrapper input,
    .django-input-wrapper select,
    .django-input-wrapper textarea {
        display: block;
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da; /* 默认边框，会被 input-group 覆盖 */
        border-left: none; /* 去掉左边框，与图标融合 */
        outline: none;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    /* 输入框聚焦时的样式 */
    .django-input-wrapper input:focus {
        border-color: #86b7fe;
        box-shadow: none; /* 或者是Bootstrap的聚焦光圈 */
        background-color: #fcfcfc;
    }

    /* 修复 input-group 圆角问题 */
    .django-input-wrapper input {
        border-top-right-radius: 0.375rem !important;
        border-bottom-right-radius: 0.375rem !important;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* 图标背景微调 */
    .input-group-text {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-right: none;
    }
</style>
{% endblock %}