{% extends "base.html" %}

{% load static %}
{% load bootstrap4 %}

{% block title %}Registration{% endblock title %}

{% block main_content %}
<div class="container-fluid">
    <div id="registration-form-container" class="row flex-md-row justify-content-center">
        <div class="col-md-6 p-3">
            <h2 class="mb-3 text-center">Registration</h2>
            <p>
                Register for an account to track your work, add tags and review transcriptions. To sign up, please provide a username, email address and a strong password.
                Once you click register, we will send you an email to confirm your address.
            </p>
            <p>
                Learn more about why we ask you to register in the <a href="{% url 'help-center' %}">FAQ</a>
            </p>
            <hr />
            <form method="post" id="registration-form" class="form-register">
                {% csrf_token %}

                {% bootstrap_form form %}

                {% buttons %}
                    <button type="submit" class="btn btn-primary justify-content-center ">
                        Register
                    </button>
                {% endbuttons %}
                <div class="d-flex col mx-auto">
                    <a href="{% url 'login' %}" class="text-center blue-text">I already have an account</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock main_content %}

{% block body_scripts %}
    {{ block.super }}
    <script src="{% static 'js/password-validation.js' %}"></script>
{% endblock body_scripts %}