{% extends 'base_auth.html' %}
{% load i18n cashbook_extras %}

{% block content %}
<div class="auth">
  <form method="post" action="{% url 'register' %}" class="auth-card card">{% csrf_token %}
    <div class="auth-header">
      <span class="logo"></span>
      <h1 class="auth-title">{% trans "Create your Gombo account" %}</h1>
      <p class="auth-sub">{% trans "It’s fast and free" %}</p>
    </div>

    {% if form.errors %}<p class="alert alert-error">{% trans "Please fix the errors below" %}</p>{% endif %}
    <div>
      <label for="{{ form.username.id_for_label }}">{% trans "Username" %}</label>{{ form.username|add_class:'input' }}
      {% if form.username.errors %}<div class="help error">{{ form.username.errors|striptags }}</div>{% endif %}
    </div>
    <div>
      <label for="{{ form.password1.id_for_label }}">{% trans "Password" %}</label>{{ form.password1|add_class:'input' }}
      {% if form.password1.errors %}<div class="help error">{{ form.password1.errors|striptags }}</div>{% endif %}
    </div>
    <div>
      <label for="{{ form.password2.id_for_label }}">{% trans "Confirm Password" %}</label>{{ form.password2|add_class:'input' }}
      {% if form.password2.errors %}<div class="help error">{{ form.password2.errors|striptags }}</div>{% endif %}
    </div>
    <button type="submit" class="btn btn--primary" style="width:100%; margin-top:12px;">{% trans "Create account" %}</button>
    <div class="auth-footer">
      {% trans "Already have an account?" %} <a href="{% url 'login' %}">{% trans "Sign in" %}</a>
    </div>
  </form>
</div>
{% endblock %}