{% extends 'base.html' %}
{% block title %}Log In — 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">Welcome back</h1>
      <p class="auth-subtitle">Log in to your WildWatch account</p>
    </div>

    <!-- Google Sign In -->
    <a href="{% url 'social:begin' 'google-oauth2' %}" 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>
      Continue with Google
    </a>

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

    <form method="post" novalidate>
      {% csrf_token %}
      <div class="form-group">
        <label class="form-label">Username</label>
        {{ form.username }}
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        {{ form.password }}
      </div>
      {% if form.non_field_errors %}
      <div class="alert alert-error mb-sm">
        {% for error in form.non_field_errors %}{{ error }}{% endfor %}
      </div>
      {% endif %}
      <button type="submit" class="btn-primary" style="justify-content:center; width:100%;">
        <i class="fa-solid fa-right-to-bracket"></i> Log In
      </button>
    </form>

    <p style="text-align:center; font-size:0.88rem; color:var(--text-muted); margin-top:20px;">
      New to WildWatch? <a href="{% url 'register' %}" style="font-weight:600; color:var(--moss);">Create a free account</a>
    </p>
  </div>
</div>
{% endblock %}