{% extends "base.html" %}
{% block content %}
<div class="d-flex justify-content-center mt-5">
    <div class="card shadow-sm p-4" style="min-width: 400px; max-width: 500px; width: 100%;">
        <h3 class="text-center mb-4">Register</h3>
        <form method="POST" action="{{ url_for('auth.register') }}">
            {{ form.hidden_tag() }}
            <div class="form-group mb-3">
                {{ form.username.label(class="form-label") }}
                {{ form.username(class="form-control") }}
            </div>
            <div class="form-group mb-3">
                {{ form.email.label(class="form-label") }}
                {{ form.email(class="form-control") }}
            </div>
            <div class="form-group mb-3">
                {{ form.password.label(class="form-label") }}
                {{ form.password(class="form-control") }}
            </div>
            <div class="form-group mb-4">
                {{ form.confirm_password.label(class="form-label") }}
                {{ form.confirm_password(class="form-control") }}
            </div>
            <div class="d-grid">
                <button type="submit" class="btn btn-primary btn-block">Register</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}