{% extends "base.html" %}

{% block title %}Sign In | Witcher RPG{% endblock %}

{% block content %}
  <section style="max-width: 480px; margin: 40px auto; background: #1C2320; border: 1px solid #2F3A34; border-radius: 12px; padding: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.35);">
    <h2 style="font-family: 'Cinzel', serif; color: #D4B26A; margin-top: 0;">Sign in to continue</h2>
    <p style="color: #A8B1AA; margin-bottom: 24px;">Enter your credentials to resume your journey.</p>

    {% if form.non_field_errors %}
      <div style="background: rgba(190, 64, 64, 0.15); border: 1px solid #8C3B3B; color: #F2B8B5; padding: 12px; border-radius: 8px; margin-bottom: 16px;">
        {{ form.non_field_errors }}
      </div>
    {% endif %}

    <form method="post" style="display: grid; gap: 16px;">
      {% csrf_token %}

      <label style="display: grid; gap: 6px; color: #D4B26A;">
        <span>Username</span>
        {{ form.username }}
      </label>

      <label style="display: grid; gap: 6px; color: #D4B26A;">
        <span>Password</span>
        {{ form.password }}
      </label>

      <button type="submit" style="background: linear-gradient(135deg, #B68D4C, #D4B26A); color: #0F1310; border: none; padding: 12px 18px; border-radius: 10px; font-weight: 700; cursor: pointer;">
        Sign In
      </button>
    </form>
  </section>
{% endblock %}