{% extends "base.html" %}

{% block title %}Sign Up{% endblock %}

{% block content %}
<div class="wrapper" style="max-width:360px; padding:20px; margin:auto;">
    <h2>Sign Up</h2>
    <p>Please fill this form to create an account.</p>

    <form method="post" action="{{ url_for('register.register') }}">
        <div class="form-group">
            <label>Username</label>
            <input type="text" name="username"
                   class="form-control {% if username_err %}is-invalid{% endif %}"
                   value="{{ username }}">
            {% if username_err %}
                <div class="invalid-feedback">{{ username_err }}</div>
            {% endif %}
        </div>

        <div class="form-group">
            <label>Password</label>
            <input type="password" name="password"
                   class="form-control {% if password_err %}is-invalid{% endif %}"
                   value="{{ password }}">
            {% if password_err %}
                <div class="invalid-feedback">{{ password_err }}</div>
            {% endif %}
        </div>

        <div class="form-group">
            <label>Confirm Password</label>
            <input type="password" name="confirm_password"
                   class="form-control {% if confirm_password_err %}is-invalid{% endif %}"
                   value="{{ confirm_password }}">
            {% if confirm_password_err %}
                <div class="invalid-feedback">{{ confirm_password_err }}</div>
            {% endif %}
        </div>

        <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Submit">
            <input type="reset" class="btn btn-secondary ml-2" value="Reset">
        </div>

        <p>Already have an account? <a href="{{ url_for('login.login') }}">Login here</a>.</p>
    </form>
</div>
{% endblock %}