{% extends "account/base.html" %}
{% load i18n %}

{% block head_title %}{% trans "Sign in | Qualty" %}{% endblock %}

{% block content %}
<style>
  :root { color-scheme: dark; }
  body.account { background: radial-gradient(circle at top, #141825, #05060a 55%); font-family: "Inter", sans-serif; }
  .auth-card {
    width: min(420px, 100%);
    margin: 4rem auto;
    padding: 2.5rem;
    border-radius: 24px;
    background: rgba(13, 16, 28, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px rgba(5,6,10,0.65);
    color: #f8fafc;
  }
  .auth-card h1 { font-size: 1.75rem; margin-bottom: 1rem; }
  .auth-card p { color: rgba(248,250,252,0.7); }
  .auth-card form input {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(15,18,30,0.6);
    color: #f8fafc;
  }
  .auth-card button {
    width: 100%;
    padding: 0.95rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg,#38bdf8,#6366f1);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
  }
  .divider {
    margin: 1.5rem 0;
    text-align: center;
    color: rgba(248,250,252,0.5);
    font-size: 0.9rem;
  }
</style>

<div class="auth-card">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
    <h1>Sign in to Qualty</h1>
    <div style="width:56px;height:56px;border-radius:20px;background:linear-gradient(135deg,#38bdf8,#818cf8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;">Q</div>
  </div>
  <p>Sign in with your email & password or continue with Google.</p>

  <form method="post" class="mb-3">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">{% trans "Sign In" %}</button>
  </form>

  <div class="divider">or</div>

  <a href="{% url 'socialaccount_login' 'google' %}" style="display:flex;align-items:center;justify-content:center;gap:0.6rem;border:1px solid rgba(255,255,255,0.15);border-radius:999px;padding:0.9rem;text-decoration:none;color:#f8fafc;">
    <svg viewBox="0 0 533.5 544.3" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
      <path fill="#4285f4" d="M533.5 278.4c0-17.4-1.6-34.1-4.6-50.4H272v95.4h146.9c-6.4 34.6-25.5 63.9-54.4 83.5l88 68.3c51.3-47.4 80-117.4 80-196.8z"/>
      <path fill="#34a853" d="M272 544.3c73.2 0 134.6-24.2 179.5-65.6l-88-68.3c-24.4 16.4-55.4 26-91.5 26-70.4 0-130.2-47.6-151.6-111.5l-91 70.1c41.5 82 126.4 148.4 242.6 148.4z"/>
      <path fill="#fbbc04" d="M120.4 325c-11-32.8-11-68.3 0-101.1l-91-70.1c-40.6 80.8-40.6 177.6 0 258.4l91-70.1z"/>
      <path fill="#ea4335" d="M272 107.7c37.7-.6 73.8 13.3 101.4 38.7l75.5-75.5C406.6 24.2 344.5-.8 272 0 155.8 0 70.9 66.4 29.4 148.8l91 70.1C141.8 155.3 201.6 107.7 272 107.7z"/>
    </svg>
    Continue with Google
  </a>

  <p style="margin-top:1.5rem;text-align:center;font-size:0.9rem;color:rgba(248,250,252,0.6);">
    {% trans "Don't have an account?" %} <a href="{% url 'account_signup' %}" style="color:#38bdf8;">{% trans "Sign up" %}</a>
  </p>
</div>
{% endblock %}