{% extends "layout.html" %}

{% load i18n %}
{% load account socialaccount %}

{% block title %}Sign up for a new account |{% endblock %}

{% block head_scripts %}
    {% include 'account/style.html' %}
{% endblock %}

{% block content %}
      <div class="container">
    <div class="row">
      <div class="col-sm-10 col-md-9 col-lg-7 mx-auto">
        <div class="card card-signin my-2">
          <div class="card-body">
            <h5 class="card-title text-center">Sign Up</h5>
            <form class="form-signin login" method="POST" action="{% url 'account_signup' %}">
            {% csrf_token %}
                {% get_providers as socialaccount_providers %}
              {% if socialaccount_providers %}
                {% include "account/social_list.html" with process="login" %}
              {% endif %}
                <hr>
                <p>
                  <label for="id_email">Email:</label>
                  {{ form.email.errors }}
                  {{ form.email }}
                </p>
                <p>
                  <label for="id_username">Username:</label>
                  {{ form.username.errors }}
                  {{ form.username }}
                </p>
                <p>
                  <label for="id_password1">Password:</label>
                  {{ form.password1.errors }}
                  {{ form.password1 }}
                </p>
                <p>
                  <label for="id_password2">Confirm Password:</label>
                  {{ form.password2.errors }}
                  {{ form.password2 }}
                </p>
                <p>
                  {{ form.captcha.errors }}
                  {{ form.captcha }}
                </p>

                {% if redirect_field_value %}
                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
                {% endif %}
              <button class="btn btn-lg btn-primary fw text-uppercase" type="submit">Sign Up</button>
                <a href="{{ login_url }}" class="btn btn-lg btn-light fw text-uppercase">Already have an account? Login</a>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}