{% extends "base_template.html" %}

{% load static %}

{% block extra-head %}

<link rel="stylesheet" href="{% static 'css/login.css' %}"/>

{% endblock %}

{% block content %}

<div class="h0 kanit-semibold">Login</div>

{% if form.errors %}
<p class="h2 kanit-light-italic error">Your username and password didn't match. Please try again.</p>
{% endif %}

{% if next %}
    {% if user.is_authenticated %}
    <p class="h2 kanit-semibold">Your account doesn't have access to this page. To proceed,
    please login with an account that has access.</p>
    {% else %}
    <p class="h2 kanit-semibold">Please login to see this page.</p>
    {% endif %}
{% endif %}

<form class="login-form"
      id="login-form"
      method="post"
      action="{% url 'login' %}"
>
{% csrf_token %}
<div>
    <div class="h2 kanit-regular">{{ form.username.label_tag }}</div>
    <div class="h2 kanit-regular">{{ form.username }}</div>
</div>
<div>
    <div class="h2 kanit-regular">{{ form.password.label_tag }}</div>
    <div class="h2 kanit-regular">{{ form.password }}</div>
</div>
<div class="login-button h1 kanit-regular"
     onclick="document.forms['login-form'].submit();"
>
    Login
</div>
<input type="submit" value="login" hidden="hidden">
<input type="hidden" name="next" value="{{ next }}">
</form>

{% endblock %}