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

{% block head_title %}{% trans "Sign Up" %}{% endblock %}

{% block content %}
<div class="container mx-auto max-w-md mt-6">
  <h1 class="text-3xl font-bold text-center mb-6">{% trans "Sign Up" %}</h1>
  <form method="post" action="{% url 'account_signup' %}" class="space-y-4">
    {% csrf_token %}
    {{ form.non_field_errors }}
    <div>
      <label for="{{ form.username.id_for_label }}" class="block font-medium">{{ form.username.label }}</label>
      {{ form.username }}
      {{ form.username.errors }}
    </div>
    <div>
      <label for="{{ form.email.id_for_label }}" class="block font-medium">{{ form.email.label }}</label>
      {{ form.email }}
      {{ form.email.errors }}
    </div>
    <div>
      <label for="{{ form.password1.id_for_label }}" class="block font-medium">{{ form.password1.label }}</label>
      {{ form.password1 }}
      {{ form.password1.errors }}
    </div>
    <div>
      <label for="{{ form.password2.id_for_label }}" class="block font-medium">{{ form.password2.label }}</label>
      {{ form.password2 }}
      {{ form.password2.errors }}
    </div>
    <div>
      <label for="{{ form.friend_code.id_for_label }}" class="block font-medium">{{ form.friend_code.label }}</label>
      {{ form.friend_code }}
      {{ form.friend_code.errors }}
    </div>
    <button type="submit" class="btn btn-primary w-full">{% trans "Sign Up" %}</button>
  </form>
  <div class="mt-4 text-center">
    <p>{% trans "Already have an account?" %} <a href="{% url 'account_login' %}" class="text-primary underline">{% trans "Log In" %}</a></p>
  </div>
</div>
{% endblock %}