{% extends "madga/site_base.html" %}
{% load i18n %}

{% block title %}{% trans "Sign up" %} · {{ site.name|default:"MADGA" }}{% endblock %}

{% block content %}
<section class="max-w-md mx-auto px-4 sm:px-6 py-12 sm:py-16">
  <header class="mb-8 text-center">
    <h1 class="font-heading text-2xl sm:text-3xl font-semibold tracking-tight">
      {% trans "Create your account" %}
    </h1>
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
      {% trans "Already have one?" %}
      <a href="{% url 'account_login' %}" class="text-accent hover:underline">{% trans "Sign in" %}</a>
    </p>
  </header>

  <form method="post" action="{% url 'account_signup' %}" class="space-y-4">
    {% csrf_token %}

    {% comment %}
    Allauth renders a Django Form here. We style its fields with our
    madga-* primitives so it matches the studio look.
    {% endcomment %}
    {% for field in form %}
      <div>
        <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
          {{ field.label }}{% if field.field.required %} *{% endif %}
        </label>
        {{ field }}
        {% if field.help_text %}
          <p class="mt-1 text-xs text-slate-500">{{ field.help_text|safe }}</p>
        {% endif %}
        {% for error in field.errors %}
          <p class="mt-1 text-sm text-red-600">{{ error }}</p>
        {% endfor %}
      </div>
    {% endfor %}

    {% if redirect_field_value %}
      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
    {% endif %}

    <button type="submit"
            class="w-full px-5 py-3 rounded-lg bg-accent text-white font-medium hover:opacity-90 transition-opacity">
      {% trans "Create account" %}
    </button>
  </form>

  <p class="mt-8 text-center text-xs text-slate-400">
    {% trans "By signing up you accept our" %}
    <a href="/p/terminos/" class="hover:text-accent">{% trans "terms" %}</a>
    {% trans "and" %}
    <a href="/p/privacidad/" class="hover:text-accent">{% trans "privacy policy" %}</a>.
  </p>
</section>

<style>
  /* Style allauth's form widgets to match the studio. */
  form input[type="text"],
  form input[type="email"],
  form input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    color: #1a1a1a;
  }
  form input:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; border-color: var(--color-accent); }
  [data-theme="dark"] form input { background: #15171F; border-color: #232631; color: #ECEDF0; }
</style>
{% endblock %}