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

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

{% block title %}
Register
{% endblock title %}

{% block description %}
Sign up for free and get your own tapped.to NFC chip page.
{% 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>Just one more thing...</h1>
                {% if siteid %}
                <p>Sign up for free and claim this tapped.to NFC chip. ({{ siteid|slice:":5" }})</p>
                {% else %}
                <p>Choose your Username and E-Mail</p>

                {% endif %}
            </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" action="/register_personalinfo/">
            {% csrf_token %}
                            
            <div class="row flex-center">
                <div class="col-6">
                
                    {{ form.username | placeholder:'Username' }}
                </div>
            </div>
            
            <div class="row flex-center">
                <div class="col-6">
                    {{ form.email | placeholder:'Email' }}
                </div>
            </div>
            
            <div class="row flex-center">
                <div class="col-6">
                    <button type="submit" class="button">Sign up for free</button>
                </div>
            </div>
            
            <div class="row flex-center">
                <div class="col-6 text-center">
                    <a href="{% url 'login' %}" class="button ghost">I already have an account</a>
                </div>
            </div>
            
        </form>
        
    </div>
</section>

{% endblock content %}