{%extends 'base.html' %} 
{% load static %}
{%block content%}
<link rel="stylesheet" type="text/css" href="{% static '/css/signup.css' %}">

 <div class="signup-main">
    <h1> Sign up</h1>
    <form method="post" action=".">
        {% csrf_token %} 
        <!-- A CSRF token is a secure random token (e.g., synchronizer token or challenge token) that is used to prevent CSRF attacks -->
        <div class="input-box">
            <label>Username</label><br>
                {{form.username}}
        </div>
        <div class="input-box">
            <label>Email</label><br>
                {{form.email}}
        </div>
        <div class="input-box">
            <label>Password</label><br>
                {{form.password1}}
        </div>
        <div class="input-box">
            <label>Repeat Password</label><br>
                {{form.password2}}
        </div>

        {% if form.errors or form.non_field_errors %}
            <div class="input-box">
                {%for field in form%}
                    {{field.errors}}
                {%endfor%}

                {{form.non_field_errors}}

            </div>
        {%endif%}

        <button>Submit</button>
    </form>

</div>
<script src="{% static '/js/personal.js' %}" async defer></script>
{% endblock %}