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

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

{% block title %}
    Get started
{% 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>Just one more step</h1>
                </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 %}

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

            <form method="POST">
                {% csrf_token %}
                <div class="row flex-center">
                    <div class="row flex-center">
                        <div class="col-6 phones">
                            {{ form_countrys.phoneprefix }}
                            {{ form_phone.phonenumber | placeholder:'Phone' }}

                        </div>
                    </div>


                    <div class="row flex-center">
                        <div class="col-6">
                            <button class="button" type="submit">Register</button>
                            <a href="/logout" class="cancel-registration">Cancel registration</a>
                        </div>
                    </div>

                </div>
            </form>

        </div>
        </div>
    </section>
{% endblock content %}