{% extends "account/base.html" %}
{% load static %}
{% load i18n %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
<section class="main-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4 col-md-offset-4">
        <h1 class="form-title text-center">{% trans 'Sign Up Here' %}</h1>
        <div class="account-wall">  
          <form class="signup" id="form" method="post" action="{% url 'account_signup' %}">
              {% csrf_token %}
              <div class="form-registration">
                <p class="required field-title">
                {% if form.username.errors %}
                  {% for error in form.username.errors %}
                    <div style="font-size: 12px;" class="alert alert-danger alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      {{ error|escape }}</div>
                  {% endfor %}
                {% endif %}
                  <label class="required" for="id_username">{% trans 'Username:' %}</label>
                  <input class="form-control" type="text" name="username" placeholder="Username" autofocus="autofocus" minlength="1" maxlength="150" required id="id_username" />
                  <span class="helptext">{% trans 'Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only.' %}</span>
                </p>
                <p>
                {% if form.email.errors %}
                  {% for error in form.email.errors %}
                    <div style="font-size: 12px;" class="alert alert-danger alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      {{ error|escape }}</div>
                  {% endfor %}
                {% endif %}
                  <label class="required" for="id_email">{% trans 'E-mail:' %}</label>
                  <input class="form-control" type="email" name="email" placeholder="E-mail address" id="id_email" />
                </p>
                <p>
                {% if form.password.errors %}
                  {% for error in form.password.errors %}
                    <div class="alert alert-danger" role="alert">{{ error|escape }}</div>
                  {% endfor %}
                {% endif %}
                  <label class="required" for="id_password1">{% trans 'Password:' %}</label>
                  <input class="form-control" type="password" name="password1" placeholder="Password" required id="id_password1" />
                </p>
                <div class="pwstrength_viewport_progress"></div>
                <p>
                {% if form.password.errors %}
                  {% for error in form.password.errors %}
                    <div class="alert alert-danger" role="alert">{{ error|escape }}</div>
                  {% endfor %}
                {% endif %}
                  <label class="required" for="id_password2">{% trans 'Password (again):' %}</label>
                  <input class="form-control" type="password" name="password2" placeholder="Password (again)" required id="id_password2" />
                  <span class="helptext">{% trans 'Enter the same password as before, for verification.' %}</span>
                </p>
                <button class="btn btn-lg btn-primary btn-block" type="submit">{% trans "Sign Up" %}</button>
              </div>
          </form>
        </div>
        <br>
        <p class="text-center">{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>    
      </div>
    </div>
  </div>
</section>
{% endblock %}
{% block javascript %}
  <script src="{% static "main/js/pwstrength.js" %}"></script>
  <script src="{% static "main/js/zxcvbn.js" %}"></script>
{% endblock %}