{% extends "index.html" %}
{% block content %}
<div class= "main_form">
    <h1>Sign-Up Form</h1>
    {%  if form %}
    {{ form }}
    {% endif %}

    <form action="/" method="POST"> <!-- Set this to post to itself. -->
        <label for="username">Username:</label>

            <p class='error'>{{ error.username_length_error or ''}}</p> <!-- Using or '' we don't need to check for error with if/else, making more readable code -->

        <input id="username" type="text" name="username" value="{{ request.form.username or '' }}"/><br>
        <label for="password">Password:</label>

            <p class="error">{{ error.password_length_error }}</p>

        <input type= "password" name= "password" value="{{ request.form.password or '' }}"/><br>

        <label for= "password">Verify Password:</label>

            <p class='error'>{{ error.password_match_error or ''}}</p>

        <input type="password" name= "verify_password" value="{{ request.form.verify_password or '' }}"/><br>
        <label for= "email" >E-Mail:</label>
            <p class='error'>{{ error.email_error or '' }}</p>
        <input type="text" name="email" value="{{ request.form.email or '' }}"/><br>
        <input id="sub_button" type="submit"/>
    </form>



    {% endblock %}