{% extends "base.html" %}
{% block title %}Register{% endblock %}
{% block content %}
<article style="max-width: 400px; margin: 4rem auto;">
    <h1>Register</h1>
    {% if error %}
    <p style="color: var(--red)">{{ error }}</p>
    {% endif %}
    <form method="post" action="/register">
        <label>
            Username
            <input type="text" name="username" required autocomplete="username">
        </label>
        <label>
            Display Name
            <input type="text" name="display_name" autocomplete="name">
        </label>
        <label>
            Password
            <input type="password" name="password" required autocomplete="new-password">
        </label>
        <button type="submit">Register</button>
    </form>
    <p>Already have an account? <a href="/login">Login</a></p>
</article>
{% endblock %}