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

{% load i18n %}

{% block page_title %}{% trans "Signup" %} | {{ block.super }}{% endblock %}

{% block main_content %}
  <div class="ui page stackable grid centered">
    <div class="ten wide column">
      <h1>{% trans "Sign Up" %}</h1>

      <div class="ui tall stacked segment">
        <div class="ui message info">
          <p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>
        </div>

        <form id="signup_form" method="post"
              class="ui form {% if form.errors %}error{% endif %}" action="{% url 'account_signup' %}">

          {% csrf_token %}

          <div class="field {% if form.errors.username %}error{% endif %}">
            {{ form.username.label_tag }}
            {{ form.username }}

            {% if form.errors.username %}
              <div class="ui pointing red basic label">
                {% for error in form.errors.username %}
                  <p>{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="field {% if form.errors.email %}error{% endif %}">
            {{ form.email.label_tag }}
            {{ form.email }}

            {% if form.errors.email %}
              <div class="ui pointing red basic label">
                {% for error in form.errors.email %}
                  <p>{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="field {% if form.errors.password1 %}error{% endif %}">
            {{ form.password1.label_tag }}
            {{ form.password1 }}

            {% if form.errors.password1 %}
              <div class="ui pointing red basic label">
                {% for error in form.errors.password1 %}
                  <p>{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="field {% if form.errors.password2 %}error{% endif %}">
            {{ form.password2.label_tag }}
            {{ form.password2 }}

            {% if form.errors.password2 %}
              <div class="ui pointing red basic label">
                {% for error in form.errors.password2 %}
                  <p>{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          {% if redirect_field_value %}
            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
          {% endif %}
          <button type="submit" class="ui button primary">{% trans "Sign Up" %}</button>
        </form>

      </div>
    </div>
  </div>
{% endblock %}
