{% 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;
        margin-top: 0.25rem;
    }
</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="mb-3">
                    {{ form.name.label(class="form-label") }}
                    {{ form.name(class="form-control" + (" is-invalid" if form.name.errors else "")) }}
                    {% if form.name.errors %}
                        {% for error in form.name.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="mb-3">
                    {{ form.email.label(class="form-label") }}
                    {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else "")) }}
                    {% if form.email.errors %}
                        {% for error in form.email.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="mb-3">
                    {{ form.password.label(class="form-label") }}
                    {{ form.password(class="form-control" + (" is-invalid" if form.password.errors else "")) }}
                    {% if form.password.errors %}
                        {% for error in form.password.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="mb-3">
                    {{ form.confirm_password.label(class="form-label") }}
                    {{ form.confirm_password(class="form-control" + (" is-invalid" if form.confirm_password.errors else "")) }}
                    {% if form.confirm_password.errors %}
                        {% for error in form.confirm_password.errors %}
                            <div class="error-message">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="mb-3">
                    {{ form.about_me.label(class="form-label") }}
                    {{ form.about_me(class="form-control" + (" is-invalid" if form.about_me.errors else ""), 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="d-grid">
                    {{ form.submit(class="btn btn-primary btn-lg") }}
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}