{% extends "base.html" %}

{% block title %}Register - {{project_name}}{% endblock %}

{% block content %}
<div class="card" style="max-width: 500px; margin: 2rem auto;">
    <div class="card-header">Create Account</div>

    <form method="POST" action="{{ url_for('auth.register') }}">
        {{ form.hidden_tag() }}

        <div class="form-group">
            {{ form.username.label(class="form-label") }}
            {{ form.username(class="form-control", placeholder="Choose a username") }}
            {% if form.username.errors %}
                {% for error in form.username.errors %}
                    <div class="invalid-feedback" style="display: block;">{{ error }}</div>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            {{ form.email.label(class="form-label") }}
            {{ form.email(class="form-control", type="email", placeholder="Enter your email") }}
            {% if form.email.errors %}
                {% for error in form.email.errors %}
                    <div class="invalid-feedback" style="display: block;">{{ error }}</div>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            {{ form.full_name.label(class="form-label") }}
            {{ form.full_name(class="form-control", placeholder="Enter your full name (optional)") }}
            {% if form.full_name.errors %}
                {% for error in form.full_name.errors %}
                    <div class="invalid-feedback" style="display: block;">{{ error }}</div>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            {{ form.password.label(class="form-label") }}
            {{ form.password(class="form-control", placeholder="Choose a strong password") }}
            {% if form.password.errors %}
                {% for error in form.password.errors %}
                    <div class="invalid-feedback" style="display: block;">{{ error }}</div>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            {{ form.confirm_password.label(class="form-label") }}
            {{ form.confirm_password(class="form-control", placeholder="Confirm your password") }}
            {% if form.confirm_password.errors %}
                {% for error in form.confirm_password.errors %}
                    <div class="invalid-feedback" style="display: block;">{{ error }}</div>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            {{ form.submit(class="btn btn-success btn-block") }}
        </div>
    </form>

    <div style="text-align: center; margin-top: 1rem;">
        <p>Already have an account? <a href="{{ url_for('auth.login') }}">Login here</a></p>
    </div>
</div>
{% endblock %}