{% extends 'core/base.html' %}
{% block title %}{% if mode == 'login' %}Sign In{% else %}Sign Up{% endif %} – SplitChat{% endblock %}

{% block body %}
<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;">
  <div style="width:100%;max-width:420px;">
    <div style="text-align:center;margin-bottom:32px;">
      <div style="font-size:40px;margin-bottom:12px;">💬</div>
      <div class="logo" style="justify-content:center;font-size:24px;margin-bottom:8px;">SplitChat</div>
      <p class="text-muted text-sm">Chat, plan events, split costs — together.</p>
    </div>
    <div class="card" style="padding:32px;">
      <h2 style="font-size:20px;font-weight:700;margin-bottom:24px;">
        {% if mode == 'login' %}Welcome back{% else %}Create account{% endif %}
      </h2>
      <form method="post">
        {% csrf_token %}
        {% for field in form %}
        <div class="form-group">
          <label>{{ field.label }}</label>
          {{ field }}
          {% if field.errors %}<div class="error-list">{{ field.errors.0 }}</div>{% endif %}
        </div>
        {% endfor %}
        {% if form.non_field_errors %}
        <div class="error-list" style="margin-bottom:12px;">{{ form.non_field_errors.0 }}</div>
        {% endif %}
        <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;margin-top:8px;">
          {% if mode == 'login' %}Sign In{% else %}Create Account{% endif %}
        </button>
      </form>
      <div class="divider"></div>
      <p class="text-sm text-muted" style="text-align:center;">
        {% if mode == 'login' %}
          Don't have an account? <a href="{% url 'signup' %}">Sign up free</a>
        {% else %}
          Already have an account? <a href="{% url 'login' %}">Sign in</a>
        {% endif %}
      </p>
    </div>
  </div>
</div>
{% endblock %}