{% extends "base.html" %}

{% load account_tags %}
{% load i18n %}

{% block title %}{% trans "Sign up" %}{% endblock %}

{% block content %}
<div class="uk-flex uk-flex-center uk-margin-top">

  <div class="uk-card uk-card-default uk-card-body">
      <legend class="uk-legend">{% trans "Sign up" %}</legend>

      <form class="uk-form" id="signup_form" method="post" action="{% url "account_signup" %}" autocapitalize="off" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
      {% csrf_token %}

      <div class="uk-margin">
        <label class="uk-form-label" for="id_username">Username</label>
        <input class="uk-input uk-form-small" type="text" name="username" id="id_username" maxlength="30" required>
      </div>

      <div class="uk-margin">
        <label class="uk-form-label" for="id_email">Email</label>
        <input class="uk-input uk-form-small" type="text" name="email" id="id_email" required>
      </div>

      <div class="uk-margin">
        <label class="uk-form-label" for="id_password">Password</label>
        <input class="uk-input uk-form-small" type="password" name="password" id="id_password" required>
      </div>

      <div class="uk-margin">
        <label class="uk-form-label" for="id_password_confirm">Password (again)</label>
        <input class="uk-input uk-form-small" type="password" name="password_confirm" id="id_password_confirm" required>
        <input type="hidden" name="code" id="id_code">
      </div>

      {% if redirect_field_value %}
      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
      {% endif %}
      <button type="submit" class="uk-button uk-button-primary">{% trans "Sign up" %}</button>
    </form>
    <p class="login-signup">
      <small>
        {% trans "Already have an account?" %}  <strong><a href="{% urlnext 'account_login' %}">{% trans "Log in" %}</a></strong>
      </small>
    </p>
  </div>
</div>
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function() {
            $('#id_username').focus();
        });
    </script>
{% endblock %}