{% extends "accounts/_base.html" %}

{% load static %}
{% load placeholder %}

{% block title %}
Login
{% endblock title %}


{% block description %}
Get your NFC chip page for free on tapped.to
{% endblock description %}

{% block header_branding %}{% endblock header_branding %}

{% block content %}
<section class="accounts">
    <div class="container">
        <div class="row flex-center">
            <div class="branding col-6 text-center">
                <img src="{% static "img/tapped.svg" %}" />
            </div>
        </div>
            
        <div class="row flex-center">
            <div class="col-6 text-center">
                <h1>Log in</h1>
            </div>
        </div>
        
        {% if messages %}
            {% for message in messages %}
            <div class="row flex-center">
                <div class="col-6">
                    <p>{{ message }}</p>
                </div>
            </div>
            {% endfor %}
        {% endif %}

        {% for key, value in form.errors.items %}
            <div class="row flex-center">
                <div class="col-6">
                    <p>{{ value }}</p>
                </div>
            </div>
        {% endfor %}

        <form method="POST">
            {% csrf_token %}
                            
            <div class="row flex-center"> 
                <div class="col-6">
                    {{ form.username | placeholder:'Email or username' }}
                </div>
            </div>
            
            <div class="row flex-center"> 
                <div class="col-6">
                    {{ form.password | placeholder:'Password' }}
                </div>
            </div>
            
            <div class="row flex-center"> 
                <div class="col-6">
                    <button type"submit" class="button">Log in</button>
                </div>
            </div>
            
            <div class="row flex-center"> 
                <div class="col-6 text-center">
                    <a href="{% url 'register' %}" class="button ghost">Sign up for free</a>
                </div>
            </div>
        </form>
            
    </div>
</div>
{% endblock content %}