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

{% block title %}Join CampusTalent — Sign Up{% endblock %}
{% block footer %}{% endblock %}

{% block content %}
<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-height) + 2rem) 1rem 3rem;background:linear-gradient(145deg,#F8F9FF 0%,#EEF0FF 100%)">
  <div style="width:100%;max-width:520px">

    <div style="text-align:center;margin-bottom:2rem">
      <a href="{% url 'home' %}" style="display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:1.25rem">
        <svg width="32" height="32" viewBox="0 0 36 36" fill="none">
          <circle cx="18" cy="18" r="17" stroke="url(#sg)" stroke-width="2"/>
          <circle cx="18" cy="10" r="3.5" fill="url(#sg)"/>
          <circle cx="8" cy="25" r="3.5" fill="url(#sg)"/>
          <circle cx="28" cy="25" r="3.5" fill="url(#sg)"/>
          <line x1="18" y1="13" x2="9" y2="22.5" stroke="url(#sg)" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="18" y1="13" x2="27" y2="22.5" stroke="url(#sg)" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="10.5" y1="25" x2="25.5" y2="25" stroke="url(#sg)" stroke-width="1.5" stroke-linecap="round"/>
          <defs><linearGradient id="sg" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse"><stop stop-color="#2D31FA"/><stop offset="1" stop-color="#7C3AED"/></linearGradient></defs>
        </svg>
        <span style="font-family:var(--font-display);font-weight:800;font-size:1.25rem;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">CampusTalent</span>
      </a>
      <h1 style="font-size:1.625rem;margin-bottom:0.375rem">Create your account</h1>
      <p style="color:var(--text-muted)">Join thousands of students building the future</p>
    </div>

    <div class="card" style="box-shadow:var(--shadow-xl)">
      <!-- Google -->
      <a href="{% url 'socialaccount_signup' %}?next=/onboarding/" class="btn btn-block" style="background:white;border:1.5px solid var(--border);color:var(--text-primary);margin-bottom:1.25rem;gap:0.625rem;justify-content:center">
        <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
        Sign up with Google
      </a>
      <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem">
        <hr style="flex:1;border:none;border-top:1px solid var(--border)">
        <span style="font-size:0.78rem;color:var(--text-muted);font-weight:500">OR</span>
        <hr style="flex:1;border:none;border-top:1px solid var(--border)">
      </div>

      <form method="post" action="{% url 'account_signup' %}">
        {% csrf_token %}
        {% if form.errors %}
        <div class="alert alert-danger">Please fix the errors below.</div>
        {% endif %}

        <div class="grid-2" style="gap:1rem">
          <div class="form-group" style="margin-bottom:0">
            <label class="form-label">First Name</label>
            <input type="text" name="first_name" class="form-input" placeholder="First name" required value="{{ form.first_name.value|default:'' }}">
          </div>
          <div class="form-group" style="margin-bottom:0">
            <label class="form-label">Last Name</label>
            <input type="text" name="last_name" class="form-input" placeholder="Last name" required value="{{ form.last_name.value|default:'' }}">
          </div>
        </div>

        <div class="form-group" style="margin-top:1rem">
          <label class="form-label">Email Address</label>
          <input type="email" name="email" class="form-input" placeholder="you@university.edu" required value="{{ form.email.value|default:'' }}">
        </div>

        <!-- Hidden username field (auto-generated) -->
        <input type="hidden" name="username" value="{{ form.username.value|default:'' }}">

        <div class="grid-2" style="gap:1rem">
          <div class="form-group" style="margin-bottom:0">
            <label class="form-label">University</label>
            <input type="text" name="university" class="form-input" placeholder="Your university" value="{{ form.university.value|default:'' }}">
          </div>
          <div class="form-group" style="margin-bottom:0">
            <label class="form-label">Field of Study</label>
            <input type="text" name="field_of_study" class="form-input" placeholder="e.g. Computer Science">
          </div>
        </div>

        <div class="form-group" style="margin-top:1rem">
          <label class="form-label">Password</label>
          <input type="password" name="password1" class="form-input" placeholder="At least 8 characters" required>
        </div>
        <div class="form-group">
          <label class="form-label">Confirm Password</label>
          <input type="password" name="password2" class="form-input" placeholder="Repeat password" required>
        </div>

        <div class="form-group">
          <label class="form-label">Contact Preference</label>
          <div style="display:flex;gap:0.75rem">
            <label class="radio-option">
              <input type="radio" name="contact_preference" value="email" checked> Email
            </label>
            <label class="radio-option">
              <input type="radio" name="contact_preference" value="phone"> Phone
            </label>
            <label class="radio-option">
              <input type="radio" name="contact_preference" value="both"> Both
            </label>
          </div>
        </div>

        <div class="form-group">
          <label style="display:flex;align-items:flex-start;gap:0.625rem;cursor:pointer;font-size:0.85rem;color:var(--text-secondary)">
            <input type="checkbox" name="terms_agree" required style="margin-top:2px">
            I agree to the Terms of Service and Privacy Policy
          </label>
        </div>

        <button type="submit" class="btn btn-primary btn-block btn-lg">Create Account</button>
      </form>
    </div>

    <p style="text-align:center;margin-top:1.5rem;color:var(--text-muted);font-size:0.875rem">
      Already have an account? <a href="{% url 'account_login' %}" style="color:var(--primary);font-weight:600">Sign In →</a>
    </p>
  </div>
</div>
{% endblock %}