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

 <div class="signup-main">
    <h1> Login </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>Password</label><br>
                {{form.password}}
        </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>

    <a href="../signup"> New user? click to sign up</a>
</div>
<script src="{% static '/js/personal.js' %}" async defer></script>
{% endblock %}