{% extends "index.html" %}

{% block style %}
    {{ super() }}
    <link rel="stylesheet" href='{% static "css/register-form.css" %}'>
{% endblock %}

{% block content %}
    <div class="content">
        <h1>{{ title }}</h1>
        <div class="form-container">
            {% block message %}
                {% messages %}
            {% endblock %}

            <form id="username-form" method="post">
                {% csrf %}
                {% if register_form.errors %}
                    <div class="field-error">
                        {% for field_name, error_message in register_form.errors %}
                            <p><strong>{{ field_name }}:</strong> {{ error_message }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
                <div class="fields-container">
                    {% form.register_form.username %}
                    {% form.register_form.email %}
                    {% form.register_form.password %}
                    {% form.register_form.age %}
                </div>
                <button type="submit">Register</button>
            </form>
        </div>
    </div>
{% endblock %}

{% block footer %}
    <a href="{% link 'index' %}">Home</a>
    <p>&copy; 2026 My Web Application</p>
{% endblock %}