{% extends 'base.html' %}{% load static %}
{% block title %}Sign Up — Unity Nation{% endblock %}
{% block extra_css %}
.auth-card-wide{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);padding:40px 36px;width:100%;max-width:520px;box-shadow:0 32px 80px rgba(0,0,0,.5);animation:fadeUp .4s ease;position:relative}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
{% endblock %}
{% block content %}
<div class="auth-wrap" style="padding:36px 20px">
<div class="auth-card-wide">
  <div style="position:absolute;top:-50px;left:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,168,.2),transparent 70%);filter:blur(28px);pointer-events:none"></div>

  <div class="auth-logo"><img src="{% static 'images/9.png' %}" alt="Unity Nation"></div>
  <h1 class="auth-title">Create your account</h1>
  <p class="auth-sub">Join Unity Nation — earn $0.20 daily from day one</p>

  {% if request.GET.ref %}
  <div class="alert alert-info" style="margin-bottom:18px">
    <i class="fas fa-user-plus"></i>
    <span>You were referred by <strong style="color:var(--white)">{{ request.GET.ref }}</strong> — you'll both earn bonuses!</span>
  </div>
  {% endif %}

  {% if form.non_field_errors %}{% for e in form.non_field_errors %}<div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i><span>{{ e }}</span></div>{% endfor %}{% endif %}

  <form method="post" action="{% url 'signup' %}{% if request.GET.ref %}?ref={{ request.GET.ref }}{% endif %}">{% csrf_token %}
    <div class="form-group">
      <label class="form-label">Username</label>
      <input type="text" name="username" class="form-control" placeholder="Choose a username" required autocomplete="username">
      {% if form.errors.username %}<div class="field-error"><i class="fas fa-exclamation-circle"></i>{{ form.errors.username }}</div>{% endif %}
    </div>
    <div class="form-group">
      <label class="form-label">Full Name</label>
      <input type="text" name="full_name" class="form-control" placeholder="Your full name" required>
    </div>
    <div class="form-group">
      <label class="form-label">Email Address</label>
      <input type="email" name="email" class="form-control" placeholder="your@email.com" required autocomplete="email">
      {% if form.errors.email %}<div class="field-error"><i class="fas fa-exclamation-circle"></i>{{ form.errors.email }}</div>{% endif %}
    </div>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Phone Number</label>
        <input type="text" name="phone_number" class="form-control" placeholder="+1234567890">
      </div>
      <div class="form-group">
        <label class="form-label">Country</label>
        <input type="text" name="country" class="form-control" placeholder="Your country">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Password</label>
        <input type="password" name="password1" class="form-control" placeholder="Create password" required autocomplete="new-password">
        {% if form.errors.password1 %}<div class="field-error"><i class="fas fa-exclamation-circle"></i>{{ form.errors.password1 }}</div>{% endif %}
      </div>
      <div class="form-group">
        <label class="form-label">Confirm Password</label>
        <input type="password" name="password2" class="form-control" placeholder="Repeat password" required autocomplete="new-password">
        {% if form.errors.password2 %}<div class="field-error"><i class="fas fa-exclamation-circle"></i>{{ form.errors.password2 }}</div>{% endif %}
      </div>
    </div>

    <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:9px;padding:11px 14px;font-size:.79rem;color:var(--muted);margin-bottom:18px;display:flex;align-items:flex-start;gap:9px">
      <i class="fas fa-info-circle" style="color:var(--vlt);margin-top:1px;flex-shrink:0"></i>
      <span>After registration, an admin will activate your account. You'll start receiving $0.20/day from activation day.</span>
    </div>

    <button type="submit" class="btn btn-violet btn-block" style="padding:12px;font-size:.92rem">
      <i class="fas fa-rocket"></i>Create My Account
    </button>
  </form>
  <div class="auth-foot" style="margin-top:18px">Already have an account? <a href="{% url 'login' %}">Log in</a></div>
</div>
</div>
{% endblock %}