{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans 'Create a new ivatar account' %}{% endblock title %}

{% block content %}

<h1>{% trans 'Create a new account' %}</h1>

{% if form.username.errors %}
<div class="alert alert-danger" role="alert">{{ form.username.errors }}</div>
{% endif %}
{% if form.password1.errors %}
<div class="alert alert-danger" role="alert">{{ form.password1.errors }}</div>
{% endif %}
{% if form.password2.errors %}
<div class="alert alert-danger" role="alert">{{ form.password2.errors }}</div>
{% endif %}
<div class="form-container">
<form action="{% url 'new_account' %}" method="post" name="newaccount">
{% csrf_token %}
<div class="form-group">
<label for="id_username" class="form-label">{% trans 'Username' %}</label>
<input type="text" name="username" autofocus required class="form-control" id="id_username" placeholder="{% trans 'Choose a username' %}">
</div>
<div class="form-group">
<label for="id_password1" class="form-label">{% trans 'Password' %}</label>
<input type="password" name="password1" class="form-control" required id="id_password1" placeholder="{% trans 'Enter a secure password' %}">
</div>
<div class="form-group">
<label for="id_password2" class="form-label">{% trans 'Password confirmation' %}</label>
<input type="password" name="password2" class="form-control" required id="id_password2" placeholder="{% trans 'Confirm your password' %}">
</div>
<div class="button-group">
  <button type="submit" class="btn btn-primary">{% trans 'Create account' %}</button>
  <a href="/accounts/login/" class="btn btn-secondary">{% trans 'Login' %}</a>
</div>
</form>
</div>
<div style="height:40px"></div>
{% endblock content %}