{% extends "base.html" %}

{% block title %}SignUp{% endblock %}

{% block content %}
<div class="mycontainer" style="margin-top:4rem">
    <div class="authbox">
        <h3 class="title has-text-light">Sign Up</h3>
        <div class="box">
            {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                    {{ messages[0] }}
                </div>
            {% endif %}
            {% endwith %}
            <form method="POST" action="/signup">
                <div class="field">
                    <div class="control">
                        <input class="input" type="text" required name="username" placeholder="Name" autofocus="">
                    </div>
                </div>

                <div class="field">
                    <div class="control">
                        <input class="input" type="password" required name="password" placeholder="Password">
                    </div>
                </div>

                <button class="button is-block is-info is-fullwidth">Sign Up</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}