{% extends 'layouts/registration-2.html' %}

{% load i18n %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
    <h1>{% trans "Sign Up" %}</h1>

    <p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}
    </p>

    <form class="signup needs-validation" id="signup_form" method="post" action="{% url 'account_signup' %}" novalidate>
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                <input class="form-control" type="{{ field.field.widget.input_type }}" id="{{ field.id_for_label }}"
                       name="{{ field.name }}" placeholder="{{ field.label }}" required>
            </div>
        {% endfor %}

        {% if form.errors %}
            {% for field in form %}
                {% for error in field.errors %}
                    <div class="alert alert-danger">
                        <strong>{{ error|escape }}</strong>
                    </div>
                {% endfor %}
            {% endfor %}
            {% for error in form.non_field_errors %}
                <div class="alert alert-danger">
                    <strong>{{ error|escape }}</strong>
                </div>
            {% endfor %}
        {% endif %}


        {% if redirect_field_value %}
            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
        {% endif %}

        <div class="form-group">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="checkbox-signup" checked>
                <label class="custom-control-label" for="checkbox-signup">
                    I accept <a href="javascript: void(0);" class="text-muted">Terms and Conditions</a>
                </label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary btn-block"><i
                class="mdi mdi-account-circle"></i> {% trans "Sign Up" %} &raquo;
        </button>
    </form>

{% endblock %}