{% extends 'base.html' %}
{% block title %}Join WildWatch{% endblock %}
{% block footer %}{% endblock %}

{% block content %}
<div class="auth-page">
  <div class="auth-card">
    <div class="auth-logo">
      <div class="auth-logo-icon">🌿</div>
      <h1 class="auth-title">Join WildWatch</h1>
      <p class="auth-subtitle">Create your free conservation account</p>
    </div>

    <!-- Google Sign Up -->
    <a href="{% url 'social:begin' 'google-oauth2' %}{% if ref_code %}?next=/accounts/register/?ref={{ ref_code }}{% endif %}" class="google-btn">
      <svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a7.8 7.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18z"/><path fill="#34A853" d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2a4.8 4.8 0 0 1-7.18-2.54H1.83v2.07A8 8 0 0 0 8.98 17z"/><path fill="#FBBC05" d="M4.5 10.52a4.8 4.8 0 0 1 0-3.04V5.41H1.83a8 8 0 0 0 0 7.18z"/><path fill="#EA4335" d="M8.98 4.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 0 0 1.83 5.4L4.5 7.49a4.77 4.77 0 0 1 4.48-3.3z"/></svg>
      Sign up with Google
    </a>

    {% if ref_code %}
    <div style="background:rgba(90,138,74,0.1); border:1px solid var(--border-mid); border-radius:var(--radius-md); padding:10px 14px; font-size:0.83rem; color:var(--moss); text-align:center; margin-bottom:4px;">
      🤝 You were invited! Your friend earns +3 pts when you join.
    </div>
    {% endif %}

    <div class="auth-divider">or register with email</div>

    <form method="post" novalidate>
      {% csrf_token %}
      {% if ref_code %}<input type="hidden" name="ref_code" value="{{ ref_code }}">{% endif %}
      <div class="form-group">
        <label class="form-label">Username</label>
        {{ form.username }}
        {% if form.username.errors %}<div class="invalid-feedback d-block">{{ form.username.errors.0 }}</div>{% endif %}
      </div>
      <div class="form-group">
        <label class="form-label">Email Address</label>
        {{ form.email }}
        {% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors.0 }}</div>{% endif %}
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        {{ form.password1 }}
        {% if form.password1.errors %}<div class="invalid-feedback d-block">{{ form.password1.errors.0 }}</div>{% endif %}
      </div>
      <div class="form-group">
        <label class="form-label">Confirm Password</label>
        {{ form.password2 }}
        {% if form.password2.errors %}<div class="invalid-feedback d-block">{{ form.password2.errors.0 }}</div>{% endif %}
      </div>
      {% if form.non_field_errors %}
      <div class="alert alert-error mb-sm">{{ form.non_field_errors.0 }}</div>
      {% endif %}
      <button type="submit" class="btn-primary w-100" style="justify-content:center; width:100%;">
        <i class="fa-solid fa-seedling"></i> Create Account
      </button>
    </form>

    <p style="text-align:center; font-size:0.88rem; color:var(--text-muted); margin-top:20px;">
      Already have an account? <a href="{% url 'login' %}" style="font-weight:600; color:var(--moss);">Log in here</a>
    </p>
  </div>
</div>
{% endblock %}