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

{% block title %}Sign In — CampusTalent{% 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:440px">

    <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.5rem">
        <svg width="32" height="32" viewBox="0 0 36 36" fill="none">
          <circle cx="18" cy="18" r="17" stroke="url(#lg)" stroke-width="2"/>
          <circle cx="18" cy="10" r="3.5" fill="url(#lg)"/>
          <circle cx="8" cy="25" r="3.5" fill="url(#lg)"/>
          <circle cx="28" cy="25" r="3.5" fill="url(#lg)"/>
          <line x1="18" y1="13" x2="9" y2="22.5" stroke="url(#lg)" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="18" y1="13" x2="27" y2="22.5" stroke="url(#lg)" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="10.5" y1="25" x2="25.5" y2="25" stroke="url(#lg)" stroke-width="1.5" stroke-linecap="round"/>
          <defs><linearGradient id="lg" 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">Welcome back</h1>
      <p style="color:var(--text-muted)">Sign in to your account</p>
    </div>

    <div class="card" style="box-shadow:var(--shadow-xl)">
      <!-- Google OAuth -->
      <a href="{% url 'socialaccount_signup' %}?next=/" 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>
        Continue 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_login' %}">
        {% csrf_token %}
        {% if form.errors %}
        <div class="alert alert-danger">Invalid email or password. Please try again.</div>
        {% endif %}
        <div class="form-group">
          <label class="form-label">Email Address</label>
          <input type="email" name="login" class="form-input" placeholder="you@university.edu" required autofocus value="{{ form.login.value|default:'' }}">
        </div>
        <div class="form-group">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
            <label class="form-label" style="margin-bottom:0">Password</label>
            <a href="{% url 'account_reset_password' %}" style="font-size:0.8rem;color:var(--primary)">Forgot password?</a>
          </div>
          <input type="password" name="password" class="form-input" placeholder="Your password" required>
        </div>
        <input type="hidden" name="remember" value="True">
        <button type="submit" class="btn btn-primary btn-block btn-lg" style="margin-top:0.5rem">Sign In</button>
      </form>
    </div>

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