{% extends 'base_accounts.html' %}
{% load form_tags widget_tweaks static %}
{% block title %}Sign up to AxioDL{% endblock %}

{% block content %}
    <div class="d-flex p-2 justify-content-center mb-4">
        <div class="card border-dark bg-dark">
            <div class="card-header bg-dark text-light align-text-center">
                <div class="card-title"><h2 class="card-title">Sign up</h2></div>
            </div>

            <form method="post">
                <div class="card-body bg-light border-dark">
                    <h3>*Denotes required fields</h3>
                    {% csrf_token %}
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger" role="alert">
                            {% for error in form.non_field_errors %}
                                <p{% if forloop.last %} class="mb-0"{% endif %}>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                    <!-- Profile username -->
                    *{{ form.user.username.label_tag }}
                    {% render_field form.user.username class=form.user.username|input_class %}
                    {% for error in form.user.username.errors %}
                        <div class="invalid-feedback">
                            {{ error }}
                        </div>
                    {% endfor %}
                    {% if form.user.username.help_text %}
                        <small class="form-text text-muted">
                            {{ form.user.username.help_text|safe }}
                        </small>
                    {% endif %}
                    <!-- Profile email -->
                    *{{ form.user.email.label_tag }}
                    {% render_field form.user.email class=form.user.email|input_class %}
                    {% for error in form.user.email.errors %}
                        <div class="invalid-feedback">
                            {{ error }}
                        </div>
                    {% endfor %}
                    {% if form.user.email.help_text %}
                        <small class="form-text text-muted">
                            {{ form.user.email.help_text|safe }}
                        </small>
                    {% endif %}
                    <!-- Profile password -->
                    *{{ form.user.password1.label_tag }}
                    {% render_field form.user.password1 class=form.user.password1|input_class %}
                    {% for error in form.user.password1.errors %}
                        <div class="invalid-feedback">
                            {{ error }}
                        </div>
                    {% endfor %}
                    {% if form.user.password1.help_text %}
                        <small class="form-text text-muted">
                            {{ form.user.password1.help_text|safe }}
                        </small>
                    {% endif %}
                    <!-- Profile password confirmation -->
                    *{{ form.user.password2.label_tag }}
                    {% render_field form.user.password2 class=form.user.password2|input_class %}
                    {% for error in form.user.password2.errors %}
                        <div class="invalid-feedback">
                            {{ error }}
                        </div>
                    {% endfor %}
                    {% if form.user.password2.help_text %}
                        <small class="form-text text-muted">
                            {{ form.user.password2.help_text|safe }}
                        </small>
                    {% endif %}
                    <!-- Profile avatar -->
                    {{ form.profile.avatar.label_tag }}
                    {% render_field form.profile.avatar %}
                    {% for error in form.profile.avatar.errors %}
                        <div class="invalid-feedback">
                            {{ error }}
                        </div>
                    {% endfor %}
                    {% if form.profile.avatar.help_text %}
                        <small class="form-text text-muted">
                            {{ form.profile.avatar.help_text|safe }}
                        </small>
                    {% endif %}

                    <!-- Profile use_gravatar -->
                    <div class="form-check">
                        {% render_field form.profile.use_gravatar class=form.profile.use_gravatar|input_class %}
                        {{ form.profile.use_gravatar.label_tag }}
                        {% for error in form.profile.use_gravatar.errors %}
                            <div class="invalid-feedback">
                                {{ error }}
                            </div>
                        {% endfor %}
                        {% if form.profile.use_gravatar.help_text %}
                            <small class="form-text text-muted">
                                {{ form.profile.use_gravatar.help_text|safe }}
                            </small>
                        {% endif %}
                        <script src='https://www.google.com/recaptcha/api.js'></script>
                    </div>
                    <div class="form-group g-recaptcha"
                         data-sitekey="{{ GOOGLE_RECAPTCHA_SITE_KEY }}"></div>
                    {% if messages %}
                        {% for message in messages %}
                            {{ message }}
                        {% endfor %}
                    {% endif %}
                    <button type="submit" class="btn btn-primary btn-block">Create an account</button>
                </div>
            </form>

            <div class="card-footer text-muted text-center">
                Already have an account? <a href="{% url 'login' %}">Log in</a>
            </div>
        </div>
    </div>
{% endblock %}