{% extends "account/base.html" %}

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

{% block head_title %}{% trans "Sign Up" %}{% endblock %}

{% block content %}
      <h3 class="font-weight-400 mb-4">{% trans "Sign Up" %}</h3>
      <form id="signup_form" method="post" action="{% url 'account_signup' %}">
        {% csrf_token %}
        {% if form.non_field_errors %}
          <div class="p-2 my-4">
            {{ form.non_field_errors }}
          </div>
        {% endif %}
        <div class="form-group">
          <label for="username">{% trans "Username" %}</label>
          <input type="text" class="form-control" name="username" id="username" {% if form.username.value != None %}value="{{ form.username.value }}"{% endif %} required placeholder="{% trans 'Enter Username' %}">
          {{ form.username.errors }}
        </div>
        <div class="form-row">
          <div class="col-lg-6">
            <div class="form-group">
              <label for="first_name">{% trans "First Name" %}</label>
              <input id="first_name" name="first_name" type="text" class="form-control" {% if form.first_name.value != None %}value="{{ form.first_name.value }}"{% endif %}placeholder="{% trans 'First Name' %}">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-group">
              <label for="first_name">{% trans "Last Name" %}</label>
              <input id="last_name" name="last_name" type="text" class="form-control" {% if form.last_name.value != None %}value="{{ form.last_name.value }}"{% endif %}placeholder="{% trans 'Last Name' %}">
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="email">{% trans "E-mail" %}</label>
          <input type="text" class="form-control" name="email" id="email" {% if form.email.value != None %}value="{{ form.email.value }}"{% endif %} placeholder="{% trans 'Enter Email Address' %}">
          {{ form.email.errors }}
        </div>
        <div class="form-group">
          <label for="password1">{% trans "Password" %}</label>
          <input type="password" class="form-control" name="password1" id="password1" {% if form.password1.value != None %}value="{{ form.password1.value }}"{% endif %} required placeholder="{% trans 'Enter Password' %}">
          {{ form.password1.errors }}
        </div>
        <div class="form-group">
          <label for="password2">{% trans "Password" %}</label>
          <input type="password" class="form-control" name="password2" id="password2" {% if form.password2.value != None %}value="{{ form.password2.value }}"{% endif %} required placeholder="{% trans 'Password (again)' %}">
          {{ form.password2.errors }}
          {% if redirect_field_value %}
            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
          {% endif %}
        </div>
        <button class="btn btn-primary btn-block my-4" type="submit">{% trans "Sign Up" %}</button>
      </form>
      <p class="text-3 text-center text-muted">{% trans "Already have an account?" %}<a class="btn-link px-2" href="{{ login_url }}">{% trans "Login" %}</a></p>
{% endblock %}