{% extends 'base.html' %}{% load static %}
{% block title %}Log In — Unity Nation{% endblock %}
{% block content %}
<div class="auth-wrap">
<div class="auth-card">
  <!-- Floating orb behind card -->
  <div style="position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(123,95,230,.25),transparent 70%);filter:blur(30px);pointer-events:none"></div>

  <div class="auth-logo"><img src="{% static 'images/9.png' %}" alt="Unity Nation"></div>
  <h1 class="auth-title">Welcome back</h1>
  <p class="auth-sub">Log in to your Unity Nation account</p>

  {% 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 'login' %}">{% csrf_token %}
    <div class="form-group">
      <label class="form-label">Username</label>
      <input type="text" name="username" class="form-control" placeholder="Your 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">Password</label>
      <input type="password" name="password" class="form-control" placeholder="Your password" required autocomplete="current-password">
      {% if form.errors.password %}<div class="field-error"><i class="fas fa-exclamation-circle"></i>{{ form.errors.password }}</div>{% endif %}
    </div>
    <div style="text-align:right;margin-bottom:18px">
      <a href="{% url 'password_reset' %}" style="font-size:.82rem;color:var(--vlt);text-decoration:none">Forgot password?</a>
    </div>
    <button type="submit" class="btn btn-violet btn-block" style="padding:12px;font-size:.92rem">
      <i class="fas fa-sign-in-alt"></i>Log In
    </button>
  </form>

  <!-- Divider -->
  <div style="display:flex;align-items:center;gap:12px;margin:20px 0">
    <div style="flex:1;height:1px;background:var(--border)"></div>
    <span style="font-size:.76rem;color:var(--muted)">New to Unity Nation?</span>
    <div style="flex:1;height:1px;background:var(--border)"></div>
  </div>

  <a href="{% url 'signup' %}" class="btn btn-ghost btn-block" style="padding:11px;justify-content:center">
    <i class="fas fa-user-plus"></i>Create Free Account
  </a>

  <!-- Benefits row -->
  <div style="display:flex;justify-content:space-around;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)">
    <div style="text-align:center">
      <div style="font-family:var(--ff);font-size:1rem;font-weight:700;color:var(--teal)">$0.20</div>
      <div style="font-size:.7rem;color:var(--muted)">Daily reward</div>
    </div>
    <div style="text-align:center">
      <div style="font-family:var(--ff);font-size:1rem;font-weight:700;color:var(--vlt)">$1.00</div>
      <div style="font-size:.7rem;color:var(--muted)">Per referral</div>
    </div>
    <div style="text-align:center">
      <div style="font-family:var(--ff);font-size:1rem;font-weight:700;color:var(--gold)">100</div>
      <div style="font-size:.7rem;color:var(--muted)">Reward days</div>
    </div>
  </div>
</div>
</div>
{% endblock %}