{% 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>Welcome to tapped.to</h1>
                {% if siteid %}
                <p>Sign up for free and claim this tapped.to NFC chip. ({{ siteid|slice:":5" }})</p>
                {% else %}
                <p>Sign up for free and get your own tapped.to page.</p>

                {% endif %}
            </div>
        </div>



        {% if messages %}
            {% for message in messages %}
            <div class="row flex-center">
                <div class="col-6">
                    <div class="alert-danger">
                        {{ message }}
                    </div>
                </div>
            </div>
            {% endfor %}
        {% endif %}

        <form method="POST" action="/register/">
            {% csrf_token %}
            <div class="row flex-center">
                <div class="col-6">
                    <input type="text" name="fullname" maxlength="150" autofocus="" placeholder="Fullname">
                </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>
        </form>
        
    </div>
</section>

{% endblock content %}