{% extends 'bootstrap/base.html' %}

{% block title %}用户注册{% endblock %}

{% block styles %}
{{super()}}
<style>
    .container { max-width: 600px; margin-top: 30px; }
    .error-message { color: #dc3545; font-size: 0.875em; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="card shadow">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title mb-0">用户注册</h3>
        </div>
        <div class="card-body">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <form method="POST">
                {{ form.csrf_token }}
                
                <div class="form-group">
                    {{ form.name.label }}
                    {{ form.name(class="form-control") }}
                    {% if form.name.errors %}
                        {% for error in form.name.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="form-group">
                    {{ form.email.label }}
                    {{ form.email(class="form-control") }}
                    {% if form.email.errors %}
                        {% for error in form.email.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="form-group">
                    {{ form.password.label }}
                    {{ form.password(class="form-control") }}
                    {% if form.password.errors %}
                        {% for error in form.password.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="form-group">
                    {{ form.about_me.label }}
                    {{ form.about_me(class="form-control", rows=4) }}
                    {% if form.about_me.errors %}
                        {% for error in form.about_me.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="form-group">
                    {{ form.submit(class="btn btn-primary") }}
                    <a href="{{ url_for('user_list') }}" class="btn btn-secondary">查看用户列表</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}