{% extends "layouts/base.html" %}

{% block title %}Register{% endblock %}

{% block content %}
<section class="form-container">
    <h2>Create an Account</h2>
    {% if error %}
        <p class="error">{{ error }}</p>
    {% endif %}
    <form action="/register" method="post">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required>
            {% if errors.username %}
                <p class="error">{{ errors.username }}</p>
            {% endif %}
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
            {% if errors.email %}
                <p class="error">{{ errors.email }}</p>
            {% endif %}
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
            {% if errors.password %}
                <p class="error">{{ errors.password }}</p>
            {% endif %}
        </div>
        <div class="form-group">
            <label for="confirm_password">Confirm Password</label>
            <input type="password" id="confirm_password" name="confirm_password" required>
        </div>
        <button type="submit" class="btn-primary">Register</button>
    </form>
</section>
{% endblock %}